Vue基礎篇-事件處理器
阿新 • • 發佈:2018-12-12
1.基本用法
<div id="app"> <button v-on:click="clickFn('你好')">點一點</button> </div> <script> var app = new Vue({ el: '#app', data: { name: ',Vue.js' }, methods: { // 在 `methods` 物件中定義方法 clickFn: function (str) { // `event` 是原生 DOM 事件 alert( str + this.name + '!') // `this` 在方法裡指當前 Vue 例項 } } }) app.greet() // 也可以用 JavaScript 直接呼叫方法 </script>
2.事件修飾符
五種事件修飾符來處理DOM事件細節及預設行為,詳解如下:
<!-- 阻止單擊事件冒泡,相當於:event.stopPropagation() --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再過載頁面,相當於:event.preventDefault()取消有的預設行為 --> <form v-on:submit.prevent="doThis"></form> <!-- 新增事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 --> <div v-on:click.self="doThis">...</div> <!-- 事件只能點選一次,版本新增修飾符 --> <a v-on:click.once="doThis"></a> <!-- 修飾符可以串聯,按照前後順序執行 --> <a v-on:click.stop.prevent="doThis"></a> <!-- 只有修飾符,其不進行回撥處理 --> <form v-on:submit.prevent></form>
3.鍵盤事件修飾符
Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符,且為了方便使用,提供了十幾種別名,且其可以串聯,詳解如下:
<!-- keyCode 是 13(enter鍵) 時呼叫 -->
<input v-on:keyup.13="dothis">
<!-- 別名寫法,同上 -->
<input v-on:keyup.enter="dothis">
<!-- 按下Alt + Ctrl才可呼叫 -->
<input @keyup.alt.ctrl="dothis">
按鍵別名一覽:
enter 回車鍵
tab tab鍵
delete "刪除" 和 "退格" 鍵
esc esc鍵
space 空格鍵
up 方向鍵-上
down 方向鍵-下
left 方向鍵-左
right 方向鍵-右
ctrl ctrl鍵
alt alt鍵
shift shift鍵
meta window鍵(mac上是四朵小花花)
4.補充知識
(a)computed定義事件函式,初始化會執行一次,methods不會初始化執行;
(b)傳入當前元素,需使用$event物件,
<button v-on:click="doThis('hi',$event)">say hi</button>
(c)定義事件大多應該參照DOM事件的規則,避免一些不必要的錯誤;