Vue的事件處理方法

時間 2019-11-10

標籤 vue 事件處理方法简体版

原文原文鏈接

事件處理

上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...html

事件監聽

v-on 指令能夠用來監聽dom事件來執行一些js代碼segmentfault

<div class="exp">
    <p>這個按鈕被點擊了{{msg}}次</p>
    <input type="button" value="按鈕" v-on:click="msg+=1"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        data:{
            msg:0
        }
    })
</script>

方法事件處理器

許多事件處理的邏輯都很複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 能夠接收一個定義的方法來調用。dom

<div class="exp">
    <input type="button" v-on:click="cli" value="按鈕"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        data:{
            msg:"hello"
        },
        methods:{
            cli:function(){
                alert(this.msg)
            }
        }
    })
</script>

內聯處理器方法

除了直接綁定到一個方法，也能夠用內聯 JavaScript 語句：this

<div class="exp">
    <input type="button" v-on:click="cli('hi')" value="hi"></input>
    <input type="button" v-on:click="cli('hello')" value="hello"></input>
</div>
<script>
    new Vue({
        el:'.exp',
        methods:{
            cli:function(msg){
                alert(msg)
            }
        }
    })
</script>

有時也須要在內聯語句處理器中訪問原生 DOM 事件。能夠用特殊變量 $event 把它傳入方法：spa

<div class="exp">
    <input type="button" value="Submit" v-on:click="warn('Form cannot be submitted yet.', $event)">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            warn: function (message, event) {
                // 如今咱們能夠訪問原生事件對象
                if (event) event.preventDefault()
                alert(message)
            }
        }
    })
</script>

事件修飾符

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

爲了解決這個問題， Vue.js 爲 v-on 提供了事件修飾符。經過由點(.)表示的指令後綴來調用修飾符。orm

.stophtm
.prenent對象
.capture事件
.self
.once

<!-- 阻止單擊事件冒泡 -->
<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>

<!-- 只當事件在該元素自己（好比不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

鍵值修飾符

在監聽鍵盤事件時，咱們常常須要監測常見的鍵值。 Vue 容許爲 v-on 在監聽鍵盤事件時添加關鍵修飾符。先來看看如何獲取鍵值：

<div class="exp">
    <input type="button" value="按鈕" v-on:keydown="keyboard">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            keyboard:function(e){
                console.log(e.keyCode)
            }
        }
    })
</script>

記住全部的 keyCode 比較困難，因此 Vue 爲最經常使用的按鍵提供了別名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

修飾健

能夠用以下修飾符開啓鼠標或鍵盤事件監聽，使在按鍵按下時發生響應。

.ctrl
.alt
.shift
.meta
好比：

<div class="exp">
    <input type="button" value="按鈕" v-on:keydown.ctrl.alt="keyboard">
</div>
<script>
    new Vue({
        el:'.exp',
        methods: {
            keyboard:function(){
                alert(1)
            }
        }
    })
</script>

同時按下ctrl和alt鍵，會有一個彈窗