Vue優點：
- 靈活、易用、高效；
- 用於構建用戶界面的漸進式框架、自底向上逐層應用；
- Vue的核心庫只關注圖層，不僅易於上手，還便於與第三方庫或既有項目整合。
- 當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠爲複雜的單頁應用提供驅動。
- Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統；數據和 DOM被建立了關聯，所有東西都是響應式的。
- Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
- 簡單小巧，漸進式技術棧（簡單小巧指Vue.js壓縮後僅有17KB。漸進式：是指可以一步一步、有階段性地使用Vue.js）。
- 提供了現代Web開發中常見的高級功能（解耦視圖與數據、可複用的組件、前端路由、狀態管理、虛擬DOM）。
一.文本插值
1.{{}}
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
結果：Hello Vue！
2.v-html指令
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>Hello Vue!</h1>'
}
})
</script>
結果：Hello Vue!
3.v-bind指令
<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})
結果：鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
二.條件與循環
1.v-if v-else v-else-if條件指令
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
結果：現在你看到我了；繼續在控制檯輸入 app3.seen = false，你會發現之前顯示的消息消失了。
2.v-for循環指令
例1：
<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: '整個牛項目' }
]
}
})
結果：學習JavaScript
學習Vue
整個牛項目
在控制檯裏，輸入 app4.todos.push({ text: '新項目' })，你會發現列表最後添加了一個新項目。
例2：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鳥教程',
url: 'http://www.runoob.com',
slogan: '學的不僅是技術，更是夢想！'
}
}
})
</script>
結果：
- 0. name : 菜鳥教程
- 1. url : http://www.runoob.com
- 2. slogan : 學的不僅是技術，更是夢想！
例3：v-for也可以循環整數
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app'
})
</script>
三.處理用戶輸入
1.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: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
結果：
2.v-model指令：實現表單輸入和應用狀態的雙向綁定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
結果：
四.其他指令
1.v-pre指令
在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。
<div v-pre>{{message}}</div>
這時並不會輸出我們的message值，而是直接在網頁中顯示{{message}}
2.v-cloak指令
在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一起使用
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
3.v-once指令
在第一次DOM時進行渲染，渲染完成後視爲靜態內容，跳出以後的渲染過程。
<div v-once>第一次綁定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
五.修飾符
1.事件修飾符：
Vue.js 爲 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令後綴來調用修飾符。
.stop.prevent.capture.self.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
2.按鍵修飾符：
Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 爲最常用的按鍵提供了別名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名：
.enter.tab.delete(捕獲 "刪除" 和 "退格" 鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
六.參數
參數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：
<div id="app">
<pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
七.縮寫
Vue.js 爲兩個最爲常用的指令提供了特別的縮寫：
v-bind縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>