Vue.js - 기초 설치 방법 및 Ajax (Fetch) 통신 기본 예제

< ! DOCTYPE html >

< html lang = "ko" >

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

< title > webpos - do < / title >

< / head >

< body >

< div id = 'app' >

< div v - for = 'post in posts' >

< h3 > {{ post.title }} < / h3 >

< p > {{ post.userId }} < / p >

< p > {{ post.body }} < / p >

< / div >

< / div >

< script src = "https://unpkg.com/vue" > < / script >

< script >

new Vue({

el: '#app' ,

data: {

posts: []

},

created() {

fetch( 'https://jsonplaceholder.typicode.com/posts/1' )

.then((response) = > {

if (response.ok) {

return response.json();

}

throw new Error( 'Network response was not ok' );

})

.then((json) = > {

this.posts.push({

userId: json.userId,

title: json.title,

body: json.body

});

})

. catch ((error) = > {

console .log(error);

});

}

});

< / script >

< / body >

from http://niceman.tistory.com/42 by ccl(S) rewrite - 2020-03-06 18:20:53