Vue 事件的基本使用 事件修飾符

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>事件的基本使用
title
>
6<
script 
type
="text/j**ascript"
src="../js/vue.js"
>
script
>
7head
>
8<
body
>917
<
div 
id="root"
>
18<
h1>hello， }
h1>
19<
button 
v-on:click
="showinfo1"
>點我提示資訊(不傳參)
button
>
20<
button 
@click
="showinfo2($event,66)"
>點我提示資訊(傳參)
button
>
21div
>
22body
>
2324
<
script 
type
="text/j**ascript"
>
25vue.config.productiontip 
=false;//
阻止 vue 在啟動時生成生產提示。
2627
let vm 
=new
vue(,
32methods: ,
38showinfo2: 
function
(event, number) 42}
43})
44vm.$mount(
'#root') 
//el的第二種寫法
45script
>
46html
>

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>事件修飾符
title
>
6<
script 
type
="text/j**ascript"
src="../js/vue.js"
>
script
>
7<
style
>8*
11.demo2
15.demo4
19.demo4_1
23.list
29li
32style
>
33head
>
34<
body
>
3544
<
div 
id="root"
>
45<
h1>hello， }
h1>
4647
<
a href
=""@click.prevent
="showinfo1"
>點我提示資訊
a>
4849
<
div 
class
="demo2"
@click
="showinfo2"
>
5051
<
button 
@click.stop
="showinfo2"
>點我提示資訊
button
>
52div
>
5354
<
button 
@click.once
="showinfo2"
>點我提示資訊
button
>
5556
<
div 
class
="demo4"
@click.capture
="showinfo4(1)"
>
57div1
58<
div 
class
="demo4_1"
@click
="showinfo4(2)"
>
59div2
60div
>
61div
>
6263
64<
div 
class
="demo4"
@click.self
="showinfo4(1)"
>
65div1
66<
div 
class
="demo4_1"
@click
="showinfo4(2)"
>
67div2
68div
>
69div
>
7071
75<
ul @wheel.passive
="demo6"
class
="list"
>
76<
li>1
li>
77<
li>2
li>
78<
li>3
li>
79<
li>4
li>
80ul
>
81div
>
82body
>
8384
<
script 
type
="text/j**ascript"
>
85vue.config.productiontip 
=false;//
阻止 vue 在啟動時生成生產提示。
8687
let vm 
=new
vue(,
92methods: ,
97showinfo2(e) ,
101showinfo4(number),
106demo6(e)
113console.log(
'累壞了');
114}
115},
116117
})118
vm.$mount(
'#root') 
//el的第二種寫法
119script
>
120html
>

vue 事件修飾符

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

Vue事件修飾符

也可以只設定事件名和修飾符而不傳入偵聽器，而且可以將修飾符串聯起來使用。例如，下面這個例子會阻止單擊事件沿dom樹向下傳遞，但只在第一次觸發時有效 除了上述事件修飾符，還有一些按鍵修飾符。它們用在鍵盤事件上，只有在特定按鍵按下時才會觸發事件。看下面這個例子 上面這個例子中，if語句中的的 只有當ke...

vue修飾符與事件修飾符

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