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

資訊專欄INFORMATION COLUMN

Vue 事件處理

villainhr / 2637人閱讀

摘要：事件處理監(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)擊了 {{number }} 次。


  
var vm=new Vue({
    el:"#app",
    date:{
        number:1,
    },  
})
方法事件處理器 
事件處理器可以放在方法里，也可以放在普通函數(shù)vm.method()里

    

  
var vm=new Vue({
    el:"#app",
    date:{
        msg:"hello world!",
        number:1,
    },
    methods:{
        tanchu:function(event){
            console.log(event.target);
            console.log(event.type);
        },
    }
});
內(nèi)聯(lián)處理方法 
除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語句：

    

  
有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
var vm=new Vue({
    el:"#app",
    date:{
        msg:"hello world!",
        number:1,
    },
    methods:{
        tanchu:function(xiaoxi,event){
           console.log(xiaoxi); console.log(event.target);
            console.log(event.type);
        },
    }
});
事件修飾符 
在事件處理程序中調(diào)用 event.preventDefault()(阻止默認(rèn)行為)或 event.stopPropagation()(阻止冒泡) 是非常常見的需求。盡管我們可以在 methods 中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。    


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

.stop

.prevent

.capture

.self

.once


  



  


  



  

  

...
  



...
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 @click.self.prevent 只會(huì)阻止元素上的點(diǎn)擊。 鍵值修飾符 
Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加關(guān)鍵修飾符：

    {{msg}}
    


  
也可以這樣寫

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



  
全部的按鍵別名：

.enter

.tab

.delete (捕獲 “刪除” 和 “退格” 鍵)

.esc

.space

.up

.down

.left

.right

還有兩個(gè)鍵的




Do something
修飾鍵比正常的按鍵不同；修飾鍵和 keyup 事件一起用時(shí)，事件引發(fā)時(shí)必須按下正常的按鍵。換一種說法：如果要引發(fā) keyup.ctrl，必須按下 ctrl 時(shí)釋放其他的按鍵；單單釋放 ctrl 不會(huì)引發(fā)事件。 鼠標(biāo)修飾符

.left

.right

.middle

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

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

相關(guān)文章

  • VUE - MVVM - part8 - 優(yōu)化Event

    摘要：看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章?；仡櫾谏弦徊轿覀儗?shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類，接下來我們把它給優(yōu)化下，方便我們的使用。接著我們來優(yōu)化。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 在上一步我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類，接下來我們把它給優(yōu)化下，方便我們的使用。主要優(yōu)化內(nèi)容： 方便為多個(gè)事件添加同一個(gè)函數(shù) 方便為一個(gè)事件...

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

  • 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

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

    項(xiàng)目參考了notepad，非常感謝。用flex布局頁面，響應(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原理】Event - 源碼版 之 綁定標(biāo)簽DOM事件

    摘要：寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之綁定標(biāo)簽事件這里的綁定 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...

    phoenixsky 評(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的事件處理方法

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

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

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

0條評(píng)論

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