Vue中v-on指令簡單事件綁定的屬性分析（附程式碼）
- 不言原創
- 2018-07-27 13:31:341883瀏覽
這篇文章跟大家介紹的文章內容是關於Vue中v-on指令簡單事件綁定的屬性分析（附程式碼），有很好的參考價值，希望可以幫助到有需要的朋友。
前言
上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法，本文介紹一下v-on綁定事件的一些屬性的使用方法。
v-on綁定指令屬性
.stop屬性
阻止點擊事件繼續往上傳播（簡單點說就是不讓父節點及父節點以上的節點事件觸發），本範例如果沒有stop屬性，父節點和爺爺節點事件將會觸發，並在控制台輸出內容，範例程式碼和範例結果如下：
1 <template>
2 <div>
3 <p class="title1">{{title}}</p>
4 <div class="div1">
5 <div v-on:click="clickme0">
6 {{ msg1}}
7 <div v-on:click="clickme">
8 {{msg2}}<br/>
9 <span v-on:click="clickthis">{{msg3}}</span>
10 </div>
11 </div>
12 </div>
13 </div>
14
15 </template>
16
17 <script>
18 export default {
19 name: 'v-on',
20 data() {
21 return {
22 msg1: '我是爷爷节点',
23 msg2: '我是父节点',
24 msg3: '测试click属性',
25 title: 'v-on指令学习'
26 }
27 },
28 methods:{
29 clickme0(){
30 console.log("我是爷爷节点");
31 },
32 clickme(){
33 console.log("我是父节点");
34 },
35 clickthis(){
36 console.log("不打印父节点事件内容！")
37 }
38 }
39 }
40 </script>
41
42 <style scoped>
43 .title1 {
44 text-align: left;
45 }
46 .div1{
47 float: left;
48 }
49 </style>
如果新增stop屬性，則不會觸發父節點和爺爺節點事件，不會在控制台輸出對應事件內容，範例程式碼和範例結果如下：
1 <template>
2 <div>
3 <p class="title1">{{title}}</p>
4 <div class="div1">
5 <div v-on:click="clickme0">
6 {{ msg1}}
7 <div v-on:click="clickme">
8 {{msg2}}<br/>
9 <span v-on:click.stop="clickthis">{{msg3}}</span>
10 </div>
11 </div>
12 </div>
13 </div>
14
15 </template>
16
17 <script>
18 export default {
19 name: 'v-on',
20 data() {
21 return {
22 msg1: '我是爷爷节点',
23 msg2: '我是父节点',
24 msg3: '测试click属性',
25 title: 'v-on指令学习'
26 }
27 },
28 methods:{
29 clickme0(){
30 console.log("我是爷爷节点");
31 },
32 clickme(){
33 console.log("我是父节点");
34 },
35 clickthis(){
36 console.log("不打印父节点事件内容！")
37 }
38 }
39 }
40 </script>
41
42 <style scoped>
43 .title1 {
44 text-align: left;
45 }
46 .div1{
47 float: left;
48 }
49 </style> 
.prevent屬性
該方法將通知Web 瀏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作），注意如果Event物件的cancelable 屬性是fasle，那麼就沒有預設動作，或無法阻止預設動作，無論哪種情況，呼叫該屬性都沒有作用。
簡單範例如下，在頁面from表單中82cd9559ae4c8ac46486487a78349926 如果type 屬性是"submit"
如果沒有指定prevent，點選事件自動觸發from表單action跳向指定的網站，範例程式碼和實例結果如下：
<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<form action="http://www.baidu.com" v-on:submit="clickme">
<button type="submit">{{msg}}</button>
</form>
<!--<a href="http://www.baidu.com" v-on:click.prevent="banclickme">点我去百度</a>-->
</div>
</div>
</template>
<script>
export default {
name: 'v-on',
data() {
return {
title: 'v-on指令学习',
msg: 'form表单默认点击打开百度'
}
},
methods:{
clickme(){
console.log("页面重新加载了");
}
// banclickme(){
// console.log("去不了百度吧")
// }
}
}
</script>
<style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>
#如果指定prevent，點擊事件則不會觸發from表單action跳向指定的網站，範例程式碼與實例結果如下：
<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1">
<form action="http://www.baidu.com" v-on:submit.prevent="clickme">
<button type="submit">{{msg}}</button>
</form>
<!--<a href="http://www.baidu.com" v-on:click.prevent="banclickme">点我去百度</a>-->
</div>
</div>
</template>
<script>
export default {
name: 'v-on',
data() {
return {
title: 'v-on指令学习',
msg: 'form表单默认点击打开百度'
}
},
methods:{
clickme(){
console.log("去不了百度吧");
}
// banclickme(){
// console.log("去不了百度吧")
// }
}
}
</script>
<style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>
.capture屬性
新增事件監聽器時使用事件擷取模式，即元素本身觸發的事件先在此處處理，然後才交由內部元素進行處理，當點擊最底層元素e388a4556c0f65e1904146cc1a846bee觸發事件時，先查找帶有監聽器的元素，按照節點優先權先觸發帶有該修飾符的元素，然後觸發自身事件，最後發生事件冒泡。
本範例中先觸發列印爺爺節點，然後觸發列印父節點，然後列印自身節點，最後觸發列印曾祖父節點，範例程式碼和結果如下：
<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1" v-on:click="click3">
{{msg3}}<br/>
<div class="div1" v-on:click.capture="click2">
{{msg2}}<br/>
<div class="div1" v-on:click.capture="click1">
{{msg1}}<br/>
<div v-on:click="click0">{{msg}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'v-on',
data() {
return {
title: 'v-on指令学习',
msg: '我是div内部子节点',
msg1: '我是div父节点',
msg2: '我是div爷爷节点',
msg3: '我是div曾祖父节点'
}
},
methods:{
click0(){
console.log("打印子节点");
},
click1(){
console.log("打印父节点");
},
click2(){
console.log("打印爷爷节点");
},
click3(){
console.log("打印曾祖父节点");
}
}
}
</script>
<style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>
.self屬性
只當在event.target是當前元素本身時觸發處理函數，即事件不是從內部元素觸發的。通俗點說只有點擊元素本身的時候觸發事件，當點擊父元素觸發事件或點擊子元素發生事件冒泡時並不觸發元素本身事件。
本範例點擊父節點或子節點時並不列印本身元素事件，範例程式碼與實例結果如下：
<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1" v-on:click="click3">
{{msg3}}<br/>
<div class="div1" v-on:click.self="click2">
{{msg2}}<br/>
<div class="div1" v-on:click="click1">
{{msg1}}<br/>
<div v-on:click="click0">{{msg}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'v-on',
data() {
return {
title: 'v-on指令学习',
msg: '我是div内部子节点',
msg1: '我是div父节点',
msg2: '我是div爷爷节点',
msg3: '我是div曾祖父节点'
}
},
methods:{
click0(){
console.log("打印子节点");
},
click1(){
console.log("打印父节点");
},
click2(){
console.log("打印爷爷节点");
},
click3(){
console.log("打印曾祖父节点");
}
}
}
</script>
<style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>
.once屬性
點擊事件只會觸發一次，通俗點說就是元素自身事件只能使用一次，第二次點擊元素時候並不觸發事件，但是不阻止事件冒泡。
本範例中第一次點擊時列印子節點和父節點，第二次點擊時並不列印子節點，仍然列印父節點及以上節點，範例程式碼與實力結果如下：
<template>
<div>
<p class="title1">{{title}}</p>
<div class="div1" v-on:click="click3">
{{msg3}}<br/>
<div class="div1" v-on:click="click2">
{{msg2}}<br/>
<div class="div1" v-on:click="click1">
{{msg1}}<br/>
<div v-on:click.once="click0">{{msg}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'v-on',
data() {
return {
title: 'v-on指令学习',
msg: '我是div内部子节点',
msg1: '我是div父节点',
msg2: '我是div爷爷节点',
msg3: '我是div曾祖父节点'
}
},
methods:{
click0(){
console.log("打印子节点");
},
click1(){
console.log("打印父节点");
},
click2(){
console.log("打印爷爷节点");
},
click3(){
console.log("打印曾祖父节点");
}
}
}
</script>
<style scoped>
.title1 {
text-align: left;
}
.div1{
float: left;
}
</style>
#.passive屬性
##捲動事件的預設行為(即滾動行為) 將會立即觸發,而不會等待onScroll完成,這其中包含event.preventDefault()的情況相關推薦：以上是Vue中v-on指令簡單事件綁定的屬性分析（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn