How to implement vuejs event monitoring

In vuejs, you can use the "v-on" instruction to implement event monitoring. This instruction is used to bind event listeners; you only need to add "v-on: event parameter="event" in the label template To process the function "" statement, use JavaScript to set the code that needs to be executed when triggered.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

After the template rendering is completed, event binding and monitoring can be performed. The v-on directive is used to monitor DOM events and is usually used directly within the template.

<button v-on:click="say">Say</button>

Method and inline statement processor

Bind the method in the strength option attribute methods through v-on as the event handler , v-on: The post-parameter accepts all native event names.

    <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 abbreviation: @. @click="say"

v-on supports inline JavaScript statements, but only one statement.

    <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);
            }
        }
    })

When directly binding methods functions and inline JavaScript to rooms, you may need to obtain the native DOM event object

   <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);
            }
        }
    })

You can bind multiple identical elements through v-on Event functions are executed sequentially.

Event modifiers

1. .stop: Call event.stopPropagation().

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

2. .prevent :Call 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: Use capture mode to add event listeners.

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

4. .self: The callback is only triggered when the event is triggered from the listening element itself.

   <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

5. .once:

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

When using modifiers, the order is important; the corresponding codes will be generated in the same order. Therefore, using @click.prevent.self will prevent all clicks, while @click.self.prevent will only prevent clicks on the element.

   //例子
    var vm = new Vue({
        el: '#app',
        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>

Key value modifier

When listening to keyboard events, you need to monitor common key values.

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

It is difficult to remember all the keyCide, so Vue provides aliases for the most commonly used keys.

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

.enter
.tab
.delete (capture the "Delete" and "Backspace" keys)
.esc
.space
.up
.down
.left
.right
You can customize the key value modifier alias through the global config.keyCodes object :

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

Differences from traditional event binding

1. No need to manually manage events. When the ViewModel is destroyed, all event handlers are automatically deleted, freeing us from getting DOM bound events and then unbinding them under specific circumstances.

2. Decoupling. ViewModel code is purely logical code and has nothing to do with DOM, which is helpful for us to write automated test cases.

vue.extend()

In order to reuse sub-components, vue.js provides the Vue.extend(options) method, which creates the "basic Vue constructor" Subclass", the parameter options object is basically the same as the directly declared Vue instance parameter object.

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

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to implement vuejs event monitoring. For more information, please follow other related articles on the PHP Chinese website!