Vue.js-方法與事件

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

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

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

方法與事件

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

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

最重要的是，當(dāng)viewModel銷毀時，所有的事件處理器都會自動銷毀，無需自己處理。

Vue提供了一個特殊變量$event，用于訪問原生DOM事件。


    打開鏈接

修飾符

Vue支持以下修飾符：

.stop

.prevent

.capture

.self

.once

具體用法如下：

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

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

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

除了具體的某個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 事件與動畫 vue.js 屬性

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102640.html

相關(guān)文章

初學(xué)Vue（一） -- Vue簡單入門

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

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

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

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

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

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

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

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

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

BearyChat 2019-08-20 10:29 評論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢

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

Profeel 2019-08-21 17:11 評論0 收藏0