事件处理器
事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通過由點 . 表示的指令后綴來調用修飾符。
.stop - 阻止冒泡
.prevent - 阻止默認事件
.capture - 阻止捕獲
.self - 只監聽觸發該元素的事件
.once - 只觸發一次
.left - 左鍵事件
.right - 右鍵事件
.middle - 中間滾輪事件
<!-- 阻止單擊事件冒泡 -->
<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>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名：.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
實例<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>事件處理器</title><script src="js/vue.js"></script></head><body><div id="app"><button v-on:click="counter+=1">增加1</button><p>這個按鈕被點擊了{{counter}}次</p><button v-on:click="greet">Greet</button><!-- 除了直接綁定到一個方法，也可以用內聯 JavaScript 語句 --><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say What</button></div><script>new Vue({el:'#app',data:{counter:0,name:'Vue.js'},methods:{greet:function(event){//this在這里指Vue實例alert('hello'+this.name)//event是原生DOM事件if(event) {alert(event.target.tagName)}},say:function(message){alert(message)}}})// 也可以用 JavaScript 直接調用方法app.greet()</script></body>
</html>
總結
- 上一篇： Vue监听属性
- 下一篇： A - 小C语言--词法分析程序