Vue.js - Event Handling

Vue.js 在事件處理上,主要是透過 v-on 去監聽事件,事件觸發後可以指定對應的動作。


像是點擊後用運算式處理對應的動作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="click += 1">Click</button>
<p>{{click}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
click: 0
}
})
</script>
</body>
</html>



或是調用對應的方法處理。

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
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="onClick">Click</button>
<p>{{click}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(event){
this.click += 1
}
}
})
</script>
</body>
</html>


若有需要,在方法調用時也可以附帶參數進去調用。

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
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="onClick(2)">Click</button>
<p>{{click}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(value){
this.click += value
}
}
})
</script>
</body>
</html>



需要 DOM event 做些處理的話,也可以透過 $event 將 DOM event 傳入對應的方法內使用。

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
<!DOCTYPE html>
<html>
<head>
<title>Vue - Hello World</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="onClick(2, $event)">Click</button>
<p>{{click}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
click: 0
},
methods: {
onClick: function(value, event){
if (event) event.preventDefault()
this.click += value
}
}
})
</script>
</body>
</html>