vue——事件处理、事件修饰符、键盘事件

最新推荐文章于 2024-09-24 01:58:55 发布

h_jQuery

最新推荐文章于 2024-09-24 01:58:55 发布

阅读量362

点赞数 1

分类专栏： es6 Vue javascript 文章标签： vue vue.js js javascript

本文链接：https://blog.csdn.net/h_jQuery/article/details/119777402

版权

javascript 同时被 3 个专栏收录

124 篇文章 0 订阅

订阅专栏

Vue

87 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

事件处理

基本使用：

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2.事件的回调需要配置在methods对象中（触发了某个事件，就会调用其回调函数。回调函数：由我们声明创建，但不由我们调用），最终会在vm上显示

3.methods中配置的函数，不要用箭头函数，否则this就不是指向vm（vue实例）

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

5.@click="函数名"和@click="函数名()"效果一样，但后者可以传参

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h1>{{name}}</h1>
        <!-- <button v-on:click="fn">点击有惊喜</button> -->
        <button @click="fn">点击有惊喜</button>
        <!-- $event是特定的参数，指当前对象，就是event -->
        <button @click="fnc($event,6666)">点击有惊喜</button>

    </div>
    <script>
        Vue.config.productionTip = false;
        // 受vue管理的函数最好不要使用箭头函数
        new Vue({
            el: "#root",
            // 在data里面的数据才会做数据劫持
            data() {
                return {
                    name: "张三"
                }
            },
            // methods里面的函数也会跑到vm上，但是这个不是数据代理的原理
            methods: {
                // event的当前的事件对象
                fn(event) {
                    // alert("你是猪吗？")
                    // console.log(event.target.innerText);
                    // 这里的this指向vm（vue的实例对象）
                    console.log(this);
                },
                fnc(event, num) {
                    console.log(event);
                    console.log(num);
                }
            }
        })
    </script>
</body>

</html>

事件修饰符

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

一个事件可以写多个修饰符，一个事件有同样的多个修饰符，但由于修饰符的位置不同，执行的过程也不同，但结果是一样的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: darkblue;
        }
        
        .inner {
            width: 100px;
            height: 100px;
            background: darkgoldenrod;
            margin: 0 auto;
        }
        
        .list {
            width: 50px;
            height: 100px;
            border: 1px solid lavenderblush;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="root">
        <!--修饰符可以连续写，如.stop.prevent-->
        <!--.stop.prevent和.prevent.stop.prevent的执行流程不一样，但是结果是一样的-->
        <h1>{{name}}</h1>
        <!-- 阻止默认事件2.0：.prevent -->
        <a href="https://www.baidu.com" @click.prevent="func">百度</a>
        <!-- 阻止事件冒泡2.0 -->
        <!-- 事件冒泡：父子都添加了同一个事件，子级触发该事件时，会往上冒，导致也会触发父级的时间 -->
        <!-- <div class="box" @click="func">
            <div class="inner" @click.stop="func">

            </div>
        </div> -->
        <!-- 事件只触发一次 -->
        <button @click.once="func">点击有惊喜</button>
        <!-- 从捕获阶段到冒泡阶段，但是最后触发的冒泡事件 -->
        <!-- 捕获是从父级到子级；冒泡是子级到父级 -->
        <div class="box" @click.capture="fun(1)">
            <div class="inner" @click="fun(2)">
                <!-- 未添加.capture前，点击子级div会先输出2，后输出1，添加之后就先输出1后输出2 -->
            </div>
        </div>
        <!-- @scroll是滚动条发生移动事件的滚动 -->
        <!-- @wheel是鼠标滚轮的滚动事件（直接拉滚动条移动不会触发事件） -->
        <ul @wheel="fn" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    name: "张三"
                }
            },
            methods: {
                func(e) {
                    // 阻止默认事件1.0
                    // e.preventDefault();
                    // 阻止事件冒泡1.0
                    // e.stopPropagation();

                    alert('你好，' + this.name)
                },
                fun(num) {
                    console.log(num);
                },
                fn() {
                    console.log("滚动条");
                }
            }
        })
    </script>
</body>

</html>

键盘事件

1.vue中常用的按键别名

回车：enter

删除：dalete（捕获"Backspace"和"Delete"键）

退出：esc

空格：space

换行：tab（特殊，这个需配合keydown事件才有效）

上：up

下：down

左：left

右：right

2.Vue未提供别名的按键，可以使用按键原始的key值(按键名)去绑定，但注意要转为kebab-case（短横线命名，如CapsLock键要写成caps-lock）

3.系统修饰符（用法特殊）：crtl、alt、shift、meta(window键)

3.1配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

3.2配合keydown使用：整除触发事件

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCode.自定义键名=键码，可以去定制按键别名；不推荐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 姓：<input type="text" v-model:value="firstName"> 名：
        <input type="text" v-model:value="lastName"> -->
        <!-- 只单独写@keyup这个而已，只要按键一起，就会触发showVal，添加.enter，按键输入之后按下回车弹起之后就会触发showVal -->
        <!-- CapsLock键要写成caps-lock,写成CapsLock则无效 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showVal"> -->
        <!-- 需要ctrl键与其他按键合作，同时按下ctrl键与其他按键之后才会触发 showVal-->
        <!-- 如：同时按下ctrl和enter后，才会触发showVal -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showVal"> -->
        <!-- 当ctrl和y同时按下时才会触发showVal -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showVal"> -->
        <input type="text" placeholder="按下回车提示输入" @keyup.ok="showVal">

    </div>
    <script>
        Vue.config.productionTip = false;
        // 给按键设置别名
        // 按键编码13是enter键，所以ok就是定义了一个别名键
        Vue.config.keyCodes.ok = 13
        new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三"
            },
            methods: {
                showVal(e) {
                    // e.keyCode：按键编码
                    console.log(e.keyCode);
                    // e.key：按键的名字
                    console.log(e.key);
                    // 输入框的内容
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>

</html>