v-on -- 綁定事件 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # v-on 綁定事件 ~~~ 1.可以用'v-on'指令監聽 DOM 事件 2.'v-on'中要處理的邏輯比較復雜，因此不支持直接在'v-on'中直接寫js代碼，但支持方法，內聯處理，和對象的形式(2.4.0+ 支持) 2.1.著重說明不支持在'v-on'中寫js代碼指的是: <button v-on:click="alert('a')">v-on按鈕</button> 如果這么寫必須是在vue實例對象的method中有定義alter方法才行，否則不支持js的alert使用。 3.'v-on' 的縮寫是@符號 ~~~ >[info] ## v-on -- 方法處理器和內聯處理器 ~~~ 1.兩者區別寫法上，帶不帶括號 2.兩者區別參數上，方法處理由于沒有括號不支持傳參但只帶event，內聯由于帶括號支持傳參，但必須$evnet 當參數傳入才有evet事件。 ~~~ >[danger] ##### 方法處理器 ~~~ 1.使用的時候不帶括號就是方法處理案例:<button v-on:click="doThis"></button> 2.下面案例是根據官方我自己延伸案例，很巧妙的配內聯函數法處理，實現的效果當點button時候觸發了evet事件，進入if判斷中，然后執，在這就可以更加明確的看出內聯和方法的區別，自帶evet事件和傳參區別行，完畢后接著執行下個alert 彈出框。 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <button v-on:click="doThis">v-on按鈕</button> </div> <script> var vm = new Vue({ el:"#app", methods:{ // es6 語法 doThis(){ if (event) { alert(event.target.tagName) } alert('我是方法處理器') } }, }) </script> </body> </html> ~~~ >[danger] ##### 內聯處理器 ~~~ 1.使用的時候帶括號:'<button v-on:click="doThat('hello', $event)"></button>' 2.帶括號的好處是可以傳參，但不自帶evet 事件，想使用event事件需要$event 參數傳入 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <button v-on:click="doThat('hello', $event)">v-on按鈕</button> </div> <script> var vm = new Vue({ el:"#app", methods:{ // es6 語法 doThat(parameter, event){ let msg = parameter + "內聯方法"; if (event) { alert(event.target.tagName) } alert(msg); } }, }) </script> </body> </html> ~~~ >[danger] ##### 參考文章 [在Vue.js中什么是內聯處理器？](https://segmentfault.com/q/1010000013088053) >[info] ## v-on -- 對象處理(2.4+) ~~~ 1.根據官方api介紹，在2.4.0+版本已經開始提供可以傳入對象的寫法，這種寫法的好處是什么，參考下面同一個功能實現，在這之前的寫法和現在的寫法。 2.之前寫法: <p @mouseover ="doTish" @mouseout ="doThat">對象形式</p> 3.現在寫法: <p v-on="{ mouseover: doTish, mouseout: doThat }">對象形式</p> ~~~ >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" > <p v-on="{ mouseover: doTish, mouseout: doThat }">對象形式</p> </div> <script> var vm = new Vue({ el:"#app", methods:{ doTish(){ event.target.style.color = "red"; }, doThat(){ event.target.style.color = "#0f0"; }, }, }) </script> </body> </html> ~~~ >[info] ## v-on:keyup -- 監聽按鍵觸發 ~~~ 1.有時候想根據鍵盤/鼠標上的按鍵觸發指定的功能這時候需要keyup 2.配合keyup 有兩種第一種直接使用按鍵別名，第二種使用定義按鍵序號位置 3.常見的按鍵別名: '.enter' '.tab' '.delete'(捕獲“刪除”和“退格”鍵) '.esc' '.space' '.up' '.down' '.left' '.right' 4.按鍵序號網址查詢:'http://www.cnblogs.com/wuhua1/p/6686237.html' 5如果想全局配置且使用別名的方式建議這種全局書寫配置: // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 6.組件按鍵使用：  <div @click.ctrl="doSomething">Do something</div> 7.規定組合按鍵順序('exact')：  <button @click.ctrl.exact="onCtrlClick">A</button> 8.當在事件不確定的時候可以利用event這個屬性去獲取當前觸發的事件進行判斷觸發邏輯 ~~~ >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" >  <p @click.ctrl.exact ="doTish">對象形式</p> </div> <script> var vm = new Vue({ el:"#app", methods:{ doTish(){ event.target.style.color = "red"; }, }, }) </script> </body> </html> ~~~ >[info] ## 事件修飾符 ~~~ 1.事件修飾符可以解決到點擊事件自身帶的一些事件效果 '.stop' -- 阻止事件冒泡 '.prevent' -- 阻止默認事件 '.capture' -- 添加事件偵聽器時使用事件捕獲模式 '.self' --只當事件在該元素本身（比如不是子元素）觸發時觸發回調 '.once' --事件只觸發一次 'native' -- 給組件綁定點擊事件 'https://blog.csdn.net/cofecode/article/details/78890001' ~~~ >[danger] ##### 阻止事件冒泡 -- stop ~~~ 1.多個元素嵌套,有層次關系,這些元素都注冊了相同的事件,如果里面的元素事件觸發了，外面的元素的該事件自動的觸發了，注意相同事件(都是點擊事件，中點擊叫做事件) 2.事件冒泡從里向外 3.阻止事件冒泡使用stop ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .inner{ width: 200px; height: 200px; background-color: darkseagreen; } </style> </head> <body> <div class="inner" id="app" @click="divClick"> <input type="button" value="點擊" @click.stop="inputClick"> </div> <script> var vm = new Vue({ el:'#app', // data 負責輸出理數據的 data:{ }, // methods 負責處理調用方法的 methods:{ divClick(){ console.log("最外層div") }, inputClick(){ console.log("最內層div") } } }) </script> </body> </html> ~~~ * 點擊按鈕效果: ~~~ 最內層div ~~~ ![](https://box.kancloud.cn/6a4b2a9f665f47bc20b1ab36d5e657d3_216x219.png) >[danger] ##### 實現捕獲觸發事件的機制 -- capture ~~~ 1.冒泡是從向外依次觸發，使用capture，就變成了從先顯示外面，在顯示里面 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .inner{ width: 200px; height: 200px; background-color: darkseagreen; } </style> </head> <body> <div class="inner" id="app" @click.capture="divClick"> <input type="button" value="點擊" @click="inputClick"> </div> <script> var vm = new Vue({ el:'#app', // data 負責輸出理數據的 data:{}, // methods 負責處理調用方法的 methods:{ divClick(){ console.log("最外層div") }, inputClick(){ console.log("最內層div") } } }) </script> </body> </html> ~~~ * 打印結果 ~~~ 最外層div 最內層div ~~~ >[danger] ##### 只會阻止自己身上冒泡行為 -- self ~~~ 1.只會阻止自己身上冒泡行為 ,當有多層嵌套的時候，只會阻止有self 冒泡行為 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .inner{ width: 200px; height: 200px; background-color: darkseagreen; } </style> </head> <body> <div id="app"> <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> </div> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { div1Handler() { console.log('這是觸發了 inner div 的點擊事件') }, btnHandler() { console.log('這是觸發了 btn 按鈕的點擊事件') }, div2Handler() { console.log('這是觸發了 outer div 的點擊事件') } } }); </script> </body> </html> ~~~ * 打印結果 ~~~ 這是觸發了 btn 按鈕的點擊事件這是觸發了 outer div 的點擊事件 ~~~ >[danger] ##### 阻止默認事件 -- prevent ~~~ 1.例如a標簽默認事件就是點擊跳轉頁面，為了阻止a標簽的默認事件觸發我們綁定的事件，可以使用prevent 2.圖片的默認事件禁止拖拽，如果想給圖片設置拖拽效果的話記得做阻止默認行為 ~~~ ~~~<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a> </div> <script> var vm = new Vue({ el:'#app', // data 負責輸出理數據的 data:{}, // methods 負責處理調用方法的 methods:{ linkClick:function () { alert(1) } } }) </script> </body> </html> ~~~ * 運行的效果 ~~~ 1.a標簽不會頁面跳轉，反而點擊后會彈出彈窗顯示1 ~~~ >[danger] ##### 只觸發一次默認行為 ~~~ 1.只觸一次規定的默認行為 2.下面的案例第二次點擊就會跳轉頁面 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a> </div> <script> var vm = new Vue({ el:'#app', // data 負責輸出理數據的 data:{}, // methods 負責處理調用方法的 methods:{ linkClick:function () { alert(1) } } }) </script> </body> </html> ~~~ >[info] ## 新增 >[danger] ##### 動態綁定key ~~~ 1.注意事項和動態的v-bind一致 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script> </head> <body> <div id="app">  <p @[event]="doThis">對象形式</p> </div> <script> // 想自己配置一個按鍵別名 Vue.config.keyCodes.f1 = 112 const vm = new Vue({ el: '#app', data: { event: 'click' }, methods: { doThis() { console.log('我是動態的') }, }, }) </script> </body> </html> ~~~ >[info] ## 多事件處理 ~~~html  <button @click="one($event), two($event)"> Submit </button> ~~~ * js部分 ~~~js // ... methods: { one(event) { // 第一個事件處理器邏輯... }, two(event) { // 第二個事件處理器邏輯... } } ~~~