【Vue.js】Vue官方文檔學習-事件處理

使用 v-on 指令監聽 DOM 事件。html

1、事件觸發時執行js語句

<div id="app1">
        <button @click="counter += 1">點擊我</button>
        <p>按鈕被點擊次數爲:{{counter}}</p>
    </div>
----------
    //事件觸發時執行js語句
    var app1 = new Vue({
        el: '#app1',
        data: {
            counter:0
        }
    })

2、定義在methods對象中的事件處理器

v-on 能夠接收要調用的方法名瀏覽器

<div id="app2">
        <button @click="greet">Greet</button>
    </div>
----------
    //    在methods對象中定義事件監視器
    var app2 = new Vue({
        el: '#app2',
        data: {
            name: 'Vue.js'
        },
        methods:{
            greet: function(event){
                alert('Hello' + this.name + '!')
                 // `event` 是原始 DOM 事件對象
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
    //    直接調用methods方法
    app2.greet()

3、定義在行間的事件處理器

<div id="app3">
        <button @click="say('hi')">Say hi</button>
        <button @click="say('what')">Say what</button>
    </div>
----------
    //    定義在行間內的事件處理器
    var app3 = new Vue({
        el: '#app3',
        methods: {
            say: function(msg){
                alert(msg)
            }
        }
    })

當須要訪問原始DOM事件對象的時候,可使用特殊的$event變量將它傳遞給一個方法。app

<div id="app4">
        <button @click="warn('Form cannot be submitted yet.', $event)">
            submit
        </button>
</div>
----------
    //    傳遞DOM事件對象
    var app4 = new Vue({
        el: '#app4',
        methods:{
            warn: function(msg,event){
                    // 如今能夠訪問原始事件對象
                    if (event) event.preventDefault()
                    alert(msg)
            }
        }
    })

4、事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。
儘管咱們能夠在 methods 中輕鬆實現這點,但更好的方式是:methods 只有純粹的數據邏輯,而不是去處理 DOM 事件細節。函數

爲了解決這個問題, Vue.js 爲 v-on 提供了事件修飾符this

  • .stop 中止事件冒泡
  • .prevent 再也不載入頁面
  • .capture 事件捕獲
  • .self
  • .once
  • .passive
<!-- 中止點擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不從新載入頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠鏈式調用 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時,使用事件捕獲模式 -->
<!-- 也就是說,內部元素觸發的事件先在此到處理,而後才交給內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只有在 event.target 是元素自身時,才觸發處理函數。 -->
<!-- 也就是說,event.target 是子元素時,不觸發處理函數 -->
<!-- 使用 v-on:click.prevent.self 會阻止全部點擊 -->
<!-- 使用 v-on:click.self.prevent 只阻止元素自身的點擊 -->
<div v-on:click.self="doThat">...</div>

<!-- .once 修飾符:不只能處理DOM事件還能夠用於處理組件事件 -->
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行爲(滾動)將當即發生, -->
<!-- 而不是等待 `onScroll` 完成後才發生, -->
<!-- 以防在滾動事件的處理程序中含有 `event.preventDefault()` 調用 -->
<!-- .passive 會向瀏覽器傳達你並不但願阻止事件的默認行爲 -->
<!-- .passive 和 .prevent 放在一塊兒使用 -->
<div v-on:scroll.passive="onScroll">...</div>

5、按鍵修飾符

在監聽鍵盤事件時常常須要查找經常使用按鍵對應的 code 值。
Vue 能夠在 v-on 上添加按鍵修飾符,用於監聽按鍵事件。spa

<!-- 只在 `keyCode` 是 13 時,調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

經常使用按鍵修飾符別名

記住全部 keyCode 是很是麻煩的事,因此 Vue 提供一些最經常使用按鍵的別名:code

  • .enter
  • .tab
  • .delete (捕獲「刪除」和「退格」按鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<!-- 和上面的示例相同 -->
<input v-on:keyup.enter="submit">

自定義按鍵修飾符別名

經過全局 config.keyCodes 對象設置:orm

// 可使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自動對應按鍵修飾符

直接使用 KeyboardEvent.key 暴露出來的全部合法按鍵名做爲修飾符,可是要將它們轉換爲串聯式命名。htm

<input @keyup.page-down="onPageDown">

6、系統輔助按鍵

觸發鼠標或鍵盤事件監聽器

僅在如下修飾符對應的按鍵被按下時,纔會觸發鼠標或鍵盤事件監聽器對象

  • .ctrl
  • .alt
  • .shift
  • .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">作一些操做</div>

在keyup事件觸發時,輔助按鍵必須是按下狀態。也就是說,keyup.ctrl 事件須要同時按下 ctrl 鍵和釋放一個按鍵。

.exact 修飾符

.exact 修飾符能夠控制觸發事件所需的系統輔助按鍵的準確組合。

<!-- 若是 Alt 鍵或 Shift 鍵與  Ctrl 鍵同時按下,也會觸發事件 -->
<button @click.ctrl="onClick">A</button>

<!-- 只在 Ctrl 按鍵按下,其餘按鍵未按下時,觸發事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 只在沒有系統輔助按鍵按下時,觸發事件 -->
<button @click.exact="onClick">A</button>

鼠標按鍵修飾符

  • .left
  • .right
  • .middle

這些修飾符會限制處理函數,僅響應特定的鼠標按鍵觸發的事件。

7、爲何監聽器會放在html中?

由於全部 Vue 事件處理器函數和表達式都嚴格綁定在處理當前視圖(view)的 ViewModel 上,不會形成任何維護上的困難。

經過瀏覽 HTML 模板,就能很方便地找到在 JavaScript 代碼裏對應的處理函數

因爲無須在 JavaScript 裏手動綁定事件,ViewModel 代碼是很是純粹的邏輯,而且和 DOM 徹底解耦

當一個 ViewModel 被銷燬時,全部的事件監聽器都會被自動刪除。

相關文章
相關標籤/搜索