Vue.js - 설명 및 CDN 설치 방법
① Vue.js는 React와 마찬가지로 가상 DOM 을 사용하고 핵심 라이브러리에 집중하고 있다.
② 현재 Github 에서 4만 개가 넘는 Star를 획득해 React 와 Angular의 인기보다 높다.
③ 대규모 개발 프로젝트에서는 CLI(npm) 설치 및 Webpack 빌드를 추천한다.
④ 이번 포스팅에서는 간단하게 CDN 설치 방식을 설명하며, 다음 포스팅에 CLI 설치를 설명하기로 한다.
⑤ 실제 프로젝트에서 사용해 본 결과 신선하고 가벼운 느낌으로 타 프레임워크 대체에 충분하다고 생각한다.
<!-- Vue.js CDN 설치 --> <!-- HTML 파일 내에 삽입 하면 끝.(위치 중요) --> <script src="https://unpkg.com/vue"></script> | cs |
Vue.js - Ajax (Fetch) 통신 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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> </html> | cs |
① 17 line : Vue.js 엔진을 import 하는 라인 위치를 확인하자.
② 25 line : Ajax 역할을 하는 fetch API 함수를 활용한다.
③ 34 line : posts 배열안에 리턴 값을 저장하여 화면에 렌더링(Rendering) 한다.
example.zip
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
|---|---|
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 문법 배우기(1) 강의 및 예제 소스 (0) | 2017.09.30 |
Vue.js - 설명 및 CDN 설치 방법
① Vue.js는 React와 마찬가지로 가상 DOM 을 사용하고 핵심 라이브러리에 집중하고 있다.
② 현재 Github 에서 4만 개가 넘는 Star를 획득해 React 와 Angular의 인기보다 높다.
③ 대규모 개발 프로젝트에서는 CLI(npm) 설치 및 Webpack 빌드를 추천한다.
④ 이번 포스팅에서는 간단하게 CDN 설치 방식을 설명하며, 다음 포스팅에 CLI 설치를 설명하기로 한다.
⑤ 실제 프로젝트에서 사용해 본 결과 신선하고 가벼운 느낌으로 타 프레임워크 대체에 충분하다고 생각한다.
<!-- Vue.js CDN 설치 --> <!-- HTML 파일 내에 삽입 하면 끝.(위치 중요) --> <script src="https://unpkg.com/vue"></script> | cs |
Vue.js - Ajax (Fetch) 통신 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!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> </html> | cs |
① 17 line : Vue.js 엔진을 import 하는 라인 위치를 확인하자.
② 25 line : Ajax 역할을 하는 fetch API 함수를 활용한다.
③ 34 line : posts 배열안에 리턴 값을 저장하여 화면에 렌더링(Rendering) 한다.
example.zip
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
|---|---|
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 문법 배우기(1) 강의 및 예제 소스 (0) | 2017.09.30 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}