事件处理方法
完整格式: v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”
缩写格式: @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意: @ 后面没有冒号
event :函数中的默认形参,代表原生 DOM 事件
当调用的函数,有多个参数传入时,需要使用原生DOM事件,则通过 $event 作为实参传入
作用:用于监听 DOM 事件
事件修饰符
.stop 阻止单击事件继续传播 event.stopPropagation()
.prevent 阻止事件默认行为 event.preventDefault()
.once 点击事件将只会触发一次
按键修饰符
格式: v-on:keyup.按键名 或 @keyup.按键名
常用按键名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>1. 事件处理方法 v-on 或 @</h3>
<button v-on:click="say">Say {{msg}}</button>
<!-- $event代表的是原生 的Dom事件 -->
<button @click="warn('hello', $event)">Warn</button>
<h3>2. 事件修饰符</h3>
<!-- 2.1 防止单击事件继续传播 -->
<div @click="todo">
<button @click="doThis">单击事件会继续传播</button>
</div>
<br>
<div @click="todo">
<!-- .stop作用:是阻止事件的传播 -->
<button @click.stop="doThis">阻止单击事件会继续传播</button>
</div>
<br>
<!-- 2.2 阻止事件的默认行为 -->
<a href="http://www.mengxuegu.com" @click.prevent="doStop">梦学谷官网</a>
<!-- 2.3 点击事件只会触发一次 -->
<button @click.once="doOnly">点击事件只会触发一次:{{num}}</button>
<br>
<h3>3. 按键修饰符或按键码</h3>
<input type="text" @keyup.enter="keyEnter">
<input type="text" @keyup.space="keySpace">
<input type="text" @keyup.13="keyCode">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello MXG!!',
num: 0
},
methods: { //定义事件处理函数
say: function (event) {
// event代表的是Dom原生事件, Vue.js它会自动 的将它传入进来,
alert(this.msg)
alert(event.target.innerHTML)
},
warn: function (name, event) {
//如果说函数有多个参数,而双需要使用原生事件,则需要使用 $event 作为 参数传入
alert(name + ',' + event.target.tagName)
},
doThis: function () {
alert('doThis....')
},
todo: function () {
alert('todo....')
},
doStop: function () {
alert('doStop...href默认行为已经被阻止')
},
doOnly: function () {
this.num ++
},
keyEnter: function () {
alert('当前按的是回车键')
},
keySpace: function() {
alert('当前按的是空格键')
},
keyCode: function () {
alert('按的是13')
}
},
})
</script>
</body>
</html>
ps:整理自梦学谷