3.监听事件
(1)v-on监听事件
代码如下 :
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button v-on:click="count">点击</button> //在按钮上增加 click 监听,调用 count 方法。
</div>
<script>
new Vue({
el: '#div1',
data: { //在 js里为 Vue 对象的数据设置为 clickNumber
clickNumber:0
},
methods:{ //新建一个方法: count, 其作用是 clickNumber 自增1
count: function(){
this.clickNumber++;
}
}
})
</script>
注:v-on可缩写为@,v-on:click="count"替换为:@click="count"。
效果图:
(2)事件修饰符
vue.js的事件修饰符有:.stop, .prevent, .capture, .self, .once;
事件修饰符 里面有几个都是关于冒泡的,那么什么是冒泡呢? 简单的说就是 父元素里有 子元素, 如果点击了 子元素, 那么click 事件不仅会发生在子元素上,也会发生在其父元素上,依次不停地向父元素冒泡,直到document元素。但是点击父元素并不会触发子元素事件。
冒泡事件
代码如下:
<style>
.div1,.div2,.div3,.div4{
height: 400px;
width:400px;
/*line-height: 40px;*/
}
.div1{
background-color: red;
}
.div2{
background-color:aqua ;
}
.div3{
background-color: brown;
}
.div4{
background-color: bisque;
}
</style>
<body>
<div class="div">
<div class="div1" @click="doc">
1
<div class="div2" @click="doc">
2
<div class="div3" @click="doc">
3
<div class="div4" @click="doc">4</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var content = new Vue({
el: ".div",
data: {
id: ''
},
methods: {
doc: function () {
this.className= event.currentTarget.className;
alert(this.className);
}
}
})
</script>
效果图:
点击div4,则依次弹出提示框div4,div3,div2,div1,子元素点击事件会触发父元素的点击事件;
事件修饰符 阻止冒泡 .stop
在v-on:click后添加.stop,即v-on:click.stop="doc"或 @click.stop="doc",例如div3上添加.stop,点击div4时,会触发div4和div3事件。
<div class="div">
<div class="div1" @click="doc">
1
<div class="div2" @click="doc">
2
<div class="div3" @click.stop="doc">
3
<div class="div4" @click="doc">4</div>
</div>
</div>
</div>
</div>
事件修饰符 优先触发 .capture
在div2 上增加一个.capture,<div class="div2" v-on:click.capture="doc">,那么当冒泡发生的时候,就会优先让div2捕捉事件。
点击div3或者div4的时候,都会优先触发它。
事件修饰符 只有自己能触发,子元素无法触发.self
修改div2,增加 .self,<div class="div2" v-on:click.self="doc">,这样点击div3和div4都不会导致其触发click事件,只有点击div2,才会导致事件发生。
事件修饰符 只能提交一次 .once
修改div2,增加 .once,<div class="div2" v-on:click.once="doc">,div2点击一次之后,就不会再监听到click了,但是div1还能监听到。
事件修饰符 阻止提交 .prevent
通过在 click 后面添加 .prevent 可以阻止页面刷新,@click.prevent="jump";也可以直接用@click.prevent后面不跟函数, @click.prevent。
注: 只有超链和form这种会导致页面刷新的操作,.prevent 才有用。 普通的不导致页面刷新的按钮,加上这个没有任何变化。
代码:
<body>
<a href="http://baidu.com" @click="jump">正常的链接 http://baidu.com</a>
<br>
<a href="http://baidu.com" @click.prevent="jump">prevent jump()之后的链接 http://baidu.com</a>
<br>
<a href="http://baidu.com" @click.prevent>纯prevent之后的链接 http://baidu.com</a>
<br>
<br>
<form @submit="jump" action="http://baidu.com">
<button type="submit">正常的form</button>
</form>
<form @submit.prevent="jump" action="http://baidu.com">
<button type="submit">prevent jump()之后的form</button>
</form>
<form @submit.prevent action="http://baidu.com">
<button type="submit">纯prevent之后的form</button>
</form>
<script>
new Vue({
el: '#div1',
data: {},
methods: {
jump: function() {
alert("调用jump()函数");
}
}
})
</script>
</body>
效果图: