VUE 事件修饰符以及按键码
之前写了一篇关于事件处理的文章，这篇的时间修饰符主要就是来修饰之前事件处理的事件名的，目的是为了扩展事件的功能。
事件修饰符
- .stop：阻止单击事件继续传播，event.stopPropagation()
- .prevent：阻止事件默认行为 event.preventDefault()
- .once：点击事件将只会触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
</head>
<body>
<div id="app">
<h3>事件处理函数 v-on 或者 @</h3>
<button v-on:click="say">Say {{msg}}</button>
<!-- $event 代表的是原生的DOM事件 -->
<button @click="warn('王佳伟',$event)">Warn</button>
<hr>
<h3>事件修饰符</h3>
<!-- 1. 防止单击事件继续传播 -->
<!-- 如果不加 .stop ，点击按钮之后，执行doThis函数，执行完后，todo函数也会被执行，也就是说，会先弹出doThis，然后弹出todo -->
<div @click="todo">
<button @click="doThis">单击事件会继续传播</button>
</div>
<br>
<div @click="todo">
<!-- .stop 的作用是阻止事件的传播，此时，只会弹出 doThis -->
<button @click.stop="doThis">单击事件会组织继续传播</button>
</div>
<br>
<!-- 2. 阻止时间默认行为 -->
<a href="https://www.cnblogs.com/wjw1014/" @click.prevent="doStop">我的博客园博客</a>
<br><br>
<!-- 3. 点击事件只会触发一次 -->
<button @click.once="doOnly">点击只会触发一次：{{num}}</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你好，王佳伟',
num: 0
},
// 定义事件处理函数
methods: {
say: function (event) {
// event 代表的是DOM的原生事件，vue会自动的而将它传入进来。
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++
}
},
})
</script>
</body>
</html>
按键修饰符
格式：
v-on:keyup.按键名 或者 @keyup.按键名
常用的按键名：
- .enter 回车键
- .tab Tab键
- .delete Delete键
- .esc ESC键
- space 空格键
- up 向上键
- down 向下键
- left 向左键
- right 向右键
案例：
<input v-on:keyup.enter = "submit" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</title>
</head>
<body>
<div id="app">
<h3>事件处理函数 v-on 或者 @</h3>
<button v-on:click="say">Say {{msg}}</button>
<!-- $event 代表的是原生的DOM事件 -->
<button @click="warn('王佳伟',$event)">Warn</button>
<hr>
<h3>事件修饰符</h3>
<!-- 1. 防止单击事件继续传播 -->
<!-- 如果不加 .stop ，点击按钮之后，执行doThis函数，执行完后，todo函数也会被执行，也就是说，会先弹出doThis，然后弹出todo -->
<div @click="todo">
<button @click="doThis">单击事件会继续传播</button>
</div>
<br>
<div @click="todo">
<!-- .stop 的作用是阻止事件的传播，此时，只会弹出 doThis -->
<button @click.stop="doThis">单击事件会组织继续传播</button>
</div>
<br>
<!-- 2. 阻止时间默认行为 -->
<a href="https://www.cnblogs.com/wjw1014/" @click.prevent="doStop">我的博客园博客</a>
<br><br>
<!-- 3. 点击事件只会触发一次 -->
<button @click.once="doOnly">点击只会触发一次：{{num}}</button>
<hr>
<h3>按键修饰符或按键码</h3>
<!-- 按下回车键执行 -->
<input type="text" @keyup.enter="keyEnter"><br><br>
<!-- 按下空格键执行 -->
<input type="text" @keyup.space="keySpace"><br><br>
<!-- 其实还可以使用按键码，比如13也是回车，自己查 -->
<input type="text" @keyup.13="keyDown">
<!-- 按键码查询地址： https://www.bejson.com/othertools/keycodes/ -->
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你好，王佳伟',
num: 0
},
// 定义事件处理函数
methods: {
say: function (event) {
// event 代表的是DOM的原生事件，vue会自动的而将它传入进来。
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("当前按的是空格键！")
},
keyDown:function(){
alert("当前按键码是13！")
}
},
})
</script>
</body>
</html>
