可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
例子：实现点击按钮累加值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<!-- 使用v-on指令为button元素绑定click事件，当button被点击时+1 -->
<button v-on:click="counter +=1">数值：{{counter}}</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
counter:0, //counter属性默认为0
}
});
</script>
</html>
显示结果
事件处理方法
需要掌握：
1、函数的声明
2、调用自定义属性
3、函数中传递参数
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<!-- 使用v-on指令为button元素绑定click事件，当button被点击时触发greet函数 -->
<!-- 可为greet()函数传递一个实参 -->
<button v-on:click="greet('abc',$event)">Greet</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"value"
},
methods:{
// 声明函数时候定义一个str形参
greet:function(str,e){//声明函数与函数体
// alert('hi')
//alert(this.name);//调用name属性
// alert(str);//弹出传递的参数
console.log(e);
}
}
});
</script>
</html>
显示结果
事件修饰符
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
版权声明：本文为MrWangisgoodboy原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。