事件监听：v-on
PS.v-on的简写语法是@
- 1、一般情况下，会使用一个方法来调用JavaScript方法，然后使用
v-on来接收这个定义的方法来调用
比如之前说过的例子：
<template>
<div>
<p>{{msg}}</p>
<!-- 监控click事件，有则触发reversemsg方法-->
<button v-on:click="reversemsg">字符串反转</button>
</div>
</template>
<script>
export default {
// 组件名字
name: "v-on",
// 数据
data(){
return {
msg:"我要被反转"
}
},
// 方法
methods:{
reversemsg() {
// 反转要去掉字符串以及加上字符串
this.msg = this.msg.split('').reverse().join('')
}
}
}
</script>
<style scoped>
</style>
- 2、也可以直接调用JavaScript语句
<template>
<div>
<!-- 缩写语法：@ -->
<button @click="say('hi')">hi</button>
<button v-on:click="say('vue')">vue</button>
</div>
</template>
<script>
export default {
name: "one",
methods:{
say(msg){
alert(msg)
}
}
}
</script>
<style scoped>
</style>
- 3、
v-on还提供了事件修饰符来处理DOM事件，可以通过.表示的指令后缀来调用这些修饰符
事件修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
keydown：键盘按下（后面可跟修饰符）
keyup：键盘弹起（后面可跟修饰符）
例子：（来源菜鸟教程）
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
-
v-on在监听键盘事件时，可添加按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为常用的按键进行了别名
<!-- 效果如上-->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
网友评论