Vue的cdn引入地址：https://cdn.bootcss.com/vue/2.6.10/vue.js
在開始正式的內容之前，先簡單介紹一下情況，Vue的學習其實相比其他框架要容易許多，這是被很多人成爲國人的驕傲的我們自己的框架，相信很多英文水平不是很好的朋友早就被各種框架官網的API搞的雲裏霧裏，而自己的框架最讚的就是官網我們都看得懂，所以我只是整理了很多官網的API以及部分案例，通篇介紹了Vue的用法，由於要控制篇幅，所以，某些代碼塊省略了外層結構。請見諒！另外因爲在業餘時間整理，所以時間緊，任務重，如果有錯誤之處，望指出！
模板語法
Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。
如果你熟悉虛擬 DOM 並且偏愛 JavaScript 的原始力量，你也可以不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。
文本
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg屬性發生了改變，插值處的內容都會更新。
通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定：
原始 HTML
雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你需要使用 v-html指令：
你的站點上動態渲染的任意 HTML 可能會非常危險，因爲它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
Mustache 語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
對於布爾特性 (它們只要存在就意味着值爲 true)，v-bind 工作起來略有不同，在這個例子中
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled 特性甚至不會被包含在渲染出來的 <button> 元素中。
使用 JavaScript 表達式
迄今爲止，在我們的模板中，我們一直都只綁定簡單的屬性鍵值。但實際上，對於所有的數據綁定，Vue.js 都提供了完全的 JavaScript 表達式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
這些表達式會在所屬 Vue 實例的數據作用域下作爲 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。
<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在模板表達式中試圖訪問用戶定義的全局變量。
指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for是例外情況，稍後我們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。回顧我們在介紹中看到的例子：
<p v-if="seen"></p>
現在你看到我了
這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。
參數
一些指令能夠接收一個“參數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：
<a v-bind:href="url">...</a>
在這裏 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。
另一個例子是 v-on 指令，它用於監聽 DOM 事件：
<a v-on:click="doSomething">...</a>
在這裏參數是監聽的事件名。我們也會更詳細地討論事件處理。
動態參數
從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作爲一個指令的參數：
<a v-bind:[attributeName]="url"> ... </a>
這裏的 attributeName 會被作爲一個 JavaScript 表達式進行動態求值，求得的值將會作爲最終的參數來使用。例如，如果你的 Vue 實例有一個 data 屬性 attributeName，其值爲 “href”，那麼這個綁定將等價於 v-bind:href。
同樣地，你可以使用動態參數爲一個動態的事件名綁定處理函數：
<a v-on:[eventName]="doSomething"> ... </a>
同樣地，當 eventName 的值爲 “focus” 時，v-on:[eventName] 將等價於 v-on:focus。
對動態參數的值的約束
動態參數預期會求出一個字符串，異常情況下值爲 null。這個特殊的 null 值可以被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。
對動態參數表達式的約束
動態參數表達式有一些語法約束，因爲某些字符，例如空格和引號，放在 HTML 特性名裏是無效的。同樣，在 DOM 中使用模板時你需要回避大寫鍵名。
例如，下面的代碼是無效的：
<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種複雜表達式。
另外，如果你在 DOM 中使用模板 (直接在一個 HTML 文件裏撰寫模板)，需要留意瀏覽器會把特性名全部強制轉爲小寫：
<a v-bind:[someAttr]="value"> ... </a>
修飾符
修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
在接下來對 v-on 和 v-for 等功能的探索中，你會看到修飾符的其它例子。
縮寫
v- 前綴作爲一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲 (dynamic behavior) 時，v- 前綴很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application)時，v- 前綴也變得沒那麼重要了。因此，Vue 爲 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨着你更深入地瞭解它們的作用，你會慶幸擁有它們。
vue指令：
通過html標籤內添加屬性來實現操作dom元素的目的，添加的數據就是指令；
在使用vue時，要先創建vue的實例，再利用屬性el："元素名稱/class/id"的形式，設置vue的作用範圍，與操作模板；
然後在data屬性中設置指令需要用的參數（也就是相當於設置vue的全局變量）；
具體寫法：
<div class="exm">
</div>
new Vue({
el:".exm",
data:{
msg:"<p>這是一個可以用v-html解析出來的p元素</p>"，
msg1："<p>這個一個用v-text解析不出來的p元素</p>"，
}
})
操作DOM元素：
改變dom元素的內容：
v-html = “變量” ；（可以解析html元素）；
v-text = “變量” ；（不能解析html元素）；
<div class="exm">
//<p v-html="vue變量名">{{vue變量名}}</p>
<p v-html="msg">{{msg}}</p> //可以解析html元素
<p v-text="msg1">{{msg1}}</p> //不可以解析html元素
</div>
new Vue({
el:".exm",
data:{
msg:"<p>這是一個可以用v-html解析出來的p元素</p>"，
msg1："<p>這個一個用v-text解析不出來的p元素</p>"，
}
})
列表渲染：
我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。
在 v-for 塊中，我們可以訪問所有父作用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。
你也可以用 of 替代 in 作爲分隔符，因爲它更接近 JavaScript 迭代器的語法；
<div class="exm">
<ul>
/*<p v-for="自定義變量名 in vue變量名">{{自定義變量名}}</p>
遍歷obj的結果是有三個li元素被渲染，每個li元素的內容分別對應obj屬性的屬性值；
*/
<li v-for="item in obj">{{item}}</li> //類似for in 的使用，item爲具體的值
--------------------------------------------------------------------------------------------
/* 遍歷的如果是對象，index代表對象的屬性，item代表屬性的值，這一點與原生js不同；
在vue遍歷渲染的指令中，對象的屬性也是有索引的！！！
下面的代表遍歷的結果是 有三個li元素被渲染，每個li元素的內容分別爲：
屬性值----屬性---索引
*/
<li v-for="(item,vaule,index) in obj">{{item}}--{{value}}-{{index}}</li>
-------------------------------------------------------------------------------------------
/* 遍歷的如果是數組，index代表數組的每一項的索引，item代表數組的每一項的值
與遍歷對象相似，
下面的代表遍歷的結果是 有三個li元素被渲染，每個li元素的內容分別爲：
值----索引
*/
<li v-for="(item,index) in arr">{{item}}---{{index}}</li>
------------------------------------------------------------------------------------------
/* v-for設置可以接收一個數字，將li渲染相應的次數，
item代表從1開始的數字，本案例到10爲止（包含10）*/
//按數字循環
<li v-for="item in 10">{{item}}</li>
<ul>
</div>
new Vue({
el:".exm",
data:{
obj:{
a:1,
b:2,
c:3
}，
arr:[
1,
2,
3
]
}
})
條件渲染：
分爲單條件渲染，雙分支渲染，多分支渲染；
vue指令：v-if=“vue變量/條件” v-else-if=“條件” v-else
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
//定義vue模板，與vue作用範圍；
<div class="exm">
/* 當v-if的初始值爲false時，元素渲染爲惰性渲染，即不渲染，適用於flag切換不頻繁的情況
渲染基礎是通過flag的值爲真還是爲假，來決定元素的渲染，所以當元素不渲染時，在dom中
是無該渲染元素的（區別於隱藏，此處是在結構中完全不存在）
*/
//單條件渲染
<p v-if="flag">當v-if的值爲true時，p元素才渲染</p>
/* 雙分支渲染 v-else不寫值*/
//雙分支渲染
<p v-if="flag">雙分支</p>
<p v-else>雙分支</p>
//多分支渲染
<p v-if="a===1">多分支</p>
<p v-else-if="a===2">多分支</p>
<p v-else>多分支</p>
</div>
new Vue({
el:".exm",
data:{
flag:true，
a:1,
}
})
用 key 管理可複用的元素
Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因爲兩個模板使用了相同的元素， 不會被替換掉——僅僅是替換了它的 placeholder。
這樣也不總是符合實際需求，所以 Vue 爲你提供了一種方式來表達“這兩個元素是完全獨立的，不要複用它們”。只需添加一個具有唯一值的 key 屬性即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
現在，每次切換時，輸入框都將被重新渲染。
注意，<label> 元素仍然會被高效地複用，因爲它們沒有添加 key 屬性。
v-show:
另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
v-if 與 v-for 一起使用
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。請查閱列表渲染指南 以獲取詳細信息。
綁定：
綁定屬性：
v-bind：
利用v-bind指令可以將class綁定在指定元素上，而以往我們用原生js來實現時，通常要先獲取dom元素在進行操作，而現在我們只需要在相應元素的html結構內class屬性前加上v-bind指令就可以實現這一操作；
寫法：(在此約定vue表示vue作用範圍內的data中定義的屬性)
v-bind的寫法：
綁定類時正常寫法是在class前加上v-bind：即 v-bind:class = " [ “vue”,“vue”,“vue” ] ";
但在實際情況下我們常常採用簡寫形式，這種形式是Vue官方提供，省略了v-bind，
：class = " [ “vue”,“vue”,“vue” ] ";
v-bind參數的寫法：
v-bind指令可以接收數據或者對象爲參數；並且針對不同類型的參數有不同的vue變量的表示方式：
當參數爲數組時，[ “green”,“maxheight”,“maxwidth” ] ,正是正常的寫法，但是Vue允許我們簡寫省略 每一項的雙引號。
當參數爲對象時，{ [ green ] : vue , [ maxheight ] : vue , [ maxwidth ] : vue } ; 注意參數爲對象時，裏面的屬性的寫法，用中括號括起來是爲了使用變量，在這裏green，maxheight，maxwidth都是在data中由用戶自己設置的屬性，屬性值爲要綁定的類，後面的vue爲布爾值的變量，也是在data中由用戶自己設置，當vue爲true時，該類名進行綁定，爲false時，該類名不綁定。
當html中的元素自身擁有class時，仍然重新利用v-bind指令綁定新的類，此時新的類名會與原類名進行合併，這種情況是Vue做過一定的處理，由此，我們可以更方便的使用第三方的UI框架，而不用更改原有類。
<p class = "text" :class = [size,bg]></p> //此處會將class名合併
下面做了簡單的演示：（綁定類，參數分別爲對象、數組時的寫法)
<div class="app">
<hr>
<div>綁定屬性</div>
<h2 v-bind:class="[red,maxheight,maxwidth]">這是綁定一個紅色背景的類</h2>
<p v-bind:class="{[green]:flag,[maxheight]:flag,[maxwidth]:flag}">綁定的綠色的類</p>
//我們也可以像下面這樣簡寫
<h2 :class="[red,maxheight,maxwidth]">這是綁定一個紅色背景的類</h2>
//數組內也可以寫成對象的形式
<h2 :class="[{red,maxheight},maxwidth]">這是綁定一個紅色背景的類</h2>
<p :class="{[green]:flag,[maxheight]:flag,[maxwidth]:flag}">綁定的綠色的類</p>
<hr>
</div>
<script>
new Vue({
el:".app",
data:{
data:"這是一條測試用數據",
flag:true,
red:"red",
green:"green",
pink:"pink",
yellow:"yellow",
orange:"orange",
minwidth:"minwidth",
maxwidth:"maxwidth",
minheight:"minheight",
maxheight:"maxheight"
}
})
我們也可以在參數內使用三元運算來寫，下面看下引深的例子
//當flag爲真時，執行size，否則執行bg
<p :class = "{ [size]: flag,[bg]: flag}" ></p>
//數組中寫法一樣
<p :class = "[ size, flag?bg:color ]"></p>
//但在實際應用中，我們更推薦使用短路原則來寫，這樣會使運行的效率更高。
<p :class = "[ size, flag && bg || color ]"></p>
通過類的綁定，我們可以找到這種操作帶來的方便的感覺，但是Vue的綁定指令不僅限於class的綁定，而是可以操作任意的元素屬性，包括style這樣的屬性，下面我們看個例子
參數爲對象時
//參數爲對象可以直接將css寫入style，但是要注意，css屬性值要用引號括起來
<p :style="{width:'200px',height:'200px',background:'purple'}">這個是測試的盒子</p>
//我們也可以把css屬性值替換爲data屬性
<p :style="{width:vue,height:vue,background:vue}">值可以是設置在data中的屬性</p>
參數爲數組時，寫法稍有不同
<p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
<p :style = "[ styleObj,styleColor ]"></p>
new Vue({
el: '#app', // 掛載
data: {
styleObj: {
width: '100px',
height: '100px'
},
styleColor: {
background: 'yellow'
}
}
})
以上是兩個比較特殊的例子，之前講過，實際v-bind可以綁定dom元素上的任意屬性；
比如：
<img :src="imgUrl" alt="">//imgUrl表示data中設置的屬性
//此處並不限於src，style，class等等這些屬性，任意屬性都可以用v-bind綁定
除此之外，我們再看個比較特殊的例子
<p><input type="text" v-bind:value="vue"></p> //vue是data中定義的屬性
但是需要注意的是，這種綁定實現的是單向的綁定，即數據的改變可以影響視圖的改變，但視圖的改變不會引起數據的變化；（我們也可以通過這種單向綁定實現雙向綁定的效果）；
在表單的實際操作中，我們需要的是數據與視圖的雙向變化，也就是所說的雙向綁定，爲此Vue提供了另一個指令來解決這樣的問題。
v-model：
這個指令將要實現的是表單輸入框展示出來的內容與具體定義的數據間的雙向綁定，v-model默認綁定的即爲表單的value屬性，所以，可以認爲v-model是爲了表單量身定做的
v-model的常規的應用案例：
<div id="app">
<h3> v-model 雙向數據綁定 </h3>
<input type="text" v-model = "msg">
</div>
<script src="cdn引入vue"></script>
<script>
new Vue({
el: '#app', // 掛載
data: {
msg: '測試的句子'
}
})
</script>
綁定事件：
v-on：
Vue中另一個重要的綁定，就是事件綁定，爲了貼合mvvm架構的理念，Vue提供了一個methods選項來爲綁定的事件放置邏輯的編寫（爲了實現邏輯與視圖的分離）；
methods選項的值爲一個對象，裏面可以寫一個或多個事件處理函數，這裏需要注意的是，methods內的時間處理函數在使用時，類似全局變量，不需要像js中一樣調用，而是直接使用，而且，狀態一旦設定，就不可更改了。
案例：（v-on 具有簡寫形式，具體看案例）
<body>
<div id="app">
<button @click = "fn"> 點擊 </button> //此處@click是v-on:click的簡寫方式；
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
vue中寫事件，先寫邏輯在綁定
*/
new Vue({
el: '#app',
methods: { //在此處寫事件處理函數
fn () {
alert('成功！！')
}
}
})
</script>
當事件處理函數需要取表單的值的時候，我可以結合v-model來實現：
<body>
<div id="app">
<input type="text" v-model = "val">
<button @click = "fn( val )"> 點擊 </button>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
業務： 點擊button按鈕，彈出input的value
經驗： 看到表單,想要得到它的value值，直接v-model
vue事件傳參
*/
new Vue({
el: '#app',
data: {
val: ''
},
methods: {
fn ( val ) {
alert( val )
}
}
})
</script>
這個案例是通過v-model雙向綁定的原理拿到val的值，當表單value值發生變化時，val的值也跟着實時變化的，所以，我們也可以不通過這種傳參的方式取值，直接alert（this.val）也是一樣的效果；
在原生js中，事件往往伴隨着事件對象來應用，但是在Vue中會有一些問題：
<button @click = "fn( 1 )"> 點擊 </button>
new Vue({
el: '#app'，
methods: {
fn ( e,a ) {
console.log(e); // undefiend
console.log(a); // 1
}
}
})
這個案例我們可以看到，當事件處理函數中含有除了事件對象以外的參數的時候，會導致事件對象丟失（即使兩個參數互換位置，也是如此），所以爲了解決這個問題，我們可以使用在事件函數調用時傳入一個$event來解決這個問題。
案例改造：
<button @click = "fn( $event,1 )"> 點擊 </button>
new Vue({
el: '#app'，
methods: {
fn ( e,a ) {
console.log(e); // MouseEvent
console.log(a); // 1
}
}
})
這樣就可以解決事件對象丟失的情況
修飾符：
v-on的修飾符：
在原生js中除了要使用事件對象來解決一些問題，同時也會遇到像事件冒泡，事件捕獲，瀏覽器默認行爲等等的問題，如果我們有多個元素需要執行事件，同時又都要解決事件冒泡的問題，那麼幾個元素，e.stopPropagation（）這句代碼我們就得寫多少遍，這是一個費力不討好的寫法，所以，Vue爲了解決類似這樣的麻煩，引入了修飾符的概念；
在此我們先簡單介紹關於事件相關的修飾符：
官網此處的介紹已經很詳細，在此就直接抄錄過來
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
用法：
綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
在監聽原生 DOM 事件時，方法以事件爲唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性：v-on:click=“handle(‘ok’, $event)”。
從 2.4.0 開始，v-on 同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。
示例：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 動態事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 動態事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行爲 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行爲，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
計算屬性和偵聽器
計算屬性：computed
在編寫業務過程中，不可避免的需要某些邏輯來支撐結構表現，而且在Vue模板內部支持大部分的js語句，我們完全可以實現在模板內部編寫邏輯的情況，但是像這樣在模板內部編寫大量邏輯會背離mvvm架構的理念，所以在此情景下，Vue推薦我們是用計算屬性來講複雜的邏輯從視圖中分離出去。如果你瞭解事件Vue中事件處理函數的用法，你會發現計算屬性的用法與之有些相似之處；
計算屬性，Vue官方給我們提供了一個選項，computed；我們來看一個簡單的案例來幫助我們理解computed到底是什麼
<div id="app">
//這是沒有使用計算屬性來實現的字符串返轉
<p >{{msg.split('').reverse().join('')}} </p>
//這是通過計算屬性來實現的字符串反轉
<p >{{newMsg}} </p>
</div>
new Vue({
el: '#app'，
data:{
msg:"abcdefg"
}
computed: {
newMsg ( ) {
return this.msg.split('').reverse().join('')
}
}
})
所以，我們可以通過案例中所展示的那樣，將複雜的邏輯從視圖結構中分離出去，可以極大的減少維護的成本；
計算屬性的 setter
計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
現在再運行 vm.fullName = ‘John Doe’ 時，setter 會被調用，vm.firstName 和 vm.lastName也會相應地被更新。
計算屬性 vs 偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})