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

資訊專欄INFORMATION COLUMN

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

bovenson / 2887人閱讀

摘要：請記住，會告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個被銷毀時，所有的事件處理器都會自動被刪除。

1、監(jiān)聽事件

用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。


  
  
The button above has been clicked {{ counter }} times.
2、事件處理方法

許多事件處理邏輯會更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調(diào)用的方法名稱。


  
  



var example2 = new Vue({
  el: "#example-2",
  data: {
    name: "Vue.js"
  },

  // 在 `methods` 對象中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向當(dāng)前 Vue 實例
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
3、內(nèi)聯(lián)處理器中的方法

除了直接綁定到一個方法，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法：


  
  



new Vue({
  el: "#example-3",
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

有時也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：



methods: {
  warn: function (message, event) {
    // 現(xiàn)在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}
4、事件修飾符

事件修飾符是由點開頭的指令后綴來表示的。

.stop 阻止冒泡

.prevent 阻止默認(rèn)事件

.capture 添加事件偵聽器時使用事件捕獲模式【實現(xiàn)捕獲觸發(fā)事件機制】

.self 只有當(dāng)事件在該元素本身觸發(fā)時觸發(fā)回調(diào)【只有點擊當(dāng)前元素，才會觸發(fā)事件處理函數(shù)】

.once 事件只觸發(fā)一次 .passive

.stop和.self的區(qū)別：.self只會組織自己身上冒泡行為的觸發(fā)，并不會真正組織冒泡行為。

使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on：click.prevent.self會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。

5、按鍵修飾符

監(jiān)聽鍵盤事件時，在監(jiān)聽鍵盤事件時添加按鍵修飾符：
5.1 按鍵碼

.enter

.tab

.delect

.esc

.space

.up

.down

.left

.right

自定義全局按鍵修飾符 Vue.config.keyCodes.f2 = 113
通過 Vue.config.keyCodes.名稱 = 按鍵值 來自定義按鍵修飾符別名

6、系統(tǒng)修飾符

可以用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器

.ctrl

.alt

.shift

.meta





Do something

請注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會觸發(fā)事件。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。

6.1 .exact修飾符 
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
6.2 鼠標(biāo)按鍵修飾符

.left

.right

.middle

這些修飾符會限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

7、為什么在HTML中監(jiān)聽事件

因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護(hù)上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應(yīng)的方法。 因為你無須在 JavaScript 里手動綁定事件，

你的ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。

當(dāng)一個 ViewModel被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何清理它們。

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

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

相關(guān)文章

  • vue2.0學(xué)習(xí)筆記（表單輸入綁定）

    摘要：復(fù)選框當(dāng)選中時當(dāng)沒有選中時這里的和特性并不會影響輸入控件的特性，因為瀏覽器在提交表單時并不會包含未被選中的復(fù)選框。 1、基礎(chǔ)用法 v-model指令可以實現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運用在表單元素中（input、radio、text、address、email、select、checkbox、textarea） 可以用 v-model 指令在表單 、 及 元素上...

    Seay 評論0 收藏0

  • vue2.0學(xué)習(xí)筆記（組件基礎(chǔ)）

    摘要：組件的復(fù)用你可以將組件進(jìn)行任意次數(shù)的復(fù)用注意當(dāng)點擊按鈕時，每個組件都會各自獨立維護(hù)它的。 1、基本示例 // 定義一個名為 button-counter 的新組件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: You cli...

    mingzhong 評論0 收藏0

  • Vue2.0 學(xué)習(xí)筆記

    摘要：父子組件通信父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。是一個對象而不是字符串?dāng)?shù)組時，它包含驗證要求。狀態(tài)管理由于多個狀態(tài)分散的跨越在許多組件和交互間，大型應(yīng)用的復(fù)雜度也隨之增長。提供了，可以通過文檔學(xué)習(xí)。 什么是vue vue是一個前端框架，主要兩個特點：數(shù)據(jù)綁定、組件化。 安裝環(huán)境 根據(jù)教程安裝環(huán)境：node.js、npm、webpack、vue-cli主要的命...

    cgh1999520 評論0 收藏0

  • Vue2.0實用筆記

    摘要：實例中，可追蹤數(shù)據(jù)發(fā)生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    draveness 評論0 收藏0

  • Vue2.0實用筆記

    摘要：實例中，可追蹤數(shù)據(jù)發(fā)生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環(huán)前，進(jìn)行去重優(yōu)化，然后重新渲染。最早通過實現(xiàn)了這一需求，通過事件可監(jiān)聽的變化，實現(xiàn)不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態(tài)。(定...

    maochunguang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<