Vue.js的核心学习笔记 - 第九章事件处理与修饰符

前言

Vue.js的数据渲染我们学完了，今天我们来学习一下事件处理把！

基础事件处理

事件处理使用的命令是：v-on:事件类型="方法" or @事件类型="方法"
例： v-on:click="clickTest" 触发点击事件方法

不明白，我们来看看一个小demo

demo

DOM

    <div id="app">
        <button @click="basicEvent">basic Button</button>
        <button @click="domBasicEvent">domBasic Button</button>
        <button v-on:click="sayMsg('你好，这是SayMsg()')">sayMsg()</button>
        <button v-on:click="sayFunction('sayEvent',$event)">sayFunction() </button>
   <div>

js

    var vue = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            // 基础事件处理
            basicEvent: function () {
                console.log("Basic Event Log");
            },
            domBasicEvent: function (event) {
                // event -> 原生DOM中的事件
                console.log(event.target.tagName);
            },
            sayMsg: function (msg) {
                console.log("Msg: " + msg);
            },
            // event 原生DOM
            sayFunction: function (msg, event) {
                alert(msg);
                if (event) {
                    console.log("原生DOM Event");
                    event.preventDefault();
                }
            }

        }
    })

以上我们使用到了Methods属性，事件常用的一些方法都是在里面定义，我们的function支持传参，传Event的话则是DOM事件,其他则是自定义参数。

事件修饰符

本次教程的重中之重 ,修饰符在Vue中的事件处理非常重要，能提供很大的优化性以及拓展性，接下来给大家逐步分析一下！

事件修饰符
使用方式：v-on:事件类型.修饰符="方法"
我们先来认识一些简单的修饰符吧！

• stop(停止事件继续传播)
• prevent(停止事件处理)
• capture(事件捕获器)
• self(自身事件，而非DOM事件)
• once(无论触发多少次事件，只执行一次)
• passive(“在执行指定事件前触发默认DOM内部事件”)

不明白用法？，我们直接看Demo``

demo

DOM

        <div class="modifier_test">
            <!-- stop阻止事件继续传播 -->
            <button v-on:click.stop="modifierMethod">Stop Modifier_test</button>
            <!-- 不再执行原生效果 -->
            <button v-on:click.prevent="preventModifier">prevent Modifier_test</button>
            <!-- 串联 -->
            <button v-on:click.stop.prevent="modifierDemo">Modifier_Demo</button>
            <!-- 捕获器 -->
            <button v-on:click.captrue="captureModifier()">captureButton </button>
            <button v-on:click.self="selfModifier">selfModifier</button>
            <button v-on:click.once="onceModifier">once</button>

            <!-- 立即触发，而不等事件出发 -->
            <button v-on:click.passive="passiveModifier">passive立即触发</button>
        </div>

js

    var vue = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            // 基础事件处理
            basicEvent: function () {
                console.log("Basic Event Log");
            },
            domBasicEvent: function (event) {
                // event -> 原生DOM中的事件
                console.log(event.target.tagName);
            },
            sayMsg: function (msg) {
                console.log("Msg: " + msg);
            },
            // event 原生DOM
            sayFunction: function (msg, event) {
                alert(msg);
                if (event) {
                    console.log("原生DOM Event");
                    event.preventDefault();
                }
            },
            modifierMethod: function () {
                console.log("修饰符Method")
            },
            preventModifier: function () {
                console.log("prevent Method")
            },
            modifierDemo: function () {
                console.log("串联Demo")
            },
            captureModifier: function () {
                console.log("事件捕获模式")
            },
            selfModifier: function () {
                console.log("SelfModifier 自身事件不涉及内部元素触发")
            },
            onceModifier: function () {
                console.log("只执行一次！")
            },
            passiveModifier: function () {
                console.log("passiveModifier 事件")
            }

        }
    })

可以复制下来跑到自己的html文件中测试。

按键修饰符和系统修饰符

按键修饰符分为两种：系统修饰符和按键修饰符
说起按键，家喻户晓的Javascript中有着按键事件，当然在Vue中也是必不可少，也是进行一定简化操作的。

我们先来认识一下按键修饰符

按键修饰符

使用方法：v-on:keyup.按键类型="事件方法"

例： v-on:keyup.enter= "enterFunction"

还可以支持键码：v-on:keyup.65 = "aFunction" 按下A键触发

demo

dom:

        <div class="key_modifier">
            <input v-on:keyup.65="KeyCodeMethod" />
            <!-- 
                .enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right


             -->
            <input v-on:keyup.enter="KeyCodeMethod" />



        </div>

js

            // 按键方法
            KeyCodeMethod: function () {
                console.log("KeyCodeMethod 事件")
            },
            mouseMethod: function()
            {
                console.log("mouse 事件")
            }

还可以自定义键码代号：

    // 绑定test = 65
    Vue.config.keyCodes.test = 65;
    

使用方法：v-on:keycode.test即可

系统修饰符

系统修饰符按键和上方按键修饰符差不多，系统修饰符可以组合键。
例如：执行Ctrl+A

demo

html

             <!-- Ctrl + A -->
            <input v-on:keyup.ctrl.test="KeyCodeMethod">


            <!-- 
			可选
                .ctrl
    			.alt
    			.shift
				.meta
             -->
            <input v-on:keyup.click.test = "KeyCodeMethod">

            <input v-on:click.ctrl.exact="KeyCodeMethod">

js

            // 按键方法
            KeyCodeMethod: function () {
                console.log("KeyCodeMethod 事件")
            },
            mouseMethod: function()
            {
                console.log("mouse 事件")
            }

exact修饰符值得一提，以上系统按键方式的话，在Ctrl+Shiift+A 也会触发。而加上exact修饰符则再Shift+Ctrl则不会触发。

鼠标修饰符

鼠标修饰符，监听鼠标点击类型，支持中键、左键、右键点击触发
例：v-on:click.right="方法" 则右键该元素触发相应方法。

demo

html

<!-- 鼠标控制 -->
        <div class="mouse_test">
            <input v-on:click.right="mouseMethod">
        </div>

js

            // 按键方法
            KeyCodeMethod: function () {
                console.log("KeyCodeMethod 事件")
            },
            mouseMethod: function()
            {
                console.log("mouse 事件")
            }

结束语

• 本人所有作品内容纯原创，转载需标明出处，否则必究！
• 对于Vue其他内容可以看看我的 序章
• 感谢你的观看，帮到你的请给我点赞谢谢！
• 若有不足之处，欢迎评论区指出！