VUE学习：vue基础06————VUE语法对内容处理：event事件对象

最新推荐文章于 2024-02-08 15:43:53 发布

北凉冬

最新推荐文章于 2024-02-08 15:43:53 发布

阅读量207

点赞数

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

本文链接：https://blog.csdn.net/GAlbinus/article/details/117092225

版权

vue.js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础06————VUE语法对内容处理：event事件对象

VUE学习：VUE学习：vue基础06————VUE语法对内容处理：event事件对象

前言
事件对象
- event对象

前言

本文继续学习VUE语法对内容的处理。

提示：以下是本篇文章正文内容，下面案例可供参考

事件对象

event对象

直接调用的未传参方法，方法中默认会有第一个参数传递进去，就是event对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="Vue/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="show">show</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            show(e){
                console.log(e);
            },
        }
    });
</script>
</html>

调用方法时传参，则会导致默认的event对象消失

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="Vue/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="show2(123)">show2</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            show2(e){
                console.log(e);
            },
        }
    });
</script>
</html>

调用方法时需要同时传递参数和event对象是，使用关键字 $e v e n t 来实现，$ event可以出现在参数的任意位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="Vue/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="show3(123,$event)">show3</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            show3(num,e){
                console.log(num);
                console.log(e);
            },
        }
    });
</script>
</html>

特别注意：

1、vue中使用event对象时，禁止使用event这个词表示event对象

2、禁止使用**console.log(event); **

因为不够兼容，禁止使用，此处的event对象是封装在window对象中的，属于原生js的使用，vue对event对象有进一步的封装，尽量不要使用原生event。

北凉冬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础06————VUE语法对内容处理：event事件对象

提示：本文为VUE栏目：VUE学习：vue基础06————VUE语法对内容处理：event事件对象VUE学习：VUE学习：vue基础06————VUE语法对内容处理：event事件对象前言事件对象event对象前言本文继续学习VUE语法对内容的处理。提示：以下是本篇文章正文内容，下面案例可供参考事件对象event对象直接调用的未传参方法，方法中默认会有第一个参数传递进去，就是event对象<!DOCTYPE html><html lang="zh-CN">&
复制链接

扫一扫