一、事件修饰符
1. vue普通点击事件
<a v-on:click="fun"></a> <!-- 完整写法 -->
<a @click="fun"></a> <!-- 简写 不带参数 -->
<a @click="fun(参数)"></a> <!-- 简写 带参数 -->
2. vue修饰符:.stop 阻止事件冒泡
//点击child区域时只会执行函数sayChild,不会执行函数sayFather
<div class="father" @click="sayFather">
<div class="child" @click.stop="sayChild">
</div>
</div>
3. vue修饰符:.prevent 阻止事件默认行为
//阻止a标签跳转,仅执行函数f1
<a href="http://www.baidu.com" @click.prevent="f1">百度一下</a>
//阻止表单提交,仅执行函数tf2
<form action="/xxx" @submit.prevent="f2">
<input type="submit" value="注册">
</form>
4. vue修饰符:.capture 使用事件捕获模式
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
5. vue修饰符:.self 只当在 event.target 是当前元素自身时触发处理函数
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
6. vue修饰符:.once 事件将只会触发一次
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
7. vue修饰符:.passive 告诉浏览器你不想阻止事件的默认行为
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
注意:修饰符可以串联,用v-on:click.prevent.self
会阻止所有的点击,而 v-on:click.self.prevent
只会阻止对元素自身的点击。
二、v-model的修饰符
<!-- .lazy :默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步 -->
<input v-model.lazy="msg">
<!-- .number : 自动将用户的输入值转化为数值类型 -->
<input v-model.number="msg">
<!-- .trim : 自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg">
三、键盘事件的修饰符
//按下enter时,执行方法f4,keyup后面跟的是键盘code,例如:enter是code==13的键别名
<input type="text" @keyup.enter="f4"> 等价于 <input type="text" @keyup.13="f4">
//全部按键别名
.enter .tab .delete (捕获“删除”和“退格”键) .esc .space
.up .down .left .right
//修饰键,可以和按键同时使用,包括:.ctrl .alt .shift .meta
<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">
<!-- Alt + C -->
<input @keyup.alt.67="clear">