Vue.js-方法與事件

tinylcy 發(fā)布于2019-08-23 16:02 / 569人閱讀

摘要：學(xué)習(xí)筆記方法與事件方法與事件調(diào)用得方法名后可以不跟括號(hào)，如果該方法有參數(shù)，默認(rèn)會(huì)將原生事件對(duì)象傳入。因?yàn)橥ㄟ^(guò)就可以知道調(diào)用的是哪個(gè)方法，將邏輯與解耦，便于維護(hù)。最重要的是，當(dāng)銷(xiāo)毀時(shí)，所有的事件處理器都會(huì)自動(dòng)銷(xiāo)毀，無(wú)需自己處理。

學(xué)習(xí)筆記：方法與事件

方法與事件

@click調(diào)用得方法名后可以不跟括號(hào)()，如果該方法有參數(shù)，默認(rèn)會(huì)將原生事件對(duì)象event傳入。

這種在HTML元素上監(jiān)聽(tīng)事件的設(shè)計(jì)看似將DOM與JavaScript緊耦合，違背分離的原理，實(shí)則剛好相反。因?yàn)橥ㄟ^(guò)HTML就可以知道調(diào)用的是哪個(gè)方法，將邏輯與DOM解耦，便于維護(hù)。

最重要的是，當(dāng)viewModel銷(xiāo)毀時(shí)，所有的事件處理器都會(huì)自動(dòng)銷(xiāo)毀，無(wú)需自己處理。

Vue提供了一個(gè)特殊變量$event，用于訪問(wèn)原生DOM事件。


    打開(kāi)鏈接

修飾符

Vue支持以下修飾符：

.stop

.prevent

.capture

.self

.once

具體用法如下：

修飾符功能	使用示例
阻止單擊事件冒泡
提交事件不再重載頁(yè)面
修飾符可以串聯(lián)
只有修飾符
添加事件偵聽(tīng)器時(shí)使用事件捕獲模式	...
只當(dāng)事件在該元素本身（不是子元素）觸發(fā)時(shí)執(zhí)行回調(diào)	...
只觸發(fā)一次，組件同樣適用	...

在表單元素上監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，還可以使用按鍵修飾符。

修飾符功能	使用示例
只有在keyCode是13時(shí)調(diào)用vm.submit()

除了具體的某個(gè)keyCode外，Vue還提供了一些快捷名稱：

.enter

.tab

.delete（補(bǔ)貨“刪除”和“退格”鍵）

.esc

.space

.up

.down

.left

.right

這些按鍵修飾符也可以組合使用，或和鼠標(biāo)一起配合使用：

.ctrl

.alt

.shift

.meta

云服務(wù)器 GPU云服務(wù)器方法new事件android Vue.js 事件與動(dòng)畫(huà) vue.js 屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102640.html

相關(guān)文章

初學(xué)Vue（一） -- Vue簡(jiǎn)單入門(mén)

摘要：可以進(jìn)行計(jì)算從開(kāi)始計(jì)數(shù)雙向綁定數(shù)據(jù)和輸出綁定事件書(shū)寫(xiě)區(qū)事件區(qū)域，所有事件控制寫(xiě)在這里有簡(jiǎn)寫(xiě)形式可以直接把替換為，。 vue - 國(guó)人開(kāi)發(fā)制作的類(lèi)似于 view 的發(fā)音 vue經(jīng)過(guò)了幾次大的版本波動(dòng) 0.x 0.6版本 1.x 版本 2.x 版本 - 現(xiàn)在常用的為什么要介紹版本改動(dòng)呢，因?yàn)椴煌姹菊Z(yǔ)法和用法有差別，用起來(lái)比較麻煩 react 因?yàn)榘鏅?quán)原因，導(dǎo)致百度等企業(yè)...

Alliot 2019-08-23 18:05 評(píng)論0 收藏0
Vue學(xué)習(xí)筆記（一）

摘要：一介紹也稱為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱為語(yǔ)法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)：是一個(gè)構(gòu)建用戶界面的框架是一...

baoxl 2019-08-30 13:47 評(píng)論0 收藏0
Vue學(xué)習(xí)筆記（一）

摘要：一介紹也稱為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱為語(yǔ)法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)：是一個(gè)構(gòu)建用戶界面的框架是一...

liukai90 2019-08-21 17:05 評(píng)論0 收藏0
Vue學(xué)習(xí)筆記（一）

摘要：一介紹也稱為，讀音類(lèi)似，錯(cuò)誤讀音，由華人尤雨溪開(kāi)源并維護(hù)。隱藏四事件之前說(shuō)了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤(pán)事件，具體參考官方文檔。模板就是，用來(lái)進(jìn)行數(shù)據(jù)綁定，顯示在頁(yè)面中，也稱為語(yǔ)法。一、Vue.js介紹 Vue.js也稱為Vue，讀音類(lèi)似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開(kāi)源并維護(hù)。 Vue有以下特點(diǎn)：是一個(gè)構(gòu)建用戶界面的框架是一...

rollback 2019-08-01 17:49 評(píng)論0 收藏0
vue.js起步式（二）

摘要：當(dāng)需要和第三方的動(dòng)畫(huà)庫(kù)，比如配合時(shí)會(huì)非常有用顯式聲明過(guò)渡類(lèi)型新增需要給過(guò)渡元素添加事件偵聽(tīng)器來(lái)偵聽(tīng)過(guò)渡何時(shí)結(jié)束。在下例中我們使用注冊(cè)一個(gè)自定義的過(guò)渡元素已被插入在動(dòng)畫(huà)結(jié)束后調(diào)用與相同然后用特性中漸近過(guò)渡與一起用時(shí)可以創(chuàng)建漸近過(guò)渡。 8.方法與事件處理器方法處理器可以用 v-on 指令監(jiān)聽(tīng) DOM 事件： Greet 我們綁定了一個(gè)單擊事件處理器到一個(gè)方法 greet。下面在...

BearyChat 2019-08-20 10:29 評(píng)論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢(shì)

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過(guò)觸發(fā)事件，回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信，官方推薦使用一個(gè)實(shí)例作為中央事件總線。寫(xiě)在前面因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評(píng)論0 收藏0