事件修饰符
vue为v-on提供了事件修饰符,事件修饰符是以点为开头的指令后缀来表示的,如下
.stop
.prevent
.capture
.self
.once
.passive
示例:
<!-- 阻止单击事件继续传播 -->
<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 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键码
文本框按回车键调用函数。
<body>
<div id="app">
<input v-on:keyup.enter="ok"/>
<input v-on:keyup.13="ok"/>
</div>
<script type="text/javascript">
var app = new Vue({
"el":"#app",
methods:{
do
ok:function() {
console.log(this.value);
}
}
});
</script>
</body>
按键码别名
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
还可以通过全局config.keyCodes对象自定义按键修饰符别名
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112