Vue v-on:click和methods用法 ， 所有事件修饰符相关介绍案例使用 ， 键盘事件和按键别名详解
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue v-on:click和methods用法 ， 所有事件修饰符相关介绍案例使用 ， 键盘事件和按键别名详解 相关的知识，希望对你有一定的参考价值。
文章目录
1. Vue 事件处理
1.1 v-on:click 和 methods
v-on:click="xxx"作用就是当点击时，执行xxx函数。methods就是放置执行函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>你好，{{name}}。</h2>
<!-- v-on:click="xxx"作用就是当点击时，执行xxx函数。 -->
<button v-on:click='showInfo'>点击</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
data:{
name:'张三'
},
//methods就是放置执行函数。
methods:{
//对象里面配置方法，直接写方法名就行。
showInfo(event){
//参数event是事件对象，这里可以打印一下看看event一些属性
console.log(event);
console.log(event.target.innerText);
console.log(this);//这里的this指向的是vm对象。
}
}
});
vm.$mount("#root");
</script>
</body>
</html>
如果用箭头函数来显示methods内的函数的话，那么this指向的就是全局，见图如下：
当然，v-on:click也是有简写的就是@click符号。
<button @click='showInfo'>点击</button>
可以通过v-on:click = "xxx(参数1,参数2, …)"的方式来给methods中的xxx函数传递参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>你好，{{name}}。</h2>
<!-- 这里可以通过( )来传递参数 -->
<button @click='showInfo(888,$event)'>点击</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
data:{
name:'张三'
},
methods:{
showInfo(number,event){
console.log(number,event);
}
}
});
vm.$mount("#root");
</script>
</body>
</html>
此外，methods中的内容是没有做过数据代理的！！
注意事项：
1. 不要将所要调用的函数放到data中去执行，这相当于给函数做数据代理和数据劫持，给函数做数据代理和数据劫持正常情况下是没有意义的，反而拖累程序运行。
2.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
3.@click=“xxx” 和 @click="xxx($event)"是一样的，效果是一样的，不写参数默认的就是传event对象 ,但是后者可以传参数。
1.2 事件修饰符
1.2.1 事件修饰符
对于事件修饰符总共包括6个：(很重要)
1.2.2 prevent 阻止默认事件
如何阻止一个事件发生，通常我们可以使用preventDefault()可以阻止默认事件的一些行为，但是在Vue中有更好的方法就是@click.prevent 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>你好，{{name}}。</h2>
<a href="www.baidu.com" @click.prevent = "showInfo">我们去百度。</a>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"张三"
},
methods:{
showInfo(event){
console.log(event);
//我们可以使用preventDefault可以阻止当前跳转行为，但是在Vue中有更好的方法就是@click.prevent。
// event.preventDefault();
alert("我阻止你打开百度了。")
}
}
})
</script>
</body>
</html>
1.2.3 stop 阻止冒泡事件
首先，可以使用event.stopPropagation()方法来阻止冒泡。在Vue中，我们用@click.stop来阻止冒泡事件发生。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.b{
background-color: blue;
height: 50px;
width: 100%;
}
</style>
</head>
<body>
<div id="root">
<h2>{{name}}</h2>
<div class="b" @click = "showInfo">
<!-- 我们用@click.stop来阻止冒泡事件发生 -->
<button @click.stop = "showInfo">冒泡事件</button>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"冒泡事件"
},
methods:{
showInfo(event){
//可以使用event.stopPropagation()方法来阻止冒泡。
// event.stopPropagation();
alert("我出来了");
}
}
})
</script>
</body>
</html>
1.2.4 once 事件只触发一次
我们用@click.once来实现事件只触发一次，之后该按钮不管用了。
<div id="root">
<h2>{{name}}</h2>
<!-- 我们用@click.once来实现事件只触发一次，之后该按钮不管用了。 -->
<button @click.once = "showInfo">once事件</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"once事件"
},
methods:{
showInfo(event){
alert("我出来了");
}
}
})
</script>
1.2.5 capture 事件的捕获模式
对于这节内容，我们就要了解捕获阶段和冒泡阶段执行的一个过程。
<div id="root">
<div class="box1" @click = "showMsg(1)">
div1
<div class="box2" @click = "showMsg(2)">
div2
</div>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"事件"
},
methods:{
showInfo(event){
alert("我出来了");
},
showMsg(msg){
console.log(msg)
}
}
})
</script>
如果这个时候，使用capture就可以达到先调用div1，在调用div2的内容。
<div id="root">
<!-- 通过@click.capture来实现，先调用showMsg(1)。 -->
<div class="box1" @click.capture = "showMsg(1)">
div1
<div class="box2" @click = "showMsg(2)">
div2
</div>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"事件"
},
methods:{
showInfo(event){
alert("我出来了");
},
showMsg(msg){
console.log(msg)
}
}
})
</script>
1.2.6 self 只有event.target是当前操作的元素时，才触发事件
只有event.target是当前操作的元素时才触发事件 ,我们下面例子的self是div的，并不是button，在我们点击button时，div不会触动。
<div id="root">
<!-- 只有event.target是当前操作的元素时才触发事件 ,这里的self是div的，并不是button，在我们点击button时，div不会触动-->
<div class="demo1" @click.self = "showInfo">
<button @click = "showInfo">点我提示信息</button>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"事件"
},
methods:{
showInfo(event){
alert("我出来了");
console.log(event.target); //这里就是整个button元素和内容
},
showMsg(msg){
console.log(msg)
}
}
})
</script>
1.2.7 passive 事件的默认行为立即执行，无需等待事件回调执行完毕
@scroll 这是滚动条发生滚动。
@wheel 这个是鼠标的滚轮发生滚动。
一定记住scroll和wheel的区别。
一般处理滚动这方面，都是先处理伴随滚动的调用函数事件，函数执行完毕后，才再去执行默认行为(滚动条做动作)。
可以见证一下下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: scroll; /*可以解决溢出问题 */
}
li{
height: 100px;
}
</style>
</head>
<body>
<ul @wheel="demo" class="list" id="root">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"事件"
},
methods:{
demo(){
for(let i=0 ; i<100000;i++){
console.log("@");
}
console.log("执行结束");
}
}
});
</script>
</body>
</html>
见到上面这种情况，我们就可以使用passive来操作了。
<ul @wheel.passive="demo" class="list" id="root">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
再试试，就可以发现可以滚动了，并且函数也在运行，用passive就可以优先相应滚动条的滚动。
1.3 键盘事件
1.3.1 @keyup 和 @keydown
1. @keydown按键按下去，还没抬起来，事件就触发 。
2. @keyup按键按下去，抬手才触发事件。
下面的案例，就是实现在输入框内输入回车控制台显示输入内容。
细节：
1. event.keyCode记录着很多按键的编码，其中回车的编码是13。
2. event.target.value能获得输入的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到，{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
<!-- @keydown按下去，还没抬起来，事件就触发 ，@keyup按下去，抬手才触发事件。 -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
name:"贝克街"
},
methods:{
showInfo(event){
// console.log(event.keyCode); event.keyCode记录着很多按键的编码，其中回车的编码是13。
if(event.keyCode !== 13) return
console.log(event.target.value); //event.target.value能获得输入的值
}
}
})
</script>
</body>
</html>
在Vue中可使用@keyup.enter来提到event.keyCode的if判断语句，来解决回车问题。
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
1.3.2 Vue中常用的按键别名
Vue中常用的按键别名：
1. 回车 => enter
2. 删除 => delete (捕获" 删除Delete " 和 " 退格Backspace "键)
3. 退出 => Esc
4. 空格 => space
5. 换行 => tab(和@keydown绑定使用)
6. 向上 => up
7. 向下 => down
8. 向左 => left
9. 向右 => right
相应的，上面没有的键要如何设置呢？
当然，最先想到的就是event.keyCode的方式。但这里我们用event.key。
1. event.keyCode : 输出的是按键的编码。
2. event.key : 输出的是按键名，这里的按键名就是上面Vue别名的原型。
3. 综上所述，Vue没有提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为（短横线方式命名，就像下面的CapsLock一样）。
对于多个单词的按键，举个例子，如用CapsLock按键(切换大小写)，来实现：
<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
这里的CapsLock是两个单词连在一起的，就要分开和小写变成caps-lock。
除此之外，一些特有的按键是不可以拿来使用的。
注意：
上面这些tap键比较特殊，因为tap是切换光标。tap按键最好和@keydown来绑定。如下：
<input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">
1.3.3 系统修饰键 (用法特殊)
比较特殊的系统修饰符：
ctrl ，alt ， shift， meta(win键) 这四个按键。
四个按键的用法：
1. 配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发。
2. 配合keydown使用：正常触发事件。
一定注意和keyup的使用。
1.3.4 用keyCode去指定具体的按键(可以，但不推荐)
enter的keyCode为13，也可以写成下面的形式：
<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">
我们也可以设置keyCode对应的别名：
Vue.config.keyCodes.rename = 13
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到，{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.rename="showInfo">
</div>
<script>
Vue.config.productionTip = false;
Vue.config.keyCodes.rename = 13;
const vm = new Vue({
el:'#root',
data:{
name:"贝克街"
},
methods:{
showInfo(event){
console.log(event.target.value);
}
}
})
</script>
</body>
</html>
2. 事件总结
第一章内容有点多，没办法，看完就能学会这一节的内容，咬咬牙就能过去。
小技巧：
1. 每一个事件是可以重叠的。
但是，顺序不同，不一样，就像上面先阻止了跳转，再阻止了冒泡。2. 对于ctrl，比如我们向要用ctrl + y 这个按键来实现。可以定义为下面这样可以。
以上是关于Vue v-on:click和methods用法 ， 所有事件修饰符相关介绍案例使用 ， 键盘事件和按键别名详解 的主要内容，如果未能解决你的问题，请参考以下文章