VUE課程參考 8 事件修飾符

vue中可以可以用事件修飾符來做我們事件操作中常用的阻止預設事件（event.preventdefault()）或者阻止事件冒泡（event.stoppropagation()）等事件操作

vue中常用的事件修飾符有.stop（阻止冒泡）、.prevent（阻止預設事件）、.capture（使用事件捕獲模式）、.self（事件只在本元素上觸發）、.once（事件只觸發一次）等

.stop       阻止冒泡

.prevent 阻止預設事件
.capture 新增事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發**
.once 事件只觸發一次
<
div 
class
="grandfather"
@click
="grandfatherclick"
>
grandfatherclick
<
div 
class
="father"
@click
="fatherclick"
>
fatherclick
<
button 
@click.stop
="btnclick"
>按鈕
button
>
div>
div>

.stop       阻止冒泡

.prevent 阻止預設事件
.capture 新增事件偵聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發**
.once 事件只觸發一次

2、可以只有修飾符，比如：讀書程式設計筆記

直接在事件後面接事件修飾符，比如.prevent阻止預設事件：@click.prevent="preventlink"：讀書程式設計筆記

<

a href
=""@click.prevent
="preventlink"
>讀書程式設計筆記
a>

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>8、事件修飾符
VUE課程 12 事件修飾符
vue中可以可以用事件修飾符來做我們事件操作中常用的阻止預設事件 event.preventdefault 或者阻止事件冒泡 event.stoppropagation 等事件操作 vue中常用的事件修飾符有.stop 阻止冒泡 prevent 阻止預設事件 capture 使用事件捕獲模式 sel...
vue修飾符與事件修飾符
前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...
vue 事件修飾符
事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是 methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。為了解決這個問題，vue.js...