事件是每個框架都繞不過去的話題，實現的方式各有千秋，而Vue中，我們使用v-on的指令來進行事件監聽。
1、使用v-on監聽事件。示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
.style{
color: red
}
</style>
<body>
<div id="app">
<button v-on:click="message+=1">click</button>
<p>被點擊了{{message}}次</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 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
- 27
- 28
- 29
- 30
2、正常情況下，事件應該寫在函數中，而我們需要在Vue這個對象的參數中配置methods屬性，裏面就是相應的一些方法，這個方法通過this能訪問數據。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
.style{
color: red
}
</style>
<body>
<div id="app">
<button v-on:click="clicks">click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 0
},
methods: {
clicks: function(){
alert("發生點擊事件了")
}
}
})
</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
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3、關於事件修飾符。
在Vue中，我們不得不牽扯一些dom相關的東西，比如阻止默認行爲，阻止事件冒泡等等，但是正常情況下，我們應該着手處理的是數據邏輯，而不是和dom相關的東西，儘管我們確實能在事件中處理。（這裏應該這麼理解，MVC思想中，和dom相關的處理儘可能的隔離出去，我們應該專注於數據和邏輯），這就是事件修飾符的存在意義。通過由點(.)表示的指令後綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以用如下修飾符開啓鼠標或鍵盤事件監聽，使在按鍵按下時發生響應。
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>- 1
- 2
- 3
- 4