8.方法與事件處理器
方法處理器
可以用 v-on 指令監聽 DOM 事件：
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
我們繫結了一個單擊事件處理器到一個方法 greet。下面在 Vue 例項中定義這個方法：
var vm = new Vue({
el: `#example`,
data: {
name: `Vue.js`
},
// 在 `methods` 物件中定義方法
methods: {
greet: function (event) {
// 方法內 `this` 指向 vm
alert(`Hello ` + this.name + `!`)
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 程式碼中呼叫方法
vm.greet() // -> `Hello Vue.js!`
內聯語句處理器
除了直接繫結到一個方法，也可以用內聯 JavaScript 語句：
<div id="example-2">
<button v-on:click="say(`hi`)">Say Hi</button>
<button v-on:click="say(`what`)">Say What</button>
</div>
new Vue({
el: `#example-2`,
methods: {
say: function (msg) {
alert(msg)
}
}
})
類似於內聯表示式，事件處理器限制為一個語句。
有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變數 $event 把它傳入方法：
<button v-on:click="say(`hello!`, $event)">Submit</button>
// ...
methods: {
say: function (msg, event) {
// 現在我們可以訪問原生事件物件
event.preventDefault()
}
}
事件修飾符
在事件處理器中經常需要呼叫 event.preventDefault() 或 event.stopPropagation()。儘管我們在方法內可以輕鬆做到，不過讓方法是純粹的資料邏輯而不處理 DOM 事件細節會更好。
為了解決這個問題，Vue.js 為 v-on 提供兩個 事件修飾符：.prevent 與 .stop。你是否還記得修飾符是點號打頭的指令字尾？
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
1.0.16 新增了兩個額外的修飾符：
<!-- 新增事件偵聽器時使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>
按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢測 keyCode。Vue.js 允許為 v-on 新增按鍵修飾符：
<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，Vue.js 為最常用的按鍵提供別名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名：
enter
tab
delete
esc
space
up
down
left
right
1.0.8+： 支援單字母按鍵別名。
1.0.17+： 可以自定義按鍵別名：
// 可以使用 @keyup.f1
Vue.directive(`on`).keyCodes.f1 = 112
為什麼在 HTML 中監聽事件?
你可能注意到這種事件監聽的方式違背了傳統理念 “separation of concern”。不必擔心，因為所有的 Vue.js 事件處理方法和表示式都嚴格繫結在當前檢視的 ViewModel 上，它不會導致任何維護困難。實際上，使用 v-on 有幾個好處：
掃一眼 HTML 模板便能輕鬆定位在 JavaScript 程式碼裡對應的方法。
因為你無須在 JavaScript 裡手動繫結事件，你的 ViewModel 程式碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。
9.表單控制元件繫結
基礎用法
可以用 v-model 指令在表單控制元件元素上建立雙向資料繫結。根據控制元件型別它自動選取正確的方法更新元素。儘管有點神奇，v-model 不過是語法糖，在使用者輸入事件中更新資料，以及特別處理一些極端例子。
(1)Text:
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
(2)Multiline text:
<span>Multiline message is:</span>
<p>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
(3)Checkbox:
3-1.單個勾選框，邏輯值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
3-2.多個勾選框，繫結到同一個陣列：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
el: `...`,
data: {
checkedNames: []
}
})
(4)Radio:
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
(5)Select
5-1.單選：
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
5-2.多選（繫結到一個陣列）：
<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
5-3.動態選項，用 v-for 渲染：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: `...`,
data: {
selected: `A`,
options: [
{ text: `One`, value: `A` },
{ text: `Two`, value: `B` },
{ text: `Three`, value: `C` }
]
}
})
繫結 value
對於單選按鈕，勾選框及選擇框選項，v-model 繫結的 value 通常是靜態字串（對於勾選框是邏輯值）：
<!-- 當選中時，`picked` 為字串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 當選中時，`selected` 為字串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但是有時我們想繫結 value 到 Vue 例項的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字串。
1.Checkbox
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b
2.Radio
<input type="radio" v-model="pick" v-bind:value="a">
// 當選中時
vm.pick === vm.a
3.Select Options
<select v-model="selected">
<!-- 物件字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當選中時
typeof vm.selected // -> `object`
vm.selected.number // -> 123
引數特性
1.lazy
在預設情況下，v-model 在input 事件中同步輸入框值與資料，可以新增一個特性 lazy，從而改到在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
2.number
如果想自動將使用者的輸入轉為 Number 型別（如果原值的轉換結果為 NaN 則返回原值），可以新增一個特性 number：
<input v-model="age" number>
3.debounce
debounce 設定一個最小的延時，在每次敲擊之後延時同步輸入框的值與資料。如果每次更新都要進行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用。
<input v-model="msg" debounce="500">
注意 debounce 引數不會延遲 input 事件：它延遲“寫入”底層資料。因此在使用 debounce 時應當用 vm.$watch() 響應資料的變化。若想延遲 DOM 事件，應當使用 debounce 過濾器。
10.過渡
通過 Vue.js 的過渡系統，可以在元素從 DOM 中插入或移除時自動應用過渡效果。Vue.js 會在適當的時機為你觸發 CSS 過渡或動畫，你也可以提供相應的 JavaScript 鉤子函式在過渡過程中執行自定義的 DOM 操作。
為了應用過渡效果，需要在目標元素上使用 transition 特性：
<div v-if="show" transition="my-transition"></div>
transition 特性可以與下面資源一起用：
v-if
v-show
v-for （只在插入和刪除時觸發，使用 vue-animated-list 外掛）
動態元件 （介紹見元件）
在元件的根節點上，並且被 Vue 例項 DOM 方法（如 vm.$appendTo(el)）觸發。
當插入或刪除帶有過渡的元素時，Vue 將：
嘗試以 ID "my-transition" 查詢 JavaScript 過渡鉤子物件——通過 Vue.transition(id, hooks) 或 transitions 選項註冊。如果找到了，將在過渡的不同階段呼叫相應的鉤子。
自動嗅探目標元素是否有 CSS 過渡或動畫，並在合適時新增/刪除 CSS 類名。
如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執行。
CSS 過渡
示例:
典型的 CSS 過渡像這樣：
<div v-if="show" transition="expand">hello</div>
然後為 .expand-transition, .expand-enter 和 .expand-leave 新增 CSS 規則:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通過動態繫結實現不同的過渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: `...`,
data: {
show: false,
transitionName: `fade`
}
})
另外，可以提供 JavaScript 鉤子:
Vue.transition(`expand`, {
beforeEnter: function (el) {
el.textContent = `beforeEnter`
},
enter: function (el) {
el.textContent = `enter`
},
afterEnter: function (el) {
el.textContent = `afterEnter`
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = `beforeLeave`
},
leave: function (el) {
el.textContent = `leave`
},
afterLeave: function (el) {
el.textContent = `afterLeave`
},
leaveCancelled: function (el) {
// handle cancellation
}
})
過渡的 CSS 類名
類名的新增和切換取決於 transition 特性的值。比如 transition=”fade”，會有三個 CSS 類名：
.fade-transition 始終保留在元素上。
.fade-enter 定義進入過渡的開始狀態。只應用一幀然後立即刪除。
.fade-leave 定義離開過渡的結束狀態。在離開過渡開始時生效，在它結束後刪除。
如果 transition 特性沒有值，類名預設是 .v-transition, .v-enter 和 .v-leave。
自定義過渡類名
1.0.14 新增
我們可以在過渡的 JavaScript 定義中宣告自定義的 CSS 過渡類名。這些自定義類名會覆蓋預設的類名。當需要和第三方的 CSS 動畫庫，比如 Animate.css 配合時會非常有用：
<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition(`bounce`, {
enterClass: `bounceInLeft`,
leaveClass: `bounceOutRight`
})
顯式宣告 CSS 過渡型別
1.0.14 新增
Vue.js 需要給過渡元素新增事件偵聽器來偵聽過渡何時結束。基於所使用的 CSS，該事件要麼是 transitionend，要麼是 animationend。如果你只使用了兩者中的一種，那麼 Vue.js 將能夠根據生效的 CSS 規則自動推測出對應的事件型別。但是，有些情況下一個元素可能需要同時帶有兩種型別的動畫。比如你可能希望讓 Vue 來觸發一個 CSS animation，同時該元素在滑鼠懸浮時又有 CSS transition 效果。這樣的情況下，你需要顯式地宣告你希望 Vue 處理的動畫型別 (animation 或是 transition)：
Vue.transition(`bounce`, {
// 該過渡效果將只偵聽 `animationend` 事件
type: `animation`
})
過渡流程詳解
當 show 屬性改變時，Vue.js 將相應地插入或刪除 <div> 元素，按照如下規則改變過渡的 CSS 類名：
如果 show 變為 false，Vue.js 將：
呼叫 beforeLeave 鉤子；
新增 v-leave 類名到元素上以觸發過渡；
呼叫 leave 鉤子；
等待過渡結束（監聽 transitionend 事件）；
從 DOM 中刪除元素並刪除 v-leave 類名；
呼叫 afterLeave 鉤子。
如果 show 變為 true，Vue.js 將：
呼叫 beforeEnter 鉤子；
新增 v-enter 類名到元素上；
把它插入 DOM；
呼叫 enter 鉤子；
強制一次 CSS 佈局，讓 v-enter 確實生效。然後刪除 v-enter 類名，以觸發過渡，回到元素的原始狀態；
等待過渡結束；
呼叫 afterEnter 鉤子。
另外，如果在它的進入過渡還在進行中時刪除元素，將呼叫 enterCancelled 鉤子，以清理變動或 enter 建立的計時器。反過來對於離開過渡亦如是。
上面所有的鉤子函式在呼叫時，它們的 this 均指向其所屬的 Vue 例項。編譯規則：過渡在哪個上下文中編譯，它的 this 就指向哪個上下文。
最後，enter 和 leave 可以有第二個可選的回撥引數，用於顯式控制過渡如何結束。因此不必等待 CSS transitionend 事件， Vue.js 將等待你手工呼叫這個回撥，以結束過渡。例如：
enter: function (el) {
// 沒有第二個引數
// 由 CSS transitionend 事件決定過渡何時結束
}
vs.
enter: function (el, done) {
// 有第二個引數
// 過渡只有在呼叫 `done` 時結束
}
當多個元素一起過渡時，Vue.js 會批量處理，只強制一次佈局。
CSS 動畫
CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會立即刪除，而是在 animationend 事件觸發時刪除。
示例： (省略了相容性字首)
<span v-show="show" transition="bounce">Look at me!</span>
.bounce-transition {
display: inline-block; /* 否則 scale 動畫不起作用 */
}
.bounce-enter {
animation: bounce-in .5s;
}
.bounce-leave {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
JavaScript 過渡
也可以只使用 JavaScript 鉤子，不用定義任何 CSS 規則。當只使用 JavaScript 過渡時，enter 和 leave 鉤子需要呼叫 done 回撥，否則它們將被同步呼叫，過渡將立即結束。
為 JavaScript 過渡顯式宣告 css: false 是個好主意，Vue.js 將跳過 CSS 檢測。這樣也會阻止無意間讓 CSS 規則干擾過渡。
在下例中我們使用 jQuery 註冊一個自定義的 JavaScript 過渡：
Vue.transition(`fade`, {
css: false,
enter: function (el, done) {
// 元素已被插入 DOM
// 在動畫結束後呼叫 done
$(el)
.css(`opacity`, 0)
.animate({ opacity: 1 }, 1000, done)
},
enterCancelled: function (el) {
$(el).stop()
},
leave: function (el, done) {
// 與 enter 相同
$(el).animate({ opacity: 0 }, 1000, done)
},
leaveCancelled: function (el) {
$(el).stop()
}
})
然後用 transition 特性中：
<p transition="fade"></p>
漸近過渡
transition 與 v-for 一起用時可以建立漸近過渡。給過渡元素新增一個特性 stagger, enter-stagger 或 leave-stagger：
<div v-for="item in list" transition="stagger" stagger="100"></div>
或者，提供一個鉤子 stagger, enter-stagger 或 leave-stagger，以更好的控制：
Vue.transition(`stagger`, {
stagger: function (index) {
// 每個過渡專案增加 50ms 延時
// 但是最大延時限制為 300ms
return Math.min(300, index * 50)
}
})