1、文本：使用 {{...}}（雙大括弧）的文本插值 <div id="app"> <p>{{ message }}</p> </div> 2、html 使用v-html指令輸出html的值 3、屬性：屬性的值使用v-bind 以下實例判斷 class1 的值，如果為 true 使用 class1 ...
1、文本：使用 {{...}}（雙大括弧）的文本插值
<div id="app">
<p>{{ message }}</p>
</div>
2、html
使用v-html指令輸出html的值
3、屬性：屬性的值使用v-bind
以下實例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
<div v-bind:class="{'class1': true}">
v-bind:class 指令
</div>
4、表達式：支持js
5、指令：帶有 v- 首碼的特殊屬性。
用於在表達式的值改變時，將某些行為應用到 DOM 上。 例子， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。
<div id="app">
<p v-if="seen">現在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
6、參數：在指令後用冒號指明
綁定：
<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-on:click="doSomething">
7、修飾符
修飾符是以半形句號 . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
8、用戶輸入
v-model實現雙向綁定，在 input、select、textarea、checkbox、radio 等表單控制項元素自動更新綁定的元素的值。
9、按鈕的事件我們可以使用 v-on 監聽事件
10、過濾器
<!-- 在兩個大括弧中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器可以串聯：
{{ message | filterA | filterB }}
過濾器是 JavaScript 函數，因此可以接受參數：
{{ message | filterA('arg1', arg2) }}
11、縮寫
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>
