大概這是個(gè)坑吧......
綁定語(yǔ)法。
<!-- 復(fù)習(xí)一下縮寫，v-on是@，v-bind是: -->
<div id="vm1">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#vm1',
data: {
counter: 0
}
})
</script>
這里復(fù)習(xí)一下v-on的縮寫，相信我，寫的多了，你就會(huì)覺(jué)得少打兩個(gè)字母是幸福。
結(jié)果自然是這樣的。
當(dāng)然，如果這里我要把點(diǎn)擊次數(shù)上傳或者做一些其他的修改，耦合程度就有點(diǎn)不太讓人能接受了，于是可以這么寫嘛。
<!-- 為了讓事件和HTML解耦，定義一個(gè)方法 -->
<div id="vm2">
<button v-on:click="greet">Greet</button>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#vm2',
data: {
name: 'Vue.js'
},
methods: {
greet: function(event){
//this在當(dāng)前上下文中指向Vue實(shí)例
alert('Hello ' + this.name + '!');
//event是原生dom事件
if(event){
alert(event.target.tagName);
}
console.log(event);
}
}
})
</script>
當(dāng)然，在事件中，任何function里的this指針都指向本Vue實(shí)例。
結(jié)果如下。
在前面，我們已經(jīng)無(wú)數(shù)次應(yīng)用過(guò)這些了（所以文檔是用來(lái)查的）
哦，漏了個(gè)小兄弟
代碼的意思是，如果event是原生事件對(duì)象，就alert輸出觸發(fā)它的元素名稱。
所以也間接求證了，Vue綁定的盡量是原生事件對(duì)象。
在v-on:綁定中調(diào)用事件也是可以的。
<!-- 內(nèi)聯(lián)處理器中的方法 -->
<div id="vm3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script type="text/javascript">
var vm3 = new Vue({
el: '#vm3',
methods: {
say: function(message){
alert(message);
}
}
})
</script>
根據(jù)傳入的參數(shù)，會(huì)alert不同的內(nèi)容。
這種方法類似于在dom的onxx事件中書寫JavaScript代碼和調(diào)用函數(shù)，仁者見(jiàn)仁吧。
聯(lián)系例子二和剛才的例子，如果我們要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原生的dom事件對(duì)象，怎么做呢？
Vue提供了封裝的對(duì)象。
<!-- 如果需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原生DOM的事件對(duì)象，可以將它以$event傳入方法中 -->
<div id="vm4">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
</div>
<script type="text/javascript">
var vm4 = new Vue({
el: '#vm4',
methods: {
warn: function(message, event){
if(event){
event.preventDefault()
}
alert(message)
}
}
})
</script>
可以在內(nèi)聯(lián)語(yǔ)句處理中，傳入$event對(duì)象。
為什么表單無(wú)法提交呢？因?yàn)槲覀冋{(diào)用了阻止對(duì)象默認(rèn)事件的方法(event.preventDefault())，該方法最常用的場(chǎng)景就是用來(lái)阻止<a>標(biāo)簽的href跳轉(zhuǎn)和<form>標(biāo)簽的submit提交。當(dāng)然，它也是原生dom中的API。
還有一個(gè)和它使用頻率相同的API，即阻止事件冒泡（event.stopPropagantion()）的API，事件冒泡，是當(dāng)該元素接收到事件之后，會(huì)向上傳導(dǎo)，直到傳導(dǎo)到最高級(jí)的父元素（<html>標(biāo)記）為止。俗稱的“牽一發(fā)而動(dòng)全身”，就是這個(gè)道理。舉個(gè)例子，假如說(shuō)，你在頁(yè)面中的<html>標(biāo)記上，寫了一個(gè)click事件，那么無(wú)論底下哪個(gè)元素被點(diǎn)擊了，都會(huì)觸發(fā)<html>標(biāo)記的click
事件。。。。。。
這么一想的話，這兩個(gè)還挺重要的，不過(guò)老這么寫，也挺難過(guò)。。。
事件修飾符
常見(jiàn)的六個(gè)
- .stop 阻止事件冒泡 stopPropagation()
- .prevent 阻止元素默認(rèn)行為 preventDefault()
- .capture 即內(nèi)部元素的事件先在此處理，然后再交給內(nèi)部元素處理（逆stopPropagation()）
- .self 只處理自身觸發(fā)的事件
- .once v2.1.4新增 事件只觸發(fā)一次
- .passive v2.3.0新增 對(duì)應(yīng)addEventListener()中的 passive 選項(xiàng)
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
幾點(diǎn)提示：
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
.once除了可以對(duì)原生的DOM事件修飾之外，還可以用于自定義的組件事件中。其他的修飾符不能做到這一點(diǎn)。
.passive修飾符應(yīng)用得當(dāng)對(duì)移動(dòng)端性能提升比較明顯
不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。
按鍵修飾符
可以將對(duì)應(yīng)的事件與按鍵相關(guān)聯(lián)。
<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
也可以直接將KeyboardEvent.key暴露的任意有效按鍵名按照kebab-case的寫法來(lái)作為修飾符。
<!-- 只有在 `key` 是 `PageDown` 時(shí)調(diào)用 -->
<input v-on:keyup.page-down="onPageDown">
實(shí)際上，使用 v-on 有幾個(gè)好處：
掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。
因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。
當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無(wú)須擔(dān)心如何清理它們。
