This is an old revision of the document!
Vue.js
starting vue.js
- 자바스크립트 프레임워크
- Data Driven
- Template, Directive
- Data binding
- Nuxt.js, VuePress
- Vuex, Vue Router
Vue.js 다운로드
<!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- production version, optimized for size and speed --> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue.js 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- template 출력 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app'
})
기본 기능
- 텍스트 바인딩
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
<p>{{ message }}</p>
- 반복 렌더링; v-for directive, list in data:
- 이벤트 사용; v-on directive, methods:
- 입력 양식과 동기화; v-model directive, data:
- 조건 분기; v-if directive, boolean in data:
- 트랜지션과 애니메이션; <transition>
- {디렉티브}{:매개변수}{.장식자}={값}; ex) v-bind:value.sync = “message”
Options in Vue Objects
var app = new Vue({
// el
el: '#app',
// data
data: {
message: 'Vue.js'
},
// computed
computed: {
computedMessage: function() {
return this.message + '!'
}
},
// lifecycle hooks
created: function() {
// something to what you do
},
// methods
methods: {
myMethod: function() {
// something to what you do
}
}
})
| Lifecycles | |
|---|---|
| Methods | Timing |
| beforeCreate | 인스턴스가 생성되고, 리액티브 초기화가 일어나기 전 |
| created | 인스턴스가 생성되고, 리액티브 초기화가 일어난 후 |
| beforeMount | 인스턴스가 마운트되기 전 |
| mounted | 인스턴스가 마운트된 후 |
| beforeUpdate | 데이터가 변경되어 DOM에 적용되기 전 |
| updated | 데이터가 변경되어 DOM에 적용된 후 |
| beforeDestroy | Vue 인스턴스가 제거되기 전 |
| destroyed | Vue 인스턴스가 제거된 후 |
| errorCaptured | 임의의 자식 컴포넌트에서 오류가 발생했을 때 |