事件處理
監(jiān)聽事件
可以用v-on指令監(jiān)聽DOM事件
<div id="example-1">
<button v-on:click="counter += 1">Add</button>
</div>
var vm = new Vue({
? ? ?el:"#example-1",
? ? ?data:{
? ? ? ? ? counter:0
? ? ?}
})
事件處理方法
v-on可以接收一個需要調(diào)用的方法名稱
<div id="example-2">
<button v-on:click="greet">greet</button>
</div>
var vm = new Vue({
? ? el:"#example-2",
? ? data:{
? ? ? ? ? name:"Vue.js"
? ? },
? ? methods:{
? ? ? ? ? ?greet:function(event){
? ? ? ? ? ? ? ?alert("Hello" + this.name + "!");
? ? ? ? ? ? ? ?if(event){
? ? ? ? ? ? ? ? ? ? ?alert(event.target.tagName)
? ? ? ? ? ? ? ?}
? ? ? ? ? }
? ? ?}
})
也可以用JavaScript直接調(diào)用
vm.greet();
內(nèi)聯(lián)處理器中的方法
除了直接綁定到一個方法，也可以在內(nèi)聯(lián)JavaScript語句中調(diào)用方法
<div id="example-3">
<button v-on:click="say('hi')">Say</button>
<button v-on:click="say('what')">what</button>
</div>
var vm = new Vue({
? ? ?el:"#example-3",
? ? ?data:{},
? ? ?methods:{
? ? ? ? ? say:function(message){
? ? ? ? ? ? ? ?alert(message)
? ? ? ? ? }
? ? }
})
事件修飾符
在事件處理程序中調(diào)用?event.preventDefault()?或?event.stopPropagation()?是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)。
為了解決這個問題，Vue.js 為?v-on?提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件繼續(xù)傳播? -->
<a v-on:click.stop="doThis"></a>
<!--提交事件不再重載頁面-->
<form v-on:click.stop.prevent="onSubmit"></form>
<!--修飾符可以串聯(lián)-->
<a v-on:click.stop.prevent="doThat"></a>
<!--只有修飾符-->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis"></div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<div v-on:click.self="doThat"></div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產(chǎn)生。因此，用?@click.prevent.self?會阻止所有的點擊，而?@click.self.prevent?只會阻止對元素自身的點擊。
<!--點擊事件將只會觸發(fā)一次-->
<a v-on:click.once="doThis"></a>
按鍵修飾符
在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為?v-on?在監(jiān)聽鍵盤事件時添加按鍵修飾符，全部的按鍵別名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
系統(tǒng)修飾鍵
可以用如下修飾符來實現(xiàn)僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器。
.ctrl
.alt
.shift
.meta
.exact?修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
#鼠標按鈕修飾符
.left
.right
.middle
