八，事件處理器
監聽事件
可以用v-on 指令監聽DOM 事件來觸發一些javaScript
<div id="example-1">
<button v-on:click="counter += 1">增加1</button>
<p>這個按鈕被點擊了{{ counter }} 次</p>
</div>
var example1 = new Vue({
el: "#example-1"
data: {
counter: 0
}
})
方法事件處理器
v-on 可以接收一個定義的方法來調用
<div id="example-2"> <butto v-on:click="greet">Greet</button> </div> var example2 = new Vue({ el:'#example-2', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello' + this.name + '!') } } }) example2.greet()
內聯事件處理方法
可以內聯JavaScript語句
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
alert(message)
}
})
有時候也需要內聯語句處理器中訪問原生DOM事件 可以用特殊變了$event 把它傳入方法：
<button v-on:click="warn('For cannot be submitted ye.',$event)" >Submit</button>
methods: {
warn: function(message, event) {
if（event） event.preventDefault()
alert(message)
}
}
事件修飾符
為v-on 提供了 事件修飾符 通過由(.)表示的的指令后綴來調用修飾符。
.stop .prevent .capture .self .once
// 防止事件冒泡
<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="doTthis"></div>
// 只當事件在該元素本身（而不是子元素）觸發時觸發回調
<div v-on:click.self="doThat"></div>
按鍵修飾符
在監聽鍵盤事件時，vue允許 v-on 在監聽鍵盤事件時添加按鍵修飾符
// 只有在keyCode 是 13 是調用 vm.submit() <input v-on:keyup.13="submit"> // 記住所有的 keyCode 比較困難， 所以Vue 為最常見的按鍵提供了別名： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit">
全部的按鍵名
.enter .tab .delete .esc .space .up .down .left .right
可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
按鍵修飾符
可以用如下修飾符開啟鼠標或鍵盤事件監聽，使在按鍵按下時發生響應。
.ctrl .alt .shift .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
九，表單控件綁定
基礎用法
用v-model 指令在表單控件元素上創建雙向數據綁定。
<input v-model="message" placeholder="edit me">
<p>Message is:{{ message}}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<textarea v-model="message" placeholder="add multtiple lines"> </textarea>
復選框
單個勾選框，邏輯值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked}}</label>
多個勾選框，綁定到同一個數組
<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="jack">john</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="jack">Mike</label> <span>Checked names: {{checkedNames}}</span> new Vue({ el：'...', data: { checkedNames: [ ] } })
單選按鈕
<input type="radio" id="one" value="One" v-model="picked"> <lable for="one">One</lable> <input type="radio" id="two" value="Two" v-model="picked"> <lable for="one">One</lable> <span>Picked: {{ picked }}</span>
選擇列表
單選列表：
<select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select>
多選列表（綁定到一個數組）：
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
動態選項，用v-for 渲染
<select v-model="selected"> <option v-for="opction in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>selected: {{ sekected}}</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-mode="selected">
<option value="abc">ABC</option>
</select>
復選框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="a"> // 當選中時 vm.toggle === vm.a vm.toggle === vm.b
等選按鈕
<input type="radio" v-model="pick" v-bind:value="a"> // 當選中時 vm.pcik === vm.a
選擇列表設置
<select v-model="selected"> // 內聯對象字面量 <option v-bind:value="{number: 123}">123</option> </select> // 當選中時 typeof vm.selected // object vm.selected.number //123 修飾符
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據 (除了 上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
// 在“change” 而不是在 "input" 時間中更新
<input v-model.lazy="msg">
.number
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">
因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。
.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim=msg>