事件修饰符
.stop
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>
.prevent
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>
.capture
<!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis"></div>
.self
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat"></div>
.once
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
.passive
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
.passive 和 .prevent 不要 一起使用
.prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="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 --> <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <div @click.ctrl="doSomething">Do something</div>
修饰符
-.exact
<!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
- .lazy
转变为使用 change 事件进行同步:
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
onchange 和 oninput 事件区别在于 前者在输入值后失去焦点触发,并且支持select,后者输入值实时触发,只支持文本
- .number
自动将用户的输入值转为数值类型,如果这个值无法被 parseFloat() 解析,则会返回原始的值。
- .trim
自动过滤用户输入的首尾空白字符
- .native
一个组件的根元素上直接监听一个原生事件。根元素不支持原生事件(比如label) 监听器将静默失败。它不会产生任何报错,但是 处理函数不会如你预期地被调用。
- .sync
prop 进行“双向绑定”。
原理:
//父 <text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> //子 this.$emit('update:title', newTitle)
.sync 修饰符的 v-bind 不能和表达式一起使用
v-bind:title.sync="doc.title +'!'" //无效
v-bind.sync="{ title: doc.title }"//无效
鼠标按钮修饰符
- .left
- .right
- .middle
使用 v-on 有几个好处:
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
- 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。