Vue.js 시작하기

1. Vue.js 이란?

---

웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크

위키백과 : https://ko.wikipedia.org/wiki/Vue.js

Vue.js 공식홈페이지 : https://vuejs.org

2. Vue.js 시작하기

---

Vue.js 을 익히기 위한 요구사항?

HTML, CSS, JavaScript 에 대한 중간 수준의 지식을 필요로 함.

2-1. 선언적 렌더링

핵심 : 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는 것.

실습을 하기 전에 준비해야 할 것.

1. https://jsbin.com/ 으로 접속을 한다.
2. 각각 예제별로 나와있는 Html, JavaScript 소스를 jsbin 의 html, javascript 텝에 복사, 붙여넣기를 해가면서 확인한다.
   

Hello World 예제

문자열 템플릿을 렌더링하는 것과 매우 유사하지만, 사실 Vue는 더 많은 작업을 한다.

데이터와 DOM이 연결되어 이제 모든 것이 반응형이라는게 중요하다.

아래 내용대로 한번 따라 쳐보면, 렌더링 예제가 바뀌어지는 것을 확인 할 수 있다.

엘리먼트 속성 바인딩 예제

이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지한다.

여기서 v-bind 속성은 디렉티브 라고 하며, Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있다

사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수 반응형 동작을 한다.

2-2. 조건문과 반복문

v-if

jsbin 홈페이지의 Console에서 아래와 같이 쳐 보면, '이제 나를 볼 수 있어요.' 라는 부분이 사라지는 것을 확인 할 수 있다.

v-for

 

콘솔에서 아래와 같이 입력을 해 보면, 목록에 새 항목이 추가되어 나오는 것을 확인 할 수 있다.

위 예제는 텍스트와 속성뿐만 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여준다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공해준다.

2-3. 사용자 입력 핸들링

v-on

v-model : 양식에 대한 입력과 앱 상태를 양방향으로 바인딩

2-4. 컴포넌트를 사용한 작성방법

컴포넌트 시스템은 Vue의 또 다른 중요한 개념이며, 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념

예시

* 사용자 정의 엘리먼트와의 관계

Vue 컴포넌트는 Web Components Spec 의 일부인 사용자 지정 엘리먼트와 매우 유사하나, 몇가지 차이점이 있다.

1. Web Components Spec 은 여전히 초안이며, 모든 브라우저에서 기본적으로 구현되지 않는다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE 9 이상)에서 폴리필을 필요로 하지 않으며 일관되게 작동한다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있다.
   
2. Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공한다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요하다.

출처 & 참고사이트 : https://kr.vuejs.org/v2/guide/index.html