一、事件处理
1.监听事件：
v-on指令监听DOM事件
2.事件处理方法
a.在触发时运行一些简单的javascript代码
<button v-on:click="counter += 1">Add 1</button>
b.接收一个需要调用的方法名称
<button v-on:click="greet">Greet</button>
c.在内联javascript语句中调用方法
<button v-on:click="say('what')">Say what</button>
d.在内联语句处理器中访问原始的DOM事件，可以用特殊变量$event把它传入方法
<button v-on:click="warn('Form cannot be submitted yet.,'$event)">Submit</button>
3.事件修饰符：
.stop - 调用event.stopPropagation()
.prevent - 调用event.preeventDefault()
.capture - 添加事件侦听器时使用capture模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
.passive - 以{passive:true}模式添加侦听器
注： 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
实例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="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> 二、表单输入绑定
1.基础用法：v-model指令
a.v-model 指令在表单input和textarea元素上创建双向数据绑定。
b.v-model 会忽略所有的表单元素的value，checked，selected特性的初始值，
而总是将vue示例的数据作为数据来源，所以初始值应该声明到data中。
c.对于需要使用输入法（如：中文，日文等）的语言，v-model不会再输入法组合文字过程中得到更新。
如果要处理这个过程，需要使用input事件。
2.复选框
a.单个复选框：选中与不选中获取true和false，会忽略checkbox本身的value值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
new Vue({
el: '#example-2',
data: {
checked: false //值是true或false
}
})
b.多个复选框，绑定到同一个数组，选中获取一个数组，包含被选中的复选框的value
<div id='example-3'>
<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 }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: [] // 值是"Jack"，"John"或"Mike"
}
})
3.单选框：获取选中的value值
<div id="example-4">
<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>
</div>
new Vue({
el: '#example-4',
data: {
picked: 'One' //表示默认选中第一个radio,若为空则都不选中
}
})
4.select下拉选择框：
若option有value值，选中时获取的是value值，若无，则获取option的text；多选获的一个被选中的值组成的数组。
<div id="example-5">
<select v-model="selected" multiple="multiple">
<option disabled value="">请选择</option>
<option >A</option>
<option >B</option>
<option >C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-5',
data: {
selected: ''
}
})
注： 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
5. 修饰符：
a. .lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
b. .number: 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串
c. .trim: 自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符