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

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

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

  • 前言
  • 事件对象
    • event对象


前言

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


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

事件对象

event对象

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


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

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


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
    <script src="Vue/vue-2.4.0.js">script>
head>
<body>
<div id="app">
    <button type="button" @click="show2(123)">show2button>
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来实现, eventevent可以出现在参数的任意位置


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
    <script src="Vue/vue-2.4.0.js">script>
head>
<body>
<div id="app">
    <button type="button" @click="show3(123,$event)">show3button>
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。

你可能感兴趣的:(vue.js,vue.js)