首先最基本的点击事件 v-on:click 是可以使用@click代替 也就是说v-on可以缩写为@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="app2">
<div>一共点击了：{{clickNumber}}</div>
<button v-on:click="count">点击事件第一种</button>
<button @click="count">点击事件代码缩写</button>
</div>
<script>
var gareen={"name":"盖伦","hp":658};
new Vue({
el:'#app1',
data:{
message:gareen
}
})
</script>
<script>
new Vue({
el:'#app2',
data:{
clickNumber:0
},
methods:{
count:function(){
this.clickNumber++;
}
}
});
</script>
</body>
</html>
事件修饰符：
.stop 阻止冒泡
.prevent 阻止提交
.capture 优先触发
.self 只有自己能触发，子元素无法触发
.once 只能提交一次
点击事件中存在着冒泡，当点击发生在子元素上，它会不断地向父元素冒泡，直到document
<style>
*{margin: 0 auto; text-align: center; line-height: 24px;}
div{ cursor: pointer; width: 200px;}
#grandFather{
background: red;
}
#Father{
background: orange;
}
#Me{
background: yellow;
}
#Son{
background: green;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
祖父
<div id="Father" @click="doc">
父亲
<div id="Me" v-on:click.stop="doc">
我<div id="Son" @click="doc">儿子</div>
</div>
</div>
</div>
</div>
<script>
var content=new Vue({
el:'#content',
data:{
id:''
},
methods:{
doc:function(){
this.id=event.currentTarget.id;
alert(this.id)
}
}
});
</script>但是当我使用.stop修饰符的时候。冒泡会在使用了该修饰符的地方停止，比如上例的我 <div id="Me" v-on:click.stop="doc">
优先触发 .capture 在Father上增加一个.capture
<div id="Father" v-on:click.capture="doc">
那么当冒泡发生的时候，就会优先让father捕捉事件。
点击son或者me的时候，都会优先触发它
只有超链和form这种会导致页面刷新的操作，.prevent 才有用。 普通的不导致页面刷新的按钮，加上这个没有任何变化。
<div id="Father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件，只有点击Father自己，才会导致事件发生。
<div id="Father" v-on:click.once="doc">
这样Father点击一次之后，就不会再监听到click了，但是有意思的是，grandFather还能监听到~
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
