一：模板語法：
1.{{ }}：數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值
2.v-html ：指令用於輸出 html 代碼
<div id="app7">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
var obj={
rawHtml:"<span>Hello jennifer</span>"
};
var vm=new Vue({
el:'#app7',
data:obj,
});
</script>
輸出后的內容：
Using mustaches: <span>Hello jennifer</span>
Using v-html directive: Hello jennifer
備注：你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
3.v-bind ：HTML 屬性中的值應使用 v-bind 指令（縮寫：v-bind:href="url" / :href="url" ）
4.v-if ：根據表達式 seen 的值(true 或 false )來決定(v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。)
*.因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。
注意我們不推薦在同一元素上使用 v-if 和 v-for。更多細節可查閱風格指南。
當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重復運行於每個 v-for 循環中。當你只想為部分項渲染節點時，這種優先級的機制會十分有用
v-else：
v-else if：
5.v-show：指令來根據條件展示元素（v-show 只是簡單地切換元素的 CSS property display）
注意，v-show 不支持 <template> 元素，也不支持 v-else。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
6.v-for:我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
結果：
·Foo
·Bar
也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法：
<div v-for="item of items"></div>
2.2.0+ 的版本里，當在組件上使用 v-for 時，key 現在是必須的。
5. v-on ：它用於監聽 DOM 事件(縮寫：v-on:click="change" / @click="change")
事件修飾符
.stop.prevent.capture.self.once.passive
<!-- 阻止單擊事件繼續傳播 --> <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> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
2.1.4 新增
<!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a>
2.3.0 新增 Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>
按鍵修飾符
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` --> <input v-on:keyup.enter="submit">
*鼠標按鈕修飾符
6.修飾符是以半角句號 . 指明的特殊后綴，用於指出一個指令應該以特殊方式綁定
7.v-model ：v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定
8.過濾器
9.v-once: 只要加上了這個屬性，能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：
<div id="app7"> <p v-on:click="message = 'jennifer'" v-once>{{message}}</p> //加上了v-once后，點擊事件不會執行了 </div> <script> var obj={ message:"Hello world!" }; var vm=new Vue({ el:'#app7', data:obj, }); </script>
10.Object.freeze(obj)：Object.freeze()，這會阻止修改現有的 property，也意味着響應系統無法再追蹤變化。
<div id="app7">
<p v-on:click="message = 'jennifer'">{{message}}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
Object.freeze(obj); //備注：這段代碼的執行會阻止P標簽的點擊事件無效。
var vm=new Vue({
el:'#app7',
data:obj,
});
</script>
11.computed：計算屬性（setter(做了修改后執行)、getter（未修改前的正常執行））
<div id="app7">
<p>{{message}}</p>
<p>{{reversedMessage }}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
var vm=new Vue({
el:'#app7',
data:obj,
computed:{
reversedMessage(){
return this.message=this.message.split("").reverse().join(".")
}
}
});
</script>
上面的操作，我們可以通過在表達式中調用方法來達到同樣的效果：
<div id="app7">
<p>{{message}}</p>
<p>{{reversedMessage（）}}</p>
</div>
<script>
var obj={
message:"Hello world!"
};
var vm=new Vue({
el:'#app7',
data:obj,
methods:{
reversedMessage(){
return this.message=this.message.split("").reverse().join(".")
}
} }); </script>
重點解讀：不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味着只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。
12：watch：偵聽屬性
<div id="app8">{{name}}</div>
<script>
var vm=new Vue({
el:"#app8",
data:{
firstName:"劉",
lastName:"希賢"
},
computed:{
name(){
return this.name=this.firstName+this.lastName
}
}
})
</script>
結果輸出：劉希賢
方法二：
push()pop()shift()unshift()splice()sort()reverse()filter()、concat()和slice()