Vuejs
January 23, 2020
Vue.js
Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 이다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계되었다.
선언적 렌더링
;<div id="app">{{ message }}</div>
const app = new Vue({
el: '#app',
data: {
message: '안녕하세용',
},
})Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에 데이터를 선언적으로 렌더링 할 수 있는 시스템이 있다. 텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할 수 있다.
<div id="app-2">
<span v-bind:title="message">
마우스를 올리면 동적으로 바인딩 된 title이 보인다
</span
</div>
const app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는' + new Date() + '에 로드 되었다'
}
})조건문과 반복문
;<div id="app-3">
<p v-if="seen">내가 보인다</p>
</div>
const app3 = new Vue({
el: '#app-3',
data: {
seen: true,
},
})엘리먼트가 표시되는지에 대한 여부를 제어하는 것은 간단하다. javascript콘솔에 app3.seen = false 를 입력하면 ‘내가보인다’메시지가 사라지는 것을 볼 수 있다. 이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여준다. 몇가지 디렉티브가 있으며 각 디렉티브마다 고유한 기능이 있다. 예를들어 v-for 디렉티브는 배열의 데이터를 바인딩하여 목록을 표시하는데 사용할 수 있다.
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
const app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '자바스크립트' },
{ text: '리액트' },
{ text: '뷰' }
]
}
})콘솔에서 app4.todos.push({ text: ‘새 아이템’})을 입력하면 새 항목이 동적으로 추가 된것을 확인할 수 있다.
사용자 입력 핸들링
사용자가 앱과 상호 작용할 수 있게 하기 위해 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트리스너를 추가 할 수 있다.
;<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
const app5 = new Vue({
el: '#app-5',
data: {
message: '안녕하세요 난 재영',
},
methods: {
reverseMessage: function() {
this.message = this.message
.split('')
.reverse()
.join('')
},
},
})이 방법은 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트한다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춘다.
Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다 (리액트는 단방향 바인딩)
;<div id="app-6">
<p>{{ message }}</p>
<input v-model="message" />
</div>
const app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 난 재영',
},
})뷰의 생명 주기의 레벨별 모습
인스턴스 생성
- 인스턴스를 생성할 때 뷰는 뷰-모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화한다.
템플릿과 가상 DOM 생성
- 이 단계에서는 뷰가 템플릿 혹은 렌더링 함수를 찾아 템플릿을 컴파일 합니다. 가상 DOM 복사본을 만들고 그 결과를 HTML DOM에 마운트한다.
이벤트 루프
- 이벤트 루프 중에 관찰자는 뷰-모델의 데이터를 감시합니다. 변화가 있으면 가상 DOM이 다시 렌더링되어 HTML DOM에 적용된다.
인스턴스 소멸
- 앱이 소멸되기 시작하면 완전히 소멸되기 전에 모든 관찰자, 이벤트 리스너, 자식 컴포넌트들이 삭제된다.
