修飾符(Modifiers)
事件修飾符
| 修飾符 |
說明 |
如同 |
| 無使用 |
先觸發自己，再觸發外層 |
|
| .capture |
先觸發外層，再觸發自己 |
|
| .stop |
只觸發自己 |
event.stopPropagation() |
| .self |
只觸發自己 |
|
| .once |
只觸發一次 |
|
| .prevent |
取消預設事件 |
event.preventDefault() |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
// <-----html----->
ul#app
//** 無使用 **//
li(@click="alert('外層')")
a(href="#" @click="alert('內層')") 連結
//** .capture **//
li(@click="alert('外層')") //(先觸發)
a(href="#" @click="alert('內層')") 連結 //點擊(再觸發)
//** .stop **//
li(@click="alert('外層')")
a(href="#" @click.stop="alert('內層')") 連結 //點擊(只觸發自己)
//** .self **//
li(@click.self="alert('外層')") //點擊(只觸發自己)
a(href="#" @click.self="alert('內層')") 連結 //點擊(只觸發自己)
//** .once **//
li(@click="alert('外層')")
a(href="#" @click.once="alert('內層')") 連結 //點擊(只觸發一次)
// <-----js----->
let app = new Vue({
el: "#app",
methods:{
alert: function(e){
alert("你觸發的是"+e);
}
}
});
|
按鍵修飾符
| 修飾符 |
|
|
|
|
|
|
|
|
|
| keycode |
.13 |
.9 |
.8 |
.27 |
.32 |
.38 |
.40 |
.37 |
.39 |
| 按鍵碼 |
.enter |
.tab |
.delete |
.esc |
.space |
.up |
.down |
.left |
.right |
| 系統鍵 |
.ctrl |
.alt |
.shift |
.meta |
|
|
|
|
|
.meta : 在window系統是:Win鍵(⊞) ; 在Mac系統上是command鍵(⌘)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// <-----html----->
#app
//按下enter觸發
input(type="text" @keyup.13="alert")
//按下空白鍵觸發
input(type="text" @keyup.space="alert")
//按下shift+enter觸發
input(type="text" @keyup.shift.enter="alert")
// <-----js----->
let app = new Vue({
el: "#app",
methods:{
alert: function(){
alert();
}
}
});
|
滑鼠修飾符
| 修飾符 |
說明 |
| .left |
點擊滑鼠左鍵觸發 |
| .right |
點擊滑鼠右鍵觸發 |
| .middle |
點擊滑鼠中鍵(滾輪)觸發 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// <-----html----->
#app
//點擊滑鼠左鍵觸發
a(href="#" @click.left="alert") 連結
//點擊滑鼠右鍵觸發
a(href="#" @click.right="alert") 連結
//點擊滑鼠中鍵(滾輪)觸發
a(href="#" @click.middle="alert") 連結
// <-----js----->
let app = new Vue({
el: "#app",
methods:{
alert: function(){
alert();
}
}
});
|
表單修飾符
| 修飾符 |
說明 |
| .lazy |
離開輸入框時，才會顯示綁定的文字 |
| .number |
能讓輸入框的數字轉換成Number型別 |
| .trim |
能讓輸入的文字與預設文字中間無空白 |
.meta : 在window是:Win鍵(⊞) ; 在Mac上是command鍵(⌘)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// <-----html----->
#app
//* .lazy *//
input(type="text" v-model.lazy="a")
p {{a}}
//* .number *//
input(type="text" v-model.Number="b")
p {{typeof b}} {{b}}
//* .trim *//
input(type="text" v-model.trim="c")
p {{c}}蘋果
// <-----js----->
let app = new Vue({
el: "#app",
data:{
a: "",
b: "",
c: ""
}
});
|
其他相關