<!-- 停止点击事件冒泡 -->
<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>
<!-- 只有在 event.target 是元素自身时,才触发处理函数。 -->
<!-- 也就是说,event.target 是子元素时,不触发处理函数 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为(滚动)将立即发生, -->
<!-- 而不是等待 `onScroll` 完成后才发生, -->
<!-- 以防在滚动事件的处理程序中含有 `event.preventDefault()` 调用 -->
<div v-on:scroll.passive="onScroll">...</div>
自定义按键修饰符别名
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
<!-- 只在 `keyCode` 是 13 时,调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- 和上面的示例相同 -->
<input v-on:keyup.enter="submit">
<!-- 也可用于简写语法 -->
<input @keyup.enter="submit">
<input @keyup.page-down="onPageDown">
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>
<!-- 如果 Alt 键或 Shift 键与 Ctrl 键同时按下,也会触发事件 -->
<button @click.ctrl="onClick">A</button>
<!-- 只在 Ctrl 按键按下,其他按键未按下时,触发事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 只在系统辅助按键按下时,触发事件 -->
<button @click.exact="onClick">A</button>
这些修饰符会限制处理函数,仅响应特定的鼠标按键触发的事件。
默认情况下,v-model 会在每次 input 事件触发之后,将数据同步至 input 元素中(除了上述提到的输入法组合文字时不会)。可以添加 lazy 修饰符,从而转为在触发 change 事件后同步:
<!-- 在触发 "change" 事件后同步,而不是在触发 "input" 事件后更新 -->
<input v-model.lazy="msg" >
如果想要将用户的输入,自动转换为 Number 类型(译注:如果转换结果为 NaN 则返回字符串类型的输入值),可以在 v-model 之后添加一个 number 修饰符,来处理输入值:
<input v-model.number="age" type="number">
如果想要将用户的输入,自动过滤掉首尾空格,可以在 v-model 之后添加一个 trim 修饰符,来处理输入值:
<input v-model.trim="msg">