Vue指令之事件修飾符

+ .stop 阻止冒泡

+ .prevent 阻止預設事件

+ .capture 新增事件偵聽器時使用事件捕獲模式

+ .self 只當事件在該元素本身（比如不是子元素）觸發時觸發**

+ .once 事件只觸發一次

<
div 
class
="box"
@click
="divhandler"
>
<
input 
type
="button"
value
="戳他"
@click
="btnhandler"
>
div>
<
script 
src="./lib/vue-2.4.0.js"
>
script
>
<
script
>
varvm
=new
vue(,
methods:,
btnhandler()
}});

<
div 
class
="box"
@click
="divhandler"
>
<
input 
type
="button"
value
="戳他"
@click
="btnhandler"
>
<
a href
=""@click.prevent
='linkhandler'
a>
div>
<
script 
src="./lib/vue-2.4.0.js"
>
script
>
<
script
>
varvm
=new
vue(,
methods:,
btnhandler(),
linkhandler()
}});

<
div 
class
="box"
@click.capture
="divhandler"
>
<
input 
type
="button"
value
="戳他"
@click
="btnhandler"
>
<
a href
=""@click
='linkhandler'
a>
div>
<
script 
src="./lib/vue-2.4.0.js"
>
script
>
<
script
>
varvm
=new
vue(,
methods:,
btnhandler(),
linkhandler()
}});
script
>

.self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止 冒泡的行為

<

div 
class
="outer"
@click
="div2handler"
>
<
div 
class
="inner"
@click.self
="div1handler"
>
<
input 
type
="button"
value
="戳他"
@click
="btnhandler"
>
div>
div>
<
script
>
//建立 vue 例項，得到 viewmodel
varvm 
=new
vue(,
methods: ,
btnhandler() ,
linkclick() ,
div2handler() 
}});
script
>

<

a href
=""@click.prevent.once
="linkclick"
a>
<
script
>
//建立 vue 例項，得到 viewmodel
varvm 
=new
vue(,
methods: ,
btnhandler() ,
linkclick() ,
div2handler() 
}});

vue十 vue基礎之事件修飾符和按鍵修飾符

一 事件修飾符 官網對事件修飾符說明 冒泡場景 當觸發li上的點選事件的時候，會一直往上找，找到ul的事件 解決方法 第一種方法 js處理方式，把事件傳給函式，在函式中阻止冒泡 第二種方法 vue提供的事件修飾符.stop 使用.prevent事件阻止預設行為，如跳轉或提交表單的場景，使用.self...

vue修飾符與事件修飾符

前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...

vue 事件修飾符

事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是 methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。為了解決這個問題，vue.js...