修飾符: 作用用來和事件連用,用來決定事件觸發條件或者是阻止事件的觸發機制
1.事件修飾符
stop修飾符
用來阻止事件冒泡
事件冒泡
詳情:prevent 事件修飾符
用來阻止標籤的預設行為
self 事件修飾符
用來針對於當前標籤的事件觸發 **********=> 只觸發自己標籤的上特定動作的事件 只關心自己標籤上觸發的事件 不監聽事件冒泡
once 事件修飾符
once 一次 作用: 就是讓指定事件只觸發一次
<
!doctype html>
"en"
>
"utf-8"
>
01.vue中事件修飾符使用<
/title>
.aa<
/style>
<
/head>
>
<
!--只觸發標籤自身的事件--
>
="aa" @click.self=
"divclick"
>
<
!--用來阻止事件冒泡--
>
"button" value=
"按鈕" @click.stop=
"btnclick"
>
"button" value=
"按鈕1" @click=
"btnclick1"
>
<
/div>
.prevent : 用來阻止事件的預設行為
.once : 用來只執行一次特定的事件
-->
"" @click.prevent.once=
"aclick"
/a>
<
/div>
class
="aa"
>
<
!--事件冒泡--
>
"aconsole1"
>
"submit" value=
"aconsole2"
>
<
/div>
<
/div>
<
!--引入vue--
>
"">
<
/script>
newvue(,
methods:
,divclick()
,aclick()
,btnclick1()
}});
newvue(,
methods:
, aconsole2:
function()
}})<
/script>
<
/body>
<
/html>
.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up.down
.left
.right
如 enter 回車鍵
用來在觸發回車按鍵之後觸發的事件
<
!doctype html>
"en"
>
"utf-8"
>
02.按鍵修飾符<
/title>
<
/head>
>
enter 按鍵修飾符 在回車之後觸發的事件
-->
"text" v-model=
"msg" @keyup.enter=
"keyups"
>
"text" @keyup.left=
"keytabs"
>
<
/div>
<
!--引入vue--
>
"">
<
/script>
newvue(,
methods:
,keytabs()
}});
<
/script>
<
/body>
<
/html>
Vue 按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。vue 允許為v on在監聽鍵盤事件時新增按鍵修飾符 你可以直接將keyboardevent.key暴露的任意有效按鍵名轉換為 kebab case 來作為修飾符。在上述示例中，處理函式只會在 event.key等於pagedown時被呼叫。使用keyc...
vue修飾符與事件修飾符
前言 在乙個控制項中使用修飾符 可以對控制項或操作做出一定的改變或者約束 修飾符作用 lazy v model在input事件秀實況中轉變為在change事件中同步 number 將使用者舒服的值轉換為number型別 trim 自動過濾使用者輸入的首尾空格 stop 阻止冒泡 prevent 阻止...
vue 事件修飾符
事件修飾符 在事件處理程式中呼叫event.preventdefault 或event.stoppropagation 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是 methods 只有純粹的資料邏輯，而不是去處理 dom 事件細節。為了解決這個問題，vue.js...