vue2.0學習筆記（事件處理）

bovenson 發布于2019-08-23 18:35 / 2879人閱讀

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

1、監聽事件

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


  
  The button above has been clicked {{ counter }} times.

2、事件處理方法

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


  
  


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

  // 在 `methods` 對象中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向當前 Vue 實例
      alert("Hello " + this.name + "!")
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

3、內聯處理器中的方法

除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法：


  
  


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

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



methods: {
  warn: function (message, event) {
    // 現在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}

4、事件修飾符

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

.stop 阻止冒泡

.prevent 阻止默認事件

.capture 添加事件偵聽器時使用事件捕獲模式【實現捕獲觸發事件機制】

.self 只有當事件在該元素本身觸發時觸發回調【只有點擊當前元素，才會觸發事件處理函數】

.once 事件只觸發一次 .passive

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

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

5、按鍵修飾符

監聽鍵盤事件時，在監聽鍵盤事件時添加按鍵修飾符：

5.1 按鍵碼

.enter

.tab

.delect

.esc

.space

.up

.down

.left

.right

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

6、系統修飾符

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器

.ctrl

.alt

.shift

.meta




Do something

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

6.1 .exact修飾符

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

6.2 鼠標按鍵修飾符

.left

.right

.middle

這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

7、為什么在HTML中監聽事件

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105484.html

vue2.0學習筆記（表單輸入綁定）

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

Seay 2019-08-23 18:35 評論0 收藏0
vue2.0學習筆記（組件基礎）

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

mingzhong 2019-08-23 18:36 評論0 收藏0
Vue2.0 學習筆記

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

cgh1999520 2019-08-21 11:25 評論0 收藏0
Vue2.0實用筆記

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

draveness 2019-08-23 16:09 評論0 收藏0
Vue2.0實用筆記

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

maochunguang 2019-08-02 16:08 評論0 收藏0