使用 v-on 指令監聽 DOM 事件。html
<div id="app1"> <button @click="counter += 1">點擊我</button> <p>按鈕被點擊次數爲:{{counter}}</p> </div> ---------- //事件觸發時執行js語句 var app1 = new Vue({ el: '#app1', data: { counter:0 } })
v-on 能夠接收要調用的方法名。瀏覽器
<div id="app2"> <button @click="greet">Greet</button> </div> ---------- // 在methods對象中定義事件監視器 var app2 = new Vue({ el: '#app2', data: { name: 'Vue.js' }, methods:{ greet: function(event){ alert('Hello' + this.name + '!') // `event` 是原始 DOM 事件對象 if (event) { alert(event.target.tagName) } } } }) // 直接調用methods方法 app2.greet()
<div id="app3"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div> ---------- // 定義在行間內的事件處理器 var app3 = new Vue({ el: '#app3', methods: { say: function(msg){ alert(msg) } } })
當須要訪問原始DOM事件對象的時候,可使用特殊的$event變量將它傳遞給一個方法。app
<div id="app4"> <button @click="warn('Form cannot be submitted yet.', $event)"> submit </button> </div> ---------- // 傳遞DOM事件對象 var app4 = new Vue({ el: '#app4', methods:{ warn: function(msg,event){ // 如今能夠訪問原始事件對象 if (event) event.preventDefault() alert(msg) } } })
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。
儘管咱們能夠在 methods 中輕鬆實現這點,但更好的方式是:methods 只有純粹的數據邏輯,而不是去處理 DOM 事件細節。函數
爲了解決這個問題, Vue.js 爲 v-on 提供了事件修飾符。this
<!-- 中止點擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不從新載入頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符能夠鏈式調用 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時,使用事件捕獲模式 --> <!-- 也就是說,內部元素觸發的事件先在此到處理,而後才交給內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只有在 event.target 是元素自身時,才觸發處理函數。 --> <!-- 也就是說,event.target 是子元素時,不觸發處理函數 --> <!-- 使用 v-on:click.prevent.self 會阻止全部點擊 --> <!-- 使用 v-on:click.self.prevent 只阻止元素自身的點擊 --> <div v-on:click.self="doThat">...</div> <!-- .once 修飾符:不只能處理DOM事件還能夠用於處理組件事件 --> <!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> <!-- 滾動事件的默認行爲(滾動)將當即發生, --> <!-- 而不是等待 `onScroll` 完成後才發生, --> <!-- 以防在滾動事件的處理程序中含有 `event.preventDefault()` 調用 --> <!-- .passive 會向瀏覽器傳達你並不但願阻止事件的默認行爲 --> <!-- .passive 和 .prevent 放在一塊兒使用 --> <div v-on:scroll.passive="onScroll">...</div>
在監聽鍵盤事件時常常須要查找經常使用按鍵對應的 code 值。
Vue 能夠在 v-on 上添加按鍵修飾符,用於監聽按鍵事件。spa
<!-- 只在 `keyCode` 是 13 時,調用 `vm.submit()` --> <input v-on:keyup.13="submit">
記住全部 keyCode 是很是麻煩的事,因此 Vue 提供一些最經常使用按鍵的別名:code
<!-- 和上面的示例相同 --> <input v-on:keyup.enter="submit">
經過全局 config.keyCodes 對象設置:orm
// 可使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
直接使用 KeyboardEvent.key 暴露出來的全部合法按鍵名做爲修飾符,可是要將它們轉換爲串聯式命名。htm
<input @keyup.page-down="onPageDown">
僅在如下修飾符對應的按鍵被按下時,纔會觸發鼠標或鍵盤事件監聽器對象
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">作一些操做</div>
在keyup事件觸發時,輔助按鍵必須是按下狀態。也就是說,keyup.ctrl 事件須要同時按下 ctrl 鍵和釋放一個按鍵。
.exact 修飾符能夠控制觸發事件所需的系統輔助按鍵的準確組合。
<!-- 若是 Alt 鍵或 Shift 鍵與 Ctrl 鍵同時按下,也會觸發事件 --> <button @click.ctrl="onClick">A</button> <!-- 只在 Ctrl 按鍵按下,其餘按鍵未按下時,觸發事件 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 只在沒有系統輔助按鍵按下時,觸發事件 --> <button @click.exact="onClick">A</button>
這些修飾符會限制處理函數,僅響應特定的鼠標按鍵觸發的事件。
由於全部 Vue 事件處理器函數和表達式都嚴格綁定在處理當前視圖(view)的 ViewModel 上,不會形成任何維護上的困難。
經過瀏覽 HTML 模板,就能很方便地找到在 JavaScript 代碼裏對應的處理函數。
因爲無須在 JavaScript 裏手動綁定事件,ViewModel 代碼是很是純粹的邏輯,而且和 DOM 徹底解耦。
當一個 ViewModel 被銷燬時,全部的事件監聽器都會被自動刪除。