<!DOCTYPE html>
<html>
<head>
<title>事件处理</title>
<style type="text/css">
.div1,.div2{
padding: 100px
}
.div1{
background-color: red
}
.div2{
background-color: yellow
}
</style>>
</head>
<body>
<div id="app">
<!-- v-on用来绑定事件 -->
<!-- 三要素
事件源
事件
处理函数 -->
<!-- ------------------------------------------------------------------------------------------ -->
{{gread}}
<input type="button" v-on:click="test" value="点我">
<!-- click绑定一个函数 -->
<!-- ---------------------------------------------------------------------------------------------->
{{gread}}
<input type="button" v-on:click="gread+=1" value="点我">
<!-- click绑定一个表达式 -->
<!-- ---------------------------------------------------------------------------------------------->
{{gread}}
<input type="button" v-on:click="click(gread)" value="点我">
<!-- click绑定一个函数，传递一个属性给函数做为参数 -->
<!-- ---------------------------------------------------------------------------------------------->
{{gread}}
<input type="button" v-on:click="click(‘hello vue‘)" value="点我">
<!-- click绑定一个函数，传递一个字符串给函数作为参数 -->
<!-- ---------------------------------------------------------------------------------------------->
<input type="button" v-on:click="testObj" value="点我">
<!-- ---------------------------------------------------------------------------------------------->
<!-- 事件修饰符 -->
<!-- .stop
.prevent
.capture
.self
.once -->
<div class="div1" v-on:click="div1">
<div class="div2" v-on:click.stop="div2"></div>
</div>
<!-- .stop阻止默认行为的演示 -->
<form v-on:submit.prevent="tijiao">
<input type="submit" value="提交">
</form>
<!-- .prevent阻止默认行为的演示，这个默认行为就是刷新 -->
<!-- 事件修饰符可以串联 -->
<form v-on:submit.prevent>
<input type="submit" value="提交">
</form>
<!-- 还可以只有修饰符，没有函数 -->
<div class="div1" v-on:click.capture="div1">
<div class="div2" v-on:click.capture="div2"></div>
</div>
<!-- capture捕获的演示，先执行父节点的绑定事件，在执行自己的绑定事件，默认是先执行自己的绑定的事件，后执行父节点绑定的事件 -->
<div class="div1" v-on:click.self="div1">
<div class="div2"></div>
</div>
<!-- self。只给自己绑定事件，对子元素不会绑定事件，如果没有self修饰符，则点击子元素也会触发div1这个函数 -->
<div class="div1" v-on:click.once="div1">
<div class="div2"></div>
</div>
<!-- once修饰符，意思是这个事件只执行一次 -->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
seen:false,
gread:90,
logintype:"username",
items:[
{text:"chifan",isok:false},
{text:"kandianshi",isok:true},
{text:"xuepython",isok:true},
{text:"xueshell",isok:true},
],
pipi:{
firstname:"haoran",
lastname:"cui",
age:"2"
},
numbers:[1,2,3,4,5,6,7,8,9,10]
},
methods:{
test:function(){
alert(123)
},
click:function(mes){
alert(mes)
},
testObj:function(event){
console.log(event.target)
// event这个参数是自带的，我们这里查看这个事件的事件源
console.log(event.type)
// type是这个事件的类型，这里是click类型
// 如果这里要传递我们自己的参数，那么我们自己的参数要放在最前面，把event这个参数放在最后
},
div1:function(){
alert("outer")
},
div2:function(){
alert("inner")
},
tijiao:function(){
console.log(123)
}
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/bainianminguo/p/10591400.html