事件處理——Vue.js
1. 事件監聽v-on
（1）簡單的邏輯互動可以寫在html標籤中：
比如：
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script>
注意：html中使用的是表示式，進行運算；同時Vue是響應式的，counter發生改變後，p標籤中的counter值響應的改變。
（2）複雜了邏輯互動，需要呼叫方法名稱：
<div id="example-2"> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 物件中定義方法 methods: { greet: function (event) { // `this` 在方法裡指向當前 Vue 例項 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接呼叫方法,在頁面重新整理的時候就會執行 example2.greet() // => 'Hello Vue.js!' </script>
注意：也可以直接呼叫方法，在頁面重新整理的時候會執行greet方法。
（3）除了繫結方法，也可以在html中直接呼叫執行方法：
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) </script>
注意：方法執行在html中，方法定義在物件methods中。
這種情況下，事件event如何傳入呢？特殊變數 $event
<button id="example-3" v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
<script>
new Vue({
el: '#example-3',
methods: {
warn: function (message, event) {
// 現在我們可以訪問原生事件物件
if (event) event.preventDefault()
alert(message)
}
}
})
</script>注意：html中的函式執行時，需要傳入引數：$event，這樣方法中才可以使用event事件。
2. 事件修飾符：修飾符是由點開頭的指令字尾來表示的。
.stop：阻止事件冒泡（event.stopPropagation（））.prevent：阻止預設事件（event.preventDefault）.capture：事件捕獲
例子：
html程式碼：
<div id="app">
<ul @click.capture="callback($event)">
<li @click.capture="callback($event)">One</li>
<ul @click.capture="callback($event)">
<li @click.capture="callback($event)">Two</li>
<ul @click.capture="callback($event)">
<li @click.capture="callback($event)">Three. Click Me!!!</li>
</ul>
</ul>
</ul>
</div>css程式碼：
* {
box-sizing: border-box;
margin: 0;
padding: 20px;
transition: background 800ms;
}
ul {
height: 100%;
list-style: none;
background: hsl(193, 66%, 85%);
}
li {
height: 100%;
background: hsl(193, 66%, 95%);
}
.highlight {
background: red;
}js程式碼：
var pause = 200;
new Vue({
el: "#app",
methods: {
callback(event) {
var ms = event.timeout = (event.timeout + pause) || 0;
var target = event.currentTarget;
console.log(target);
setTimeout(function () {
target.classList.add('highlight');
setTimeout(function () {
target.classList.remove('highlight');
}, pause);
}, ms);
}
}
})效果：不管點選哪個區域，都是由外開始觸發事件到點選區域結束觸發事件
程式碼解析：html結構中每一個標籤都有捕獲事件，每個事件都是callback，同時把$event傳入。callback方法：就是定時器裡面巢狀定時器，第一個定時器新增一個樣式，第二個定時器移除該樣式。
.self
不執行冒泡和捕獲事件，只有當事件源自己時，才執行該事件，但是他還會是傳遞冒泡和捕獲事件
<!--點選obj4的時候會分別顯示： obj4、 obj3、 obj1；
.self會監視事件是否是直接作用到obj2上，若不是，則冒泡跳過該元素，-->
<div id="content">
<div id="obj1" v-on:click="doc">
obj1
<div id="obj2" v-on:click.self="doc">
obj2
<!--只有點選obj2才可以出發其點選事件。-->
<div id="obj3" v-on:click="doc">
obj3
<div id="obj4" v-on:click="doc">
obj4
</div>
</div>
</div>
</div>
</div>注意：點選obj4的時候會分別顯示： obj4、 obj3、 obj1； .self會監視事件是否是直接作用到obj2上，若不是，則冒泡跳過該元素，只有點選obj2才可以出發其點選事件。點選obj2時，obj2執行完畢後，obj1執行。
.once只觸發一次，不論是事件源是自身的觸發，還是冒泡、捕獲的觸發，只能觸發一次.passive會告訴瀏覽器你不想阻止事件的預設行為。不要把.passive和.prevent一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告
比如：<a :href.passive="url">百度一下</a>
注意：此處不能寫地址連結：https://www.baidu.com/，而要寫變數名url。
還有一些修飾符有待補充。。。
3. 按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查常見的鍵值，Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符：
比如在鍵值是13時（Enter的keyCode為13），呼叫submit方法：
<input v-on:keyup.13="submit">比如：注意這裡keyup呼叫的是系統別名enter
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">Vue只為常用的按鍵提供了別名，全部的按鍵別名：
.enter （Enter鍵）.tab （Tab鍵）.delete(捕獲“刪除”和“退格”鍵).esc （Esc鍵）.space （空格）.up （向上箭頭）.down （向下箭頭）.left （向左箭頭）.right （向右箭頭）
注意：可以通過全域性 config.keyCodes 物件自定義按鍵修飾符的別名
在此之前先了解一個知識：js中的鍵盤事件（比如：keydown）物件上的keyCode屬性，該屬性值是number，每個鍵都有自己特定的number值，並且大寫的A和小寫的a都是一個鍵，所以值是一樣的，即不區分大小寫
window.onkeydown = function(e){
console.log(e.key + " : " + e.keyCode);
}結果：
Vue.config.keyCodes
注意：
Vue.config.keyCodes在全域性中定義使用，Vue.config.keyCodes是個物件，所以也可以Vue.config.keyCodes.a = 65直接定義屬性；
此處的a是鍵盤事件自定義的修飾符的別名，對應的是65的那個鍵，你也可以讓這個修飾符別名叫aaaa，而鍵值65觸發時，會觸發對應的事件
<div id="box">
<input type="text" @keyup.a="method1">{{counter}}
</div>
<script>
Vue.config.keyCodes = {
a: 65,
b: 66,
c: 67
}
new Vue({
el: "#box",
data: {
counter: 0
},
methods: {
method1() {
this.counter++
}
}
})
</script>問題：window上觸發鍵盤事件？？？
4. 系統修飾符
.ctrl.alt.shift.meta
注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 作業系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記為“META”。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”。
比如：
Alt + C：和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態，即Alt必須按下的時候，再按C鍵，觸發事件
<input @keyup.alt.67="clear">Ctrl + Click：就是按著Ctrl鍵+滑鼠左鍵點選 觸發doSomething事件
<div @click.ctrl="doSomething">Do something</div>Ctrl和shift一起按、Ctrl shift：
<input type="text" @keydown.ctrl.shift="counter = 0">注意：程式碼的寫法，這兩種情況的寫法：類似Ctrl+C、Ctrl+V的寫法；按著Ctrl滑鼠點選的寫法；Ctrl和shift一起按下；
注意：上述觸發事件的按鍵之外按了別的鍵，依然會觸發事件
比如：按著Ctrl去點選button會觸發onClick事件，但是除了按著Ctrl外，還按著Alt或者shift等其他按鍵，也會觸發onClick事件
<button @click.ctrl="onClick">A</button>這種情況可以用.exact修飾符解決。
.exact修飾符：控制由系統修飾符組合觸發的事件（2.5.0新增）
只有Ctrl+滑鼠左鍵點選，才會觸發onClick事件
<button @click.ctrl.exact="onClick">A</button>沒有任何系統修飾符被按下的情況下，點選事件才能觸發
<button @click.exact="onClick">A</button>5. 滑鼠按鍵修飾符：
.left.right.middle