Vue还有个强大的功能就是事件监听机制。事件处理器的值可以是事件被触发时执行的内联 JavaScript 语句也可以是一个组件的属性名、或对某个方法的访问。
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
孤狼 | 
2022-07-29 01:48:40 | 
1103°C | 
0条评论 ]<button v-on:click="函数名"></button>
<button v-on:click="cn">改名</button>缩写，使用 "@" 代替 "v-on:"
<button @click="函数名"></button>
<button @click="cn">改名</button>如果函数无需传参，可以不用写 "()"
<button @click="cn2('王五')">改名</button>
如果需要传参却没有传则默认为 "undefined"
<button @click="cn3()">改名</button>
如果需要传参却没有传，且调用是没有加 "()" ，vue会自动传event事件对象到参数位。
<button @click="cn3">改名</button>
如果需要传参同时也需要接收event事件，可以使用 "$event"
<button @click="cn4('赵六',$event)">改名</button>
动态事件，通过变量来动态确定事件。
<button @[event2]="cn4('赵六',$event)">改名</button>
对象语法，不支持修饰符方式，不常用。
<button v-on="{mousedown:cn,mouseup:cn5}">点击执行cn,右键执行cn5</button>在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
.stop
.prevent
.capture
.self
.once
.passive
.left
.right
.middle
.{keyCode | keyAlias}.stop
阻止单击事件继续传播，只对触发的控件起作用。
<div @click="cn5">
<button @click.stop="cn51">stop</button>
</div>这个案例中，只能触发函数 cn51 而不会触发 cn5
.prevent
阻止默认行为，例如 submit 的提交事件。
<a href="http://www.baidu.com" @click.prevent="tzbd">baidu</a>链接不会跳转,而是执行tzbd函数
.capture
添加事件侦听器时使用事件捕获模式。即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。
<div @click.capture="cn5">
<button @click.stop="cn51">capture</button>
</div>即使内部元素阻止了事件传播，但也要先执行 cn5
.self
只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的。
<div @click.self="cn5">
此处留白
<button @click="cn51">capture</button>
</div>只有点击了div才会触发cn5，功能和stop类似，但作用对象不同
.once
只触发一次
<button @click.once="cn51">once</button>
.passive
以 {passive: true} 模式添加侦听器，将立即执行默认行为(与prevent相反)。passive主要用在移动端的scroll事件，来提高浏览器响应速度。设置以后会不会等待 touchstart 和touchmove 事件完成，这样不会造成卡顿。
<div @scroll.passive="cn51"><br><br>...<br><br></div>浏览器发生滚动时，将立刻滚动，而不是等待 cn51 处理完成
TIP： .passive 和 .prevent 不能同时使用，否则报错
.left
只有点击鼠标左键时触发。
<button @click.left="cn51">left</button>
.right
只有点击鼠标右键时触发。
<button @click.right="cn51">right</button>
.middle
只有点击鼠标中键时触发。
<button @click.middle="cn51">middle</button>
.{keyCode | keyAlias}
只有按特定的按键才触发回调。
<input @keyup.enter="cn">TIP：keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
vue提供了常用的按键码别名可供老浏览器使用
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right可以将多个修饰符串联起来使用
<a href="http://www.baidu.com" @click.prevent.once="tzbd">baidu</a>第一次点击会被拦截，第二次就不会拦截
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
.ctrl
.alt
.shift
.meta<input @keyup.ctrl.enter="cn">只有 ctrl 和 enter 同时按下(松开)才能触发
<!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>Vue 事件监听</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>{{name}}</div>
<button v-on:click="cn">改名</button>
<button @click="cn">改名</button>
<button @click="cn2('王五')">改名</button>
<button @click="cn3()">改名</button>
<button @click="cn3">改名</button>
<button @click="cn4('赵六',$event)">改名</button>
<button @[event2]="cn4('赵六',$event)">改名</button>
<div @click="cn5">
<button @click.stop="cn51">stop</button>
</div>
<a href="http://www.baidu.com" @click.prevent="tzbd">baidu</a>
<div @click.capture="cn5">
<button @click.stop="cn51">capture</button>
</div>
<div @click.self="cn5">
此处留白
<button @click="cn51">capture</button>
</div>
<button @click.once="cn51">once</button>
<div @scroll.passive="cn51"><br><br>...<br><br></div>
<button @click.left="cn51">left</button>
<button @click.right="cn51">right</button>
<button @click.middle="cn51">middle</button>
<input @keyup.enter="cn">
<a href="http://www.baidu.com" @click.prevent.once="tzbd">baidu</a>
<input @keyup.ctrl.enter="cn">
<button v-on="{mousedown:cn,mouseup:cn5}">点击执行cn,右键执行cn5</button>
</div>
<script>
let ndata={
name:'张三',
event2:'click'
};
const v=new Vue({
el:"#app",
data:ndata,
methods: {
cn(){
this.name='李四';
},
cn2(cname){
this.name=cname;
},
cn3(cname){
this.name=cname;
console.log(cname);
},
cn4(cname,event){
this.name=cname;
console.log(event);
},
cn5(){
console.log('点击了div');
},
cn51(){
console.log('点击了按钮');
},
tzbd(){
console.log('默认事件被拦截');
},
w(){
console.log('您按下了w键');
},
z(){
console.log('您按下了z键');
}
},
});
</script>
</body>
</html>
赞赏一个鸡腿
