一塊兒學Vue之事件處理
在Vue進行前端開發中，事件監聽是必不可少的功能，本文經過簡單的小例子，簡述v-on的簡單用法，僅供學習分享使用，若有不足之處，還請指正。javascript
監聽事件
能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。以下所示：html
1 <button v-on:click="counter += 1">Add 1</button> 2 <p>按鈕被點擊了 {{ counter }} 次.</p>
其中counter爲Vue自定義的一個屬性值。前端
事件處理方法
事實上，許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱。以下所示：vue
1 <button v-on:click="greet">Greet</button>
greet 是在下面定義的方法名。以下所示：java
1 <script type="text/javascript"> 2 var app=new Vue({ 3 el:'#app', 4 data:{ 5 msg:'hello world!!!', 6 counter:0, 7 name: 'Vue.js' 8 }, 9 // 在 `methods` 對象中定義方法 10 methods:{ 11 greet: function (event) { 12 // `this` 在方法裏指向當前 Vue 實例 13 alert('Hello ' + this.name + '!') 14 // `event` 是原生 DOM 事件 15 if (event) { 16 alert(event.target.tagName) 17 } 18 }, 19 20 } 21 }); 22 </script>
內聯處理器中的方法
除了直接綁定到一個方法，也能夠在內聯 JavaScript 語句中調用方法，以下所示：npm
1 <button v-on:click="say('hi')">Say hi</button> 2 <button v-on:click="say('what')">Say what</button>
有時也須要在內聯語句處理器中訪問原始的 DOM 事件。能夠用特殊變量 $event 把它傳入方法：瀏覽器
1 <button v-on:click="warn('表單不能被提交.', $event)">提交</button>
其中say，warn均爲自定義方法，以下所示：app
1 say: function (message) { 2 alert(message); 3 }, 4 warn: function (message, event) { 5 // 如今咱們能夠訪問原生事件對象 6 if (event) { 7 event.preventDefault(); 8 } 9 alert(message); 10 }
事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。事件修飾符共如下幾種：ide
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
1 <!-- 阻止單擊事件繼續傳播 --> 2 <a v-on:click.stop="doThis">點擊666</a> 3 <!-- 提交事件再也不重載頁面 --> 4 <form v-on:submit.prevent="onSubmit"> 5 <div>阻止提交</div> 6 </form> 7 <!-- 修飾符能夠串聯 --> 8 <a v-on:click.stop.prevent="doThat"></a> 9 <!-- 只有修飾符 --> 10 <form v-on:submit.prevent> 11 <div id="d">只有修飾符</div> 12 </form> 13 <!-- 添加事件監聽器時使用事件捕獲模式 --> 14 <!-- 即內部元素觸發的事件先在此處理，而後才交由內部元素進行處理 --> 15 <div v-on:click.capture="doThis">doThis...</div> 16 <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> 17 <!-- 即事件不是從內部元素觸發的 --> 18 <div v-on:click.self="doThat">doThat...</div>
使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。函數
新增屬性
不像其它只能對原生的 DOM 事件起做用的修飾符，.once 修飾符還能被用到自定義的組件事件上。
1 <!-- 點擊事件將只會觸發一次 --> 2 <a v-on:click.once="doThis">點我一次666</a>
Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。
1 <!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 --> 2 <!-- 而不會等待 `onScroll` 完成 --> 3 <!-- 這其中包含 `event.preventDefault()` 的狀況 --> 4 <div v-on:scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤爲可以提高移動端的性能。不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。
按鍵修飾符
在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
1 <!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` ,點擊時不調用 --> 2 <input v-on:keyup.enter="submit" type="text" value="點我777" /> 3 <!-- 能夠直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換爲 kebab-case 來做爲修飾符。--> 4 <input v-on:keyup.page-down="onPageDown" type="text" value="點我888" /> 5 <!-- 在上述示例中，處理函數只會在 $event.key 等於 PageDown 時被調用。且光標在時才管用。 -->
系統修飾符
能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操做系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其餘特定鍵盤上，尤爲在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，好比 Knight 鍵盤、space-cadet 鍵盤，meta 被標記爲「META」。在 Symbolics 鍵盤上，meta 被標記爲「META」或者「Meta」。
1 <!-- Alt + C --> 2 <input @keyup.alt.67="clear"> 3 4 <!-- Ctrl + Click --> 5 <div @click.ctrl="doSomething">Do something</div>
請注意：修飾鍵與常規按鍵不一樣，在和 keyup 事件一塊兒用時，事件觸發時修飾鍵必須處於按下狀態。換句話說，只有在按住 ctrl 的狀況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。若是你想要這樣的行爲，請爲 ctrl 換用 keyCode：keyup.17。
.exact 修飾符
.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。
1 <!-- 即便 Alt 或 Shift 被一同按下時也會觸發 --> 2 <button @click.ctrl="onClick">A</button> 3 <!-- 有且只有 Ctrl 被按下的時候才觸發 --> 4 <button @click.ctrl.exact="onCtrlClick">A</button> 5 <!-- 沒有任何系統修飾符被按下的時候才觸發 --> 6 <button @click.exact="onClick">A</button>
鼠標按鈕修飾符
這些修飾符會限制處理函數僅響應特定的鼠標按鈕，以下所示：
- .left
- .right
- .middle
爲何在 HTML 中監聽事件?
你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：
- 掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
- 由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。
- 當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何清理它們。
本例中所有代碼以下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>事件處理</title> 6 <!-- 開發環境版本，包含了有幫助的命令行警告 --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <h2>監聽事件</h2> 12 <!-- 13 能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。 14 --> 15 <button v-on:click="counter += 1">Add 1</button> 16 <p>按鈕被點擊了 {{ counter }} 次.</p> 17 <h2>事件處理方法</h2> 18 <!-- 19 然而許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。 20 所以 v-on 還能夠接收一個須要調用的方法名稱。 21 --> 22 <!-- `greet` 是在下面定義的方法名 --> 23 <button v-on:click="greet">Greet</button> 24 <!-- 25 // 也能夠用 JavaScript 直接調用方法 26 //app.greet() // => 'Hello Vue.js!' 27 --> 28 <h2>內聯處理器中的方法</h2> 29 <!-- 30 除了直接綁定到一個方法，也能夠在內聯 JavaScript 語句中調用方法： 31 --> 32 <button v-on:click="say('hi')">Say hi</button> 33 <button v-on:click="say('what')">Say what</button> 34 <!-- 35 有時也須要在內聯語句處理器中訪問原始的 DOM 事件。能夠用特殊變量 $event 把它傳入方法： 36 --> 37 <br> 38 <button v-on:click="warn('表單不能被提交.', $event)">提交</button> 39 <h2>事件修飾符</h2> 40 <!-- 41 在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。 42 儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。 43 爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。 44 .stop 45 •.prevent 46 •.capture 47 •.self 48 •.once 49 •.passive 50 --> 51 <!-- 阻止單擊事件繼續傳播 --> 52 <a v-on:click.stop="doThis">點擊666</a> 53 <br> 54 <!-- 提交事件再也不重載頁面 --> 55 <form v-on:submit.prevent="onSubmit"> 56 <div> 57 阻止提交 58 </div> 59 </form> 60 <br> 61 <!-- 修飾符能夠串聯 --> 62 <a v-on:click.stop.prevent="doThat"></a> 63 <br> 64 <!-- 只有修飾符 --> 65 <form v-on:submit.prevent> 66 <div id="d"> 67 只有修飾符 68 </div> 69 </form> 70 <br> 71 <!-- 添加事件監聽器時使用事件捕獲模式 --> 72 <!-- 即內部元素觸發的事件先在此處理，而後才交由內部元素進行處理 --> 73 <div v-on:click.capture="doThis">doThis...</div> 74 <br> 75 <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> 76 <!-- 即事件不是從內部元素觸發的 --> 77 <div v-on:click.self="doThat">doThat...</div> 78 <!-- 79 使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。 80 所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。 81 --> 82 <h2>新增</h2> 83 <!-- 點擊事件將只會觸發一次 --> 84 <a v-on:click.once="doThis">點我一次666</a> 85 <!-- 86 不像其它只能對原生的 DOM 事件起做用的修飾符，.once 修飾符還能被用到自定義的組件事件上。 87 --> 88 <!-- 89 Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。 90 --> 91 <!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 --> 92 <!-- 而不會等待 `onScroll` 完成 --> 93 <!-- 這其中包含 `event.preventDefault()` 的狀況 --> 94 <div v-on:scroll.passive="onScroll">...</div> 95 <!-- 96 這個 .passive 修飾符尤爲可以提高移動端的性能。 97 !不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。 98 請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。 99 --> 100 <h2>按鍵修飾符</h2> 101 <!-- 102 在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符： 103 --> 104 <!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` ,點擊時不調用 --> 105 <input v-on:keyup.enter="submit" type="text" value="點我777" /> 106 <!-- 107 能夠直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換爲 kebab-case 來做爲修飾符。 108 --> 109 <input v-on:keyup.page-down="onPageDown" type="text" value="點我888" /> 110 <!-- 111 在上述示例中，處理函數只會在 $event.key 等於 PageDown 時被調用。且光標在時才管用。 112 --> 113 <h2>#按鍵碼</h2> 114 <!-- 115 keyCode 的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持。 使用 keyCode attribute 也是容許的： 116 --> 117 <input v-on:keyup.13="submit" type="button" value="key up 13"> 118 <!-- 119 爲了在必要的狀況下支持舊瀏覽器，Vue 提供了絕大多數經常使用的按鍵碼的別名： 120 .enter 121 •.tab 122 •.delete (捕獲「刪除」和「退格」鍵) 123 •.esc 124 •.space 125 •.up 126 •.down 127 •.left 128 •.right 129 !有一些按鍵 (.esc 以及全部的方向鍵) 在 IE9 中有不一樣的 key 值, 若是你想支持 IE9，這些內置的別名應該是首選。 130 你還能夠經過全局 config.keyCodes 對象自定義按鍵修飾符別名： 131 // 可使用 `v-on:keyup.f1` 132 Vue.config.keyCodes.f1 = 112 133 --> 134 <h2>系統修飾鍵</h2> 135 <!-- 136 能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。 137 .ctrl 138 •.alt 139 •.shift 140 •.meta 141 注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。 142 在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操做系統鍵盤上，meta 對應實心寶石鍵 (◆)。 143 在其餘特定鍵盤上，尤爲在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，好比 Knight 鍵盤、space-cadet 鍵盤，meta 被標記爲「META」。 144 在 Symbolics 鍵盤上，meta 被標記爲「META」或者「Meta」。 145 --> 146 <!-- Alt + C --> 147 <input @keyup.alt.67="clear"> 148 149 <!-- Ctrl + Click --> 150 <div @click.ctrl="doSomething">Do something</div> 151 <!-- 152 !請注意修飾鍵與常規按鍵不一樣，在和 keyup 事件一塊兒用時，事件觸發時修飾鍵必須處於按下狀態。 153 換句話說，只有在按住 ctrl 的狀況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。 154 若是你想要這樣的行爲，請爲 ctrl 換用 keyCode：keyup.17。 155 --> 156 <h2>#.exact 修飾符</h2> 157 <!-- 158 .exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。 159 --> 160 <!-- 即便 Alt 或 Shift 被一同按下時也會觸發 --> 161 <button @click.ctrl="onClick">A</button> 162 163 <!-- 有且只有 Ctrl 被按下的時候才觸發 --> 164 <button @click.ctrl.exact="onCtrlClick">A</button> 165 166 <!-- 沒有任何系統修飾符被按下的時候才觸發 --> 167 <button @click.exact="onClick">A</button> 168 <h2>#鼠標按鈕修飾符</h2> 169 <!-- 170 .left 171 •.right 172 •.middle 173 174 這些修飾符會限制處理函數僅響應特定的鼠標按鈕。 175 176 --> 177 <h2>爲何在 HTML 中監聽事件?</h2> 178 <!-- 179 你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。 180 但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。 181 實際上，使用 v-on 有幾個好處： 182 1.掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。 183 2.由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。 184 3.當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何清理它們。 185 --> 186 </div> 187 <script type="text/javascript"> 188 var app=new Vue({ 189 el:'#app', 190 data:{ 191 msg:'hello world!!!', 192 counter:0, 193 name: 'Vue.js' 194 }, 195 // 在 `methods` 對象中定義方法 196 methods:{ 197 greet: function (event) { 198 // `this` 在方法裏指向當前 Vue 實例 199 alert('Hello ' + this.name + '!') 200 // `event` 是原生 DOM 事件 201 if (event) { 202 alert(event.target.tagName) 203 } 204 }, 205 say: function (message) { 206 alert(message); 207 }, 208 warn: function (message, event) { 209 // 如今咱們能夠訪問原生事件對象 210 if (event) { 211 event.preventDefault(); 212 } 213 alert(message); 214 }, 215 doThis:function(){ 216 alert('點我666'); 217 }, 218 doThat:function(){ 219 alert('點它666'); 220 }, 221 submit:function(){ 222 alert('點我--submit'); 223 }, 224 onPageDown:function(){ 225 alert('點我--onPageDown'); 226 }, 227 doSomething:function(){ 228 alert('點我--doSomething'); 229 }, 230 clear:function(){ 231 alert('點我--clear'); 232 }, 233 onClick:function(){ 234 alert('點我--onClick'); 235 }, 236 onCtrlClick:function(){ 237 alert('點我--onCtrlClick'); 238 } 239 } 240 }); 241 </script> 242 </body> 243 </html>
備註
學而時習之，不亦說乎！！！
相關文章
- 1. 一塊兒學Vue之條件判斷
- 2. 一塊兒學shell之（八-2）文件處理
- 3. 一塊兒學shell之（八-1）文件處理
- 4. 一塊兒學Vue之模板語法
- 5. 一塊兒學Vue之樣式綁定
- 6. 一塊兒學Vue之列表渲染
- 7. 一塊兒學Vue之入門篇
- 8. Vue事件處理
- 9. 一塊兒學Vue自定義組件之拼圖小遊戲
- 10. 陪你一塊兒學習之javascript事件
- 更多相關文章...
- • PHP 文件處理 - PHP教程
- • 錯誤處理 - RUST 教程
- • Kotlin學習（一）基本語法
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 一塊兒學Vue之條件判斷
- 2. 一塊兒學shell之（八-2）文件處理
- 3. 一塊兒學shell之（八-1）文件處理
- 4. 一塊兒學Vue之模板語法
- 5. 一塊兒學Vue之樣式綁定
- 6. 一塊兒學Vue之列表渲染
- 7. 一塊兒學Vue之入門篇
- 8. Vue事件處理
- 9. 一塊兒學Vue自定義組件之拼圖小遊戲
- 10. 陪你一塊兒學習之javascript事件