一、vue表單控件綁定
1、綁定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.1 【複選框】
<div id="example">
<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
<span>{{ toggle }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
toggle:'',
a:true,
b:false
}
})
</script>
1.2 【單選按鈕】
<div id="example">
<input type="radio" v-model="pick" :value="a">
<span>{{ pick }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
pick:'',
a:true
}
})
</script>
1.3 【選擇列表】
<div id="example">
<select v-model="selected">
<option :value="{ number: 123 }">123</option>
<option :value="{ number: 234 }">234</option>
<option :value="{ number: 345 }">345</option>
</select>
<span>Selected: {{ selected.number }}</span>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
selected:''
}
})
</script>
2、修飾符
2.1 【.lazy】
在默認情況下， v-model在input事件中同步輸入框的值與數據，但可以添加一個修飾符 lazy ，從而轉變爲在change事件中同步
下列例子中，光標移出輸入框時，才同步數據
<div id="example">
<input v-model.lazy="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:''
}
})
</script>
2.2 【.number】
如果想自動將用戶的輸入值轉爲Number類型（如果原值的轉換結果爲 NaN 則返回原值），可以添加一個修飾符number給v-model來處理輸入值
這通常很有用，因爲在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型
<div id="example">
<div>
<input v-model="age1" type="number">
<span>{{type1}}</span>
<p>普通輸入: {{ age1 }}</p>
</div>
<div>
<input v-model.number="age2" type="number">
<span>{{type2}}</span>
<p>number修飾符輸入: {{ age2 }}</p>
</div>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
age1:'',
age2:'',
},
computed:{
type1:function(){
return typeof(this.age1)
},
type2:function(val){
return typeof(this.age2)
},
}
})
</script>
2.3 【.trim】
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入
<div id="example">
<input v-model.trim="msg">
<p>msg is: {{ msg }}</p>
</div>
二、vue 實例生命週期
【beforeCreate】
在實例開始初始化時同步調用。此時數據觀測、事件等都尚未初始化
【created】
在實例創建之後調用。此時已完成數據觀測、事件方法，但尚未開始DOM編譯，即未掛載到document中
【beforeMount】
在mounted之前運行
【mounted】
在編譯結束時調用。此時所有指令已生效，數據變化已能觸發DOM更新，但不保證$el已插入文檔
【beforeUpdate】
在實例掛載之後，再次更新實例(例如更新 data)時會調用該方法，此時尚未更新DOM結構
【updated】
在實例掛載之後，再次更新實例並更新完DOM結構後調用
【beforeDestroy】
在開始銷燬實例時調用，此刻實例仍然有效
【destroyed】
在實例被銷燬之後調用。此時所有綁定和實例指令都已經解綁，子實例也被銷燬
【activated】
需要配合動態組件keep-live屬性使用。在動態組件初始化渲染的過程中調用該方法
【deactivated】
需要配合動態組件keep-live屬性使用。在動態組件初始化移出的過程中調用該方法
三、vue自定義指令
1 指令註冊
以一個input元素自動獲得焦點爲例，當頁面加載時，使用autofocus可以讓元素將獲得焦點 。但是autofocus在移動版Safari上不工作。現在註冊一個使元素自動獲取焦點的指令
指令註冊類似於組件註冊，包括全局指令和局部指令兩種
1.1 【全局指令】
使用Vue.diretive()來全局註冊指令
// 註冊一個全局自定義指令 v-focus
Vue.directive('focus', {
// 當綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
1.2 【局部指令】
也可以註冊局部指令，組件或Vue構造函數中接受一個 directives 的選項
var vm = new Vue({
el: '#example',
directives:{
focus:{
inserted: function (el) {
el.focus()
}
}
}
})
2 鉤子函數
指令定義函數提供了幾個鉤子函數（可選）
【bind】
只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作
【inserted】
被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）
【update】
所在組件的 VNode 更新時調用，但是可能發生在其孩子的 VNode 更新之前。指令的值可能發生了改變也可能沒有。但是可以通過比較更新前後的值來忽略不必要的模板更新
【componentUpdated】
所在組件的 VNode 及其孩子的 VNode 全部更新時調用
【unbind】
只調用一次， 指令與元素解綁時調用
3 鉤子函數參數
鉤子函數被賦予了以下參數
【el】
指令所綁定的元素，可以用來直接操作 DOM
【binding】
一個對象，包含以下屬性：
name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
【vnode】
Vue 編譯生成的虛擬節點
【oldVnode】
上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用
[注意]除了 el 之外，其它參數都是隻讀的，儘量不要修改他們。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行
4 【函數簡寫】
大多數情況下，可能想在bind和update鉤子上做重複動作，並且不想關心其它的鉤子函數。可以這樣寫：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
【對象字面量】
如果指令需要多個值，可以傳入一個JS對象字面量。指令函數能夠接受所有合法類型的JS表達式
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})