Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第04章 元素事件綁定

第4章元素事件綁定課件V1.0

教學(xué)內(nèi)容第一節(jié)

事件定義第二節(jié)事件綁定方式第三節(jié)事件傳參知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Vue中定義事件方法理解Vue中事件綁定方式掌握Vue中傳參過程和參數(shù)對(duì)象知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用4C04-01事件定義

C04-02事件綁定方式1、指令v-on或@2、常見修飾符C04-03事件傳參1、方法參數(shù)2、事件對(duì)象參數(shù)在Vue中，當(dāng)一個(gè)元素通過使用v-on或語(yǔ)法糖@指令綁定某個(gè)事件后，則完成了事件被定義的過程，事件定義的過程，實(shí)質(zhì)是事件被元素綁定的過程。Vue中元素綁定事件的過程其實(shí)與頁(yè)面中元素使用addEventListener方法綁定事件是一致的。如下圖所示。事件定義templateASTrenderVNodeVNodeDOMaddEventListenerevent

指令v-on專門用于元素事件的綁定，添加時(shí)通過“:”冒號(hào)將指令與事件名稱隔開，冒號(hào)右側(cè)為需要綁定的事件名稱；@是指令綁定事件的一種簡(jiǎn)寫方式，也是一種語(yǔ)法糖寫法。指令v-on或@

在Vue中，當(dāng)事件綁定時(shí)，允許在事件名稱后面通過點(diǎn)語(yǔ)法的形式添加一個(gè)事件修飾符，來處理DOM事件本身默認(rèn)的現(xiàn)象。

常見的修飾符有下面幾種，名稱和用法如下。

<!--單擊事件時(shí)阻止冒泡現(xiàn)象--><av-on:click.stop="todo"></a><!--表單提交事件時(shí)阻止頁(yè)面重載--><formv-on:submit.prevent="onSubmit"></form><!--單擊事件的元素只有是自身時(shí)才會(huì)觸發(fā)--><av-on:click.self="todo"></a><!--單擊事件時(shí)只會(huì)觸發(fā)一次--><av-on:click.once="todo"></a>常見修飾符

在事件方法中，可以不傳參數(shù)，或傳入一個(gè)或多個(gè)參數(shù)，方法中默認(rèn)有一個(gè)事件對(duì)象，這個(gè)對(duì)象在方法不傳入?yún)?shù)時(shí)，可以通過聲明的方式直接獲取。方法參數(shù)

在執(zhí)行事件處理方法中，有時(shí)需要傳入事件對(duì)象這個(gè)參數(shù)，一種是方法中不傳任何參數(shù)，定義聲明后直接獲取，另外一種是向方法中傳入一個(gè)特殊的變量$event，也可以獲取事件對(duì)象。在Vue中，可以使用以下三種方法解決事件冒泡現(xiàn)象。第3種是Vue中特有的寫法，既簡(jiǎn)單，又高效，建議大家使用。第1種todo(event){event.stopPropagation();Num++;}第2種<divclass="a-child"@click="todo($event)"></div>