Vue Event - 簡書

事件監(jiān)聽

v-on事件監(jiān)聽DOM事件，并在觸發(fā)時運行JS代碼稼跳。

例如：計數(shù)器增減

<input type="text" v-model="counter" />
<button v-on:click="counter += 1">+</button>
<button v-on:click="counter -= 1">-</button>

var vm = new Vue({
  el:'#app',
  data:{counter:0}
});

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="counter -= 1">-</button>
            </span>
            <input type="text" class="form-control" v-model="counter" value="">
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="counter += 1">+</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                counter:0
            }
        });
    </script>
</body>
</html>

事件處理方法

v-on可接受一個需調(diào)用的方法名稱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(evt){
                    if(evt){
                        console.log(this.message, evt.target.tagName);
                        this.message = evt.target.tagName;
                    }
                }
            }
        });
    </script>
</body>
</html>

內(nèi)聯(lián)處理器中的方法

可在內(nèi)聯(lián)JS語句中調(diào)用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo('hello')">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(msg){
                    if(msg){
                        this.message = msg;
                    }
                }
            }
        });
    </script>
</body>
</html>

若需在內(nèi)聯(lián)語句處理器中訪問原始的DOM事件献幔，可用特殊變量$event將其傳入方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  />
</head>
<body>
    <div id="app" class="container">
        <h1 class="page-header">VUE</h1>
        <div class="input-group">
            <input type="text" class="form-control" v-model="message"/>
            <span class="input-group-btn">
                <button class="btn btn-default" v-on:click="todo('hello',$event)">todo</button>
            </span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                message:''
            },
            methods:{
                todo:function(msg,evt){
                    if(evt){
                        evt.preventDefault();//訪問原生事件對象
                    }
                    this.message = msg;
                }
            }
        });
    </script>
</body>
</html>

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常用的需求。盡管可在方法中輕松實現(xiàn)涝影，更好的方式是：方法只是純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細(xì)節(jié)争占。

為解決此問題燃逻，v-on提供了事件修飾符，修飾符是由點開頭的指令后綴來表示臂痕。

.stop 阻止事件繼續(xù)傳播
.prevent 不再重載頁面
.capture 使用時間捕獲模式
.self 當(dāng)前元素自身時觸發(fā)
.once

<a v-on:click.stop="doStop">阻止單擊事件繼續(xù)傳播</a>

<form v-on:submit.prevent="doPrevent">提交事件不再重載頁面</form>

<a v-on:click.stop.prevent="doThis">修飾符可串聯(lián)</a>

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

<div v-on:click.capture="doCapture">
添加事件監(jiān)聽器時使用時間捕獲模式伯襟，即元素自身觸發(fā)的事件先在此處出處理，然后才交由內(nèi)部元素進(jìn)行處理握童。
</div>

<div v-on:click.self="doThat">
僅當(dāng)event.target是當(dāng)前元素自身時觸發(fā)處理函數(shù)姆怪，即事件不是從內(nèi)部元素觸發(fā)的。
</div>

使用修飾符時澡绩，順序很重要稽揭。相應(yīng)的代碼會以同樣的順序產(chǎn)生，因此用@click.prevent.self會阻止所有點擊肥卡，而@click.self.prevent只會阻止對元素自身的點擊溪掀。

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

不想其它只能對原生的DOM事件起作用的修飾符，.once修復(fù)符還能被用到自定義的組件事件上步鉴。

<div v-on:scroll.passive="onScroll">...</div>

Vue為修飾符額外提供了.passive修飾符來提升移動端的性能揪胃。例如在滾動時瀏覽器會在整個事件處理完畢后再觸發(fā)滾動，因為瀏覽器并不知道這個事件是否在其他處理函數(shù)中被調(diào)用了event.preventDefault()唠叛。.passive修飾符用來進(jìn)一步告訴瀏覽器此事件的默認(rèn)行為不會被取消只嚣。

不要把.passive和.prevent一起使用，被動處理函數(shù)無法阻止默認(rèn)的事件行為艺沼。

按鍵修飾符

在監(jiān)聽鍵盤事件時册舞，需檢查常見的鍵值。Vue允許為v-on在監(jiān)聽鍵盤時添加按鍵修飾符：

# 當(dāng)keyCode為13是調(diào)用vm.submit()
<input v-on:keyup.13="submit" />
# 別名
<input v-on:keyup.enter="submit" />
# 縮寫語法
<input @keyup.enter="submit" />

按鍵別名

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

通過全局config.keyCodes對象自定義按鍵修飾符別名：

Vue.config.keyCodes.f1 = 112

可將keyboardEvent.key暴露的任意有效按鍵名轉(zhuǎn)換為kebab-case來作為修飾符：

# 當(dāng) `$event.key==='PageDown'`時被調(diào)用
<input @keyup.page-down="onPageDown">

系統(tǒng)修飾符

系統(tǒng)修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才出發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器

.ctrl
.alt
.shift
.meta

# Alt + C
<input @keyup.alt.67="clear">

# Ctrl + Click
<div @click.ctrl="todo">do something</div>

修飾鍵與常規(guī)按鍵不同障般，在和keyup事件一起使用時调鲸，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。即只有在按住Ctrl的情況下釋放其它按鍵挽荡，才能觸發(fā)keyup.ctrl藐石，而淡淡釋放ctrl也不會觸發(fā)事件。