成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue的事件處理方法

archieyang / 1461人閱讀

摘要：事件處理上一篇的條件渲染與列表渲染下一篇的表單輸入綁定事件監(jiān)聽指令可以用來監(jiān)聽事件來執(zhí)行一些代碼這個(gè)按鈕被點(diǎn)擊了次按鈕方法事件處理器許多事件處理的邏輯都很復(fù)雜，所以直接把代碼寫在指令中是不可行的。因此可以接收一個(gè)定義的方法來調(diào)用。

事件處理 
上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...
事件監(jiān)聽

v-on 指令可以用來監(jiān)聽dom事件來執(zhí)行一些js代碼


    
這個(gè)按鈕被點(diǎn)擊了{(lán){msg}}次
方法事件處理器

許多事件處理的邏輯都很復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 可以接收一個(gè)定義的方法來調(diào)用。
內(nèi)聯(lián)處理器方法

除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語(yǔ)句：

有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問原生 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

為了解決這個(gè)問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。

.stop

.prenent

.capture

.self

.once

















...




...
鍵值修飾符

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要監(jiān)測(cè)常見的鍵值。 Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加關(guān)鍵修飾符。先來看看如何獲取鍵值：

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

修飾健

可以用如下修飾符開啟鼠標(biāo)或鍵盤事件監(jiān)聽，使在按鍵按下時(shí)發(fā)生響應(yīng)。

.ctrl

.alt

.shift

.meta
比如：

同時(shí)按下ctrl和alt鍵，會(huì)有一個(gè)彈窗

鼠標(biāo)按鈕修飾符

.left

.right

.middle

這些修飾符會(huì)限制處理程序監(jiān)聽特定的鼠標(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://systransis.cn/yun/87437.html

相關(guān)文章

  • Vue.js中的v-on(事件處理)

    摘要：不必?fù)?dān)心，因?yàn)樗械氖录幚矸椒ê捅磉_(dá)式都嚴(yán)格綁定在當(dāng)前視圖的上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。當(dāng)一個(gè)被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 Vue.js的事件處理 監(jiān)聽事件 我們可以用 v-on 指令監(jiān)聽 DOM 事件來觸發(fā)一些 JavaScript 代碼。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

    YuboonaZhang 評(píng)論0 收藏0

  • vue2.0學(xué)習(xí)筆記（事件處理）

    摘要：請(qǐng)記住，會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會(huì)觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個(gè)被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 1、監(jiān)聽事件 用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

    bovenson 評(píng)論0 收藏0

  • vue練習(xí)小項(xiàng)目

    項(xiàng)目參考了notepad，非常感謝。用flex布局頁(yè)面，響應(yīng)式，簡(jiǎn)化了內(nèi)容，當(dāng)做練手vue項(xiàng)目 項(xiàng)目開發(fā)過程中，遇到的問題及知識(shí)點(diǎn)全部記錄在下方 vue2 + vuex + flex + localStorage 本地記事本 項(xiàng)目使用了vue cli 腳手架，webpack-simple模板,fontawesome圖標(biāo) 在線預(yù)覽及本地安裝 notebook github點(diǎn)擊預(yù)覽 npm insta...

    lbool 評(píng)論0 收藏0

  • vue.js起步式（二）

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

    BearyChat 評(píng)論0 收藏0

  • Vue 事件處理

    摘要：事件處理監(jiān)聽事件綁定可以用指令監(jiān)聽事件來觸發(fā)一些代碼。可以用特殊變量把它傳入方法事件修飾符在事件處理程序中調(diào)用阻止默認(rèn)行為或阻止冒泡是非常常見的需求。換一種說法如果要引發(fā)，必須按下時(shí)釋放其他的按鍵單單釋放不會(huì)引發(fā)事件。 事件處理 監(jiān)聽事件 (綁定) 可以用 v-on 指令監(jiān)聽 DOM 事件來觸發(fā)一些 JavaScript 代碼。 這個(gè)按鈕被點(diǎn)擊了 {{numb...

    villainhr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<