VUE基礎：事件處理
在前端小夥伴開發生涯中，經常要面對各種畫面表單、各種按鈕，針對表單和按鈕的處理都包含一個共通事件：點擊 (click)，前端最常見的場景：
- 表單提交
- 按鈕點擊
- 列表摺疊
9.1 事件監聽
在vue中可以用 v-on 指令監聽原生的DOM事件，並在觸發時運行一些 JavaScript代碼，在vue中換了一種寫法，更方便我們來控制數據。MVVM中強調的重點即數據驅動，那麼在vue中我們就是利用事件處理來驅動視圖已達到雙向綁定的目的。即使用事件去控制數據變化，再由數據的變化驅動着視圖的更新。
- 事件處理就是DOM事件，只不過在
vue中使用方式不同。 - 事件處理是控制數據變化的控制器，是連接視圖與數據的橋樑。
所有的vue事件處理方法和表達式都綁定在當前視圖的ViewModel，維護更加方便。使用v-on好處如下：
- 通過HTML模板便能輕鬆定位在JS代碼裏對應的方法
- 無須在JS裏手動綁定事件，
ViewModel代碼可以是非常純粹的邏輯，和DOM完全解耦，更易於測試 - 當ViewModel被銷燬時，其關聯的所有的事件處理器都會自動被刪除。
9.2 事件修飾符
在vue中，事件修飾符處理了許多DOM事件的細節，避免了我們手動去處理原生事件的邏輯，從而使我們專注於程序的內部邏輯處理。vue中事件修飾符主要有：
.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）.capture：與事件冒泡的方向相反，事件捕獲由外到內.self：只會觸發自己範圍內的事件，不包含子元素.once：只會觸發一次
9.3 按鍵修飾符
在項目開發的功能頁面中，經常會遇到如下需求：用戶輸入賬號密碼後點擊Enter鍵、篩選條件選擇後自動加載符合選中條件的數據等。在傳統的前端開發中，需要知道JavaScript中需要監聽的按鍵所對應的keyCode，然後通過判斷keyCode得知用戶是按下了哪個鍵，以便執行後續操作。而vue給我們提供了一種便利的監聽方式去監聽需要的按鍵事件。在監聽鍵盤事件時，vue爲最常用的按鍵提供了別名，這樣就減少了查找常見的按鍵所對應的keyCode的時間。
.enter：回車鍵.tab：製表鍵.delete：含delete和backspace鍵.esc：返回鍵.space: 空格鍵.up：向上鍵.down：向下鍵.left：向左鍵.right：向右鍵
9.4 實例代碼
eventvue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue事件處理</title>
</head>
<body>
<div id='app'>
<h2>Vue之綁定監聽</h2>
<button v-on:click="alertMsg">提示消息：默認事件形參（event），隱含屬性對象（隱含屬性對象: $event）</button>
<br>
<button v-on:click="alertMsgParam('大家好，我是黑白猿')">提示參數消息：大家好，我是黑白猿</button>
<br>
<button v-on:click="alertMsgParamAndEvent('大家好，我是黑白猿', $event)">提示參數消息：</button>
<hr>
<h2>Vue之事件修飾符</h2>
<a href="http://www.baidu.com" v-on:click.prevent="alertMsgLink">百度一下</a>
<hr>
<div style="width: 200px;height: 100px;background: red" v-on:click="alertMsgOut">
<div style="width: 100px;height: 50px;background: blue" v-on:click.stop="alertMsgIn"></div>
</div>
<h2>Vue之按鍵修飾符</h2>
<input type="text" v-on:keyup.13="alertMsgEnter">
<input type="text" v-on:keyup.enter="alertMsgEnter">
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : "#app",
data : {
},
methods :{
alertMsg(event){
alert(event.target.innerHTML);
},
alertMsgParam(message){
alert(message);
},
alertMsgParamAndEvent(message, event){
alert(event.target.textContent + message);
},
alertMsgLink(){
alert("點擊網頁鏈接")
},
alertMsgOut(){
alert("點擊外部框框");
},
alertMsgIn(){
alert("點擊內部框框")
},
alertMsgEnter(){
alert("您按了回車鍵")
}
}
})
</script>
</html>