Vue.js方法與事件指的是什么意思

發(fā)布時(shí)間：2020-12-02 14:05:34 來源：億速云閱讀：274 作者：小新欄目：web開發(fā)

小編給大家分享一下Vue.js方法與事件指的是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

方法與事件

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

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

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

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

<div id="app">
    <a href="https://www.apple.com/" @click="handleClick('禁止打開',$event)">打開鏈接</a>
</div>

修飾符

Vue支持以下修飾符：

.stop

.prevent

.capture

.self.once

具體用法如下：

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

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

修飾符功能	使用示例
只有在`keyCode`是`13`時(shí)調(diào)用`vm.submit()`	`<input @keyup.13="submit">`

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

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

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

.ctrl

.alt

.shift

.meta

以上是“Vue.js方法與事件指的是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡