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事件細節(jié)。

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

  • .stop 阻止事件繼續(xù)傳播
  • .prevent 不再重載頁面
  • .capture 使用時間捕獲模式
  • .self 當前元素自身時觸發(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)部元素進行處理。
</div>

<div v-on:click.self="doThat">
僅當event.target是當前元素自身時觸發(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修飾符用來進一步告訴瀏覽器此事件的默認行為不會被取消。

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

按鍵修飾符

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

# 當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來作為修飾符：

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

系統(tǒng)修飾符

系統(tǒng)修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才出發(fā)鼠標或鍵盤事件的監(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ā)事件。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容