vuejs事件監聽怎麼實現

青灯夜游
發布: 2023-01-11 09:22:32
原創
3430 人瀏覽過

在vuejs中,可以使用「v-on」指令來實作事件監聽,該指令用來綁定事件監聽器;只需要在標籤範本中加入「v-on:事件參數="事件處理函數"」語句,使用JavaScript設定觸發時需要執行的程式碼即可。

vuejs事件監聽怎麼實現

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

當模板渲染完成之後,就可以進行事件的綁定與監聽。 v-on指令用來監聽DOM事件,通常在範本內直接使用。

<button v-on:click="say">Say</button>
登入後複製

方法及內嵌語句處理器

#透過v-on綁定實力選項屬性methods中的方法作為事件的處理器,v-on:後參數接受所有的原生事件名稱。

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })
登入後複製

v-on縮寫形式:@。 @click="say"

v-on支援內嵌JavaScript語句,但僅限是一個語句。

    <button v-on:click = "sayFrom(&#39;from param&#39;)">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + &#39;&#39; + from);
            }
        }
    })
登入後複製

在直接綁定methods函數和內聯JavaScript與居室,都有可能需要獲取原生DOM事件對象

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //这样写获取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })
登入後複製

同一個元素上可以透過v-on綁定多個相同事件函數,執行順序為順序執行。

事件修飾符

1、.stop:呼叫event.stopPropagation().

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
登入後複製

2、.prevent :呼叫event.preventDefault().

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
登入後複製

3、.caputure:使用capture模式新增事件監聽器。

  <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
登入後複製

4、.self:只當事件是從監聽元素本身觸發時才觸發調回。

   <!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
登入後複製

5、.once:

 <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
登入後複製

使用修飾符時,順序很重要;對應的程式碼會以同樣的順序產生。因此,用 @click.prevent.self 會阻止所有的點擊,而 @click.self.prevent 只會阻止元素上的點擊。

   //例子
    var vm = new Vue({
        el: &#39;#app&#39;,
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代码
    <div v-on:click="say(&#39;click from inner&#39;)" v-on:click.self="saySelf(&#39;click from self&#39;)">
        <button v-on:click="saySelf(&#39;button click&#39;)">button</button>
        <button v-on:click.stop="saySelf(&#39;just button click&#39;)">button</button>
    </div>
登入後複製

鍵值修飾符

在監聽鍵盤事件時,需要監控常見的鍵值。

    <input v-on:keyup.13 = "submit" />  //监听input的输入,当输入回车时触发submit函数。
登入後複製

記住所有的keyCide比較困難,所以Vue為最常用的按鍵提供了別名。

    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">
登入後複製

.enter
.tab
.delete(捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right
可以透過全域config.keyCodes物件自訂鍵值修飾符別名

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112
登入後複製

與傳統事件綁定的差異

1.無需手動管理事件。 ViewModel被銷毀時,所有的事件處理器都會自動被刪除,讓我們從取得DOM綁定事件然後在特定情況下再解脫這樣的事情中解脫出來。

2.解耦。 ViewModel程式碼是純粹的邏輯程式碼,和DOM無關,有利於我們寫自動化測試案例。

vue.extend()

為了重複使用的子元件,vue.js提供了Vue.extend(options)方法,建立基礎Vue建構器的“子類別”,參數options物件和直接聲明Vue實例參數物件基本上一致。

    var Child = Vue.extend({
        teplate:&#39;#child&#39;, //不同的是,el和data选项需要通过函数返回值赋值,避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component(&#39;child&#39;,child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式
登入後複製

相關推薦:《vue.js教學

以上是vuejs事件監聽怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板