Vue.js 는 선언적 렌더링 방식이다.


 <script src="https://unpkg.com/vue"></script>로 임포트 하면 바로 사용이 가능하다.


라이프사이클이 존재한다.


직관적이다. 그래서 속도가 빠르다.


선언적 렌더링


<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})

Vue의 간단한 템플릿 구문이다.

{{}}은 Vue의 보간자이다.  검색해보니 Mustache 템플릿 인거같다.


태그(앨리먼트) 속성을 바인딩 할 수 있다.


<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})

여기서 v-bind는 디렉티브라고 한다.

v는 vue의 줄임말이다.

조건문과 반복문


조건문과 반복문도 아주 쉽게 사용할 수 있다.

<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

js부분의 seen을 false로 바꾸면 p 태그가 출력이 안된다.



<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})

foreach를 이용한것 같다.

todo는 todos안에 있는 JSON Data를 차례대로 넣어준다.

app4.todos.push({ text: 'New item' }) New item도 추가된다.

사용자 입력 핸들링

v-on 디렉티브를 이용해서 이벤트 리스너를 첨부한다.

<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: '안녕하세요! Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

reverseMessage는 말 그대로 문자열을 뒤집는다.

이 메소드는 DOM을 건드리지 않고 앱의 상태를 업데이트 한다.


Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>


var app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 Vue!'
}
})

input에 아무값을 입력하면 p태그안에 값이 입력된다.

작동 순서는 input 입력 -> data.message에 대입 -> p태그에 출력


컴포넌트를 사용한 작성방법

컴포넌트는 Vue에서 중요한 기능이라한다.

재사용을 가능하게 한다. (구조 -> 블럭화)


컴포넌트 생성 방법이다.

// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
template: '<li>할일 항목 하나입니다.</li>'
})

todo-item은 태그네임이다.


<ol>
<!-- todo-item 컴포넌트의 인스턴스 만들기 -->
<todo-item></todo-item>
</ol>

이런식으로 사용 가능하다.


props를 사용해서 하위 컴포넌트로 데이터를 전달도 가능하다.

Vue.component('todo-item', {
// 이제 todo-item 컴포넌트는 "prop" 이라고 하는
// 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
// 이 prop은 todo라는 이름으로 정의했습니다.
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})


<div id="app-7">
<ol>
<!-- 이제 각 todo-item 에 todo 객체를 제공합니다. -->
<!-- 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>

groceryList를 나눠서 item으로 전달해주고 todo값에 item을 넣어준다.

그러면 script부분에서 props(todo)의 text를 불러와 적용시킨다.

<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>

템플릿을 사용하면 이런식으로 쪼갤 수 있다.



'이전 글 > 2017-10-13 이전 글' 카테고리의 다른 글

두 번째 ERD 모델링  (0) 2017.06.28
Vue 인스턴스  (0) 2017.06.28
시작하기  (0) 2017.06.26
ERD를 이용한 DB 모델링  (0) 2017.06.25
Typescript with MSP  (0) 2017.06.25

+ Recent posts