Programming/Vue.js
Vue.js 시작하기
Deafhong
2018. 7. 5. 13:06
반응형
1. Vue.js 이란?
웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크
Vue.js 공식홈페이지 : https://vuejs.org
2. Vue.js 시작하기
Vue.js 을 익히기 위한 요구사항?
HTML, CSS, JavaScript 에 대한 중간 수준의 지식을 필요로 함.
2-1. 선언적 렌더링
핵심 : 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는 것.
실습을 하기 전에 준비해야 할 것.
- https://jsbin.com/ 으로 접속을 한다.
- 각각 예제별로 나와있는 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 의 일부인 사용자 지정 엘리먼트와 매우 유사하나, 몇가지 차이점이 있다.
- Web Components Spec 은 여전히 초안이며, 모든 브라우저에서 기본적으로 구현되지 않는다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE 9 이상)에서 폴리필을 필요로 하지 않으며 일관되게 작동한다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있다.
- Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공한다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요하다.
출처 & 참고사이트 : https://kr.vuejs.org/v2/guide/index.html
반응형