<!-- 阻止单击事件冒泡 --> <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="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 2.1.4--> <a v-on:click.once="doThis"></a> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
按键修饰符
监听键盘按下的键值
监听keyCode
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
常用按键别名
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
2.1.0
.ctrl
.alt
.shift
.meta
<!-- 同上 --> <input v-on:keyup.enter="submit">
按键组合
<!-- Alt + C --> <input @keyup.alt.67="clear">
所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
八、表单输入绑定
使用 v-modal 给表单控件绑定相关数据（双向绑定）
v-modal 是一个语法糖
<input v-model="something"> // 等同于 <input v-bind:value="something" v-on:input="something = $event.target.value">
基本输入
// 文本框 <input v-model="message" placeholder="edit me"> // 文本域（支持换行） <textarea v-model="message" placeholder="add multiple lines"></textarea> // 复选框 // 单选（返回 true/false ） <input type="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> // 多选 （返回一个数组 ['jack', 'john']） <input type="checkbox" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> //单选框 （返回选中的值） <input type="radio" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" value="Two" v-model="picked"> <label for="two">Two</label> // 下拉框 // 单选 （返回选中的值） <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> // 多选（返回一个数组 ['A','B']） <select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select>
当有选项有 value 属性时，选中时，返回 value, 当属性没有 value 时，选中时返回字符串或 true/false
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select>
绑定动态的value
v-model 绑定的 value 通常是静态字符串，对于 radio、checkbox、select，可以动态的使用v-bind设置value
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b" > // 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b
修饰符
v-modal 的修饰符 .lazy、 .number、.trim
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > // 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） <input v-model.number="age" type="number"> // 过滤用户输入的首尾空格 <input v-model.trim="msg">
自定义输入组件
使用 v-modal 自定义输入组件
前提条件，组件必须有 value 属性， 在有新的value时，可通过 input 事件获取更新的值。
自定义的货币输入组件