資訊專(zhuān)欄INFORMATION COLUMN
摘要：事件處理上一篇的條件渲染與列表渲染下一篇的表單輸入綁定事件監(jiān)聽(tīng)指令可以用來(lái)監(jiān)聽(tīng)事件來(lái)執(zhí)行一些代碼這個(gè)按鈕被點(diǎn)擊了次按鈕方法事件處理器許多事件處理的邏輯都很復(fù)雜，所以直接把代碼寫(xiě)在指令中是不可行的。因此可以接收一個(gè)定義的方法來(lái)調(diào)用。
事件處理
事件監(jiān)聽(tīng)上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
v-on 指令可以用來(lái)監(jiān)聽(tīng)dom事件來(lái)執(zhí)行一些js代碼
方法事件處理器這個(gè)按鈕被點(diǎn)擊了{(lán){msg}}次
許多事件處理的邏輯都很復(fù)雜，所以直接把 JavaScript 代碼寫(xiě)在 v-on 指令中是不可行的。因此 v-on 可以接收一個(gè)定義的方法來(lái)調(diào)用。
內(nèi)聯(lián)處理器方法
除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語(yǔ)句：
有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪(fǎng)問(wèn)原生 DOM 事件。可以用特殊變量 $event 把它傳入方法：
事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。盡管我們可以在 methods 中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個(gè)問(wèn)題， Vue.js 為 v-on 提供了 事件修飾符。通過(guò)由點(diǎn)(.)表示的指令后綴來(lái)調(diào)用修飾符。
.stop
.prenent
.capture
.self
.once
在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們經(jīng)常需要監(jiān)測(cè)常見(jiàn)的鍵值。 Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加關(guān)鍵修飾符。先來(lái)看看如何獲取鍵值：
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
修飾健可以用如下修飾符開(kāi)啟鼠標(biāo)或鍵盤(pán)事件監(jiān)聽(tīng)，使在按鍵按下時(shí)發(fā)生響應(yīng)。
.ctrl
.alt
.shift
.meta
比如：
同時(shí)按下ctrl和alt鍵，會(huì)有一個(gè)彈窗
鼠標(biāo)按鈕修飾符.left
.right
.middle
這些修飾符會(huì)限制處理程序監(jiān)聽(tīng)特定的鼠標(biāo)按鍵.
To be continue......上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87437.html
摘要：不必?fù)?dān)心，因?yàn)樗械氖录幚矸椒ê捅磉_(dá)式都嚴(yán)格綁定在當(dāng)前視圖的上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。當(dāng)一個(gè)被銷(xiāo)毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 Vue.js的事件處理 監(jiān)聽(tīng)事件 我們可以用 v-on 指令監(jiān)聽(tīng) DOM 事件來(lái)觸發(fā)一些 JavaScript 代碼。 {{msg}} var vm = new Vue({ el:.box, data:{ ...
摘要：請(qǐng)記住，會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會(huì)觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個(gè)被銷(xiāo)毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 1、監(jiān)聽(tīng)事件 用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...
項(xiàng)目參考了notepad，非常感謝。用flex布局頁(yè)面，響應(yīng)式，簡(jiǎn)化了內(nèi)容，當(dāng)做練手vue項(xiàng)目 項(xiàng)目開(kāi)發(fā)過(guò)程中，遇到的問(wèn)題及知識(shí)點(diǎn)全部記錄在下方 vue2 + vuex + flex + localStorage 本地記事本 項(xiàng)目使用了vue cli 腳手架，webpack-simple模板,fontawesome圖標(biāo) 在線(xiàn)預(yù)覽及本地安裝 notebook github點(diǎn)擊預(yù)覽 npm insta...
摘要：當(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。下面在...
摘要：事件處理監(jiān)聽(tīng)事件綁定可以用指令監(jiān)聽(tīng)事件來(lái)觸發(fā)一些代碼?？梢杂锰厥庾兞堪阉鼈魅敕椒ㄊ录揎椃谑录幚沓绦蛑姓{(diào)用阻止默認(rèn)行為或阻止冒泡是非常常見(jiàn)的需求。換一種說(shuō)法如果要引發(fā)，必須按下時(shí)釋放其他的按鍵單單釋放不會(huì)引發(fā)事件。 事件處理 監(jiān)聽(tīng)事件 (綁定) 可以用 v-on 指令監(jiān)聽(tīng) DOM 事件來(lái)觸發(fā)一些 JavaScript 代碼。 這個(gè)按鈕被點(diǎn)擊了 {{numb...
閱讀 2978·2021-10-14 09:42
閱讀 1333·2021-09-24 10:32
閱讀 3071·2021-09-23 11:21
閱讀 2921·2021-08-27 13:10
閱讀 3400·2019-08-29 18:41
閱讀 2269·2019-08-29 15:16
閱讀 1304·2019-08-29 13:17
閱讀 970·2019-08-29 11:22
