十九. 有关vue事件的一些问题

这不比博人传燃？

已于 2022-04-29 19:46:29 修改

阅读量708

点赞数

分类专栏： vue2 文章标签： vue

于 2022-03-25 19:53:19 首次发布

本文链接：https://blog.csdn.net/HSH541/article/details/123741699

版权

vue2 专栏收录该内容

33 篇文章 9 订阅

订阅专栏

事件

一. 绑定事件指令语法

v-on:
简写形式：@

二. 原生事件举例

1. @click点击事件

（1）语法

v-on:click或@click

（2）事件默认参数

用@click绑定的事件（函数）默认传参为"事件对象。默认传参具体如何使用？举例

1）除默认传参外，不传参的情况

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <button @click="a">八嘎</button>
    </div>
    
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '',
            },
            methods: {
                a(event) {
                    // console.log(event.target);
                    console.log(event);
                }
            }
        })
    </script>
</body>
</html>

event事件对象的一些API

event：事件对象
event.target：指的是触发事件的那个元素
event.target.innerHTML：获取事件触发元素的内容
event.target.id：获取事件触发元素id
event.target.dateset：获取标签的自定义属性和属性
event.target.dateset.属性名：准确获取属性的值，
event.target.checked：

2）除默认传参外，传其他参数的情况

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <button @click="a">八嘎</button></button> -->
        <!-- <button @click="a($event)">八嘎</button></button> -->
        <button @click="a($event,66)">八嘎</button></button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                name: '',
            },
            methods: {
                // a(event) {
                //     // console.log(event.target);
                //     console.log(event);
                // }
                a(event, number) {
                    // console.log(event.target);
                    console.log(event, number);
                }
            }
        })
    </script>
</body>
</html>

**注意：**事件参数若有多个，参数的位置要和下面方法的参数要对应

（3）后续补充：疑问、易错点、知识点

当事件参数只有一个默认参数event时，<button @click="a($event)">八嘎</button>等效于<button @click="a">八嘎</button>
当事件参数只有一个默认参数event时，methods中对应的事件方法中中不传参，也可使用event参数，不要想多，这个event和传参的好像是两个单独的，但是指向都是相同的。也就是说接收参数是什么和event无关，两个都打印相同的对象。看下面的例子：

methods: {
    a(a,b) {
        console.log(b); //打印结果：undefined
        console.log(a); //打印结果：PointerEvent对象
        console.log(event); //打印结果：PointerEvent对象
    }
}

@click的值填的好像是js表达式。一般我们常用到的是填方法名，用其他的不多。举例：

2. @keyup

@keyup 是按键松开的事件，当指定的按键松开会触发的事件。
比如：平台登录页面使用该事件，当输入账号和密码后，直接回车完成登录

@keyup.enter 回车按键松开
@keyup.left 左键松开
@keyup.right 右键松开
@keyup.up 上键松开
@keyup.down 下键松开
@keyup.delete 删除键松开

如果在组件中用，需要使用native
<el-input v-model="name" @keyup.enter.native="search()"></el-input>

链接：https://www.jianshu.com/p/d68cb537724e

三. 自定义事件

事件分原生事件和自定义事件！
自定义事件可用于组件间的通信——子传父
详情看这篇文章：https://blog.csdn.net/HSH541/article/details/123777502

这不比博人传燃？

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
十九. 有关vue事件的一些问题

事件一. 绑定事件指令语法v-on:简写形式：@@click点击事件1. 语法v-on:click或@click2. 事件参数用@click绑定的事件（函数）默认传参为"事件对象。默认传参具体如何使用？举例（1）除默认传参外，不传参的情况<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' cont
复制链接

扫一扫