something var 修饰符 sub code 提交 not target his
在内联语句处理器中访问原生 DOM 事件
- <button v-on:click="warn(‘Form cannot be submitted yet.‘, $event)">
- Submit
- </button>
- methods: {
- warn: function (message, event) {
- if (event) event.preventDefault()
- alert(message)
- }
- }
事件修饰符
- <!-- 阻止单击事件冒泡 -->
- <a v-on:click.stop="doThis"></a>
- <!-- 提交事件不再重载页面 -->
- <form v-on:submit.prevent="onSubmit"></form>
- <!-- 添加事件侦听器时使用事件捕获模式 -->
- <div v-on:click.capture="doThis">...</div>
- <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
- <div v-on:click.self="doThat">...</div>
- <!-- 只调用一次,.once 修饰符还能被用到自定义的组件事件上 -->
- <div v-on:click.once="doThat">...</div>
- <!-- 修饰符可以串联 -->
- <a v-on:click.stop.prevent="doThat"></a>
- <!-- 只有修饰符 -->
- <form v-on:submit.prevent></form>
键值修饰符
- <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
- <input v-on:keyup.13="submit">
- 按键别名:
- <!-- 同上 -->
- <input v-on:keyup.enter="submit">
- <!-- 缩写语法 -->
- <input @keyup.enter="submit">
- 常用按键别名:
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
- 可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
- Vue.config.keyCodes.f1 = 112
修饰键
- 附加按键:
- .ctrl
- .alt
- .shift
- .meta
- <!-- Alt + C -->
- <input @keyup.alt.67="clear">
- <!-- Ctrl + Click -->
- <div @click.ctrl="doSomething">Do something</div>
鼠标按钮修饰键:
- .left
- .right
- .middle
在html中监听事件优点:解耦,无须清理
vue-6-事件处理
来源: http://www.bubuko.com/infodetail-2328998.html