1.模板語法
1.1.文本插值，數據綁定。{{}}，如：
<p>{{ message }}</p>
1.2.輸出HTML代碼。v-html，如：
<div v-html="message"></div>
1.3.HTML屬性值綁定。 v-bind，如：
<div id="app"> <pre><a v-bind:href="url">菜鳥教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>
縮寫：
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>
1.4.判斷指令。v-if，如：
<div id="app"> <p v-if="seen">現在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
1.5.監聽DOM事件。 v-on，如：
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
1.6.雙向數據綁定。v-model，用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。如：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
1.7.if else指令：v-if, v-else； else if指令：v-if, v-else-if, v-else;
1.8.使用 v-show 指令來根據條件展示元素。如：
<h1 v-show="ok">Hello!</h1>
1.9.循環使用 v-for 指令。可以用來迭代數組，對象，整數如：
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
1.10.計算屬性。computed，如：
<div id="app"> <p>原始字符串: {{ message }}</p> <p>計算后反轉字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } } }) </script>
computed與methods的區別：我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
computed setter：computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 調用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '菜鳥教程 http://www.runoob.com';
1.11.v-bind:class= 與 v-bind:style= https://www.runoob.com/vue2/vue-class-style.html
2.修飾符
2.1.指明的特殊后綴，用於指出一個指令應該以特殊方式綁定。. （半角句號）。如：
<!--event.preventDefault() 阻止元素發生默認的行為（例如，當點擊提交按鈕時阻止對表單的提交）。--> <form v-on:submit.prevent="onSubmit"></form>
2.2.事件修飾符。
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.3.按鍵修飾符。
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit">
Vue 為最常用的按鍵提供了別名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
.enter/.tab/.delete(捕獲 "刪除" 和 "退格" 鍵)/.esc/.up/.down/.left/.right/.ctrl/.alt/.shift/.meta
3.過濾器
3.1.過濾器函數接受表達式的值作為第一個參數。
以下實例對輸入的字符串第一個字母轉為大寫：
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
4.監聽屬性。
4.1.Vue.js 監聽屬性 watch，我們可以通過 watch 來響應數據的變化。如：
<div id = "app"> <p style = "font-size:25px;">計數器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">點我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(newval, oldval) { alert('計數器值的變化 :' + oldval + ' 變為 ' + newval + '!'); }); </script>
Vue實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，監聽數值counter，如果發生改變則彈出提示框。