首页 > 其他分享 >10_事件处理阶段

10_事件处理阶段

时间:2022-10-26 08:35:28浏览次数:80  
标签:事件处理 vue methods 10 name 实例 阶段 事件 函数

v-on指令

语法

v-on:xxx

这里的xxx指代的是各类事件类型,例如单击,双击,鼠标悬停,键盘监听等等......

准备工作

准备一个容器,两个按钮,一个按钮不传递参数,另一个按钮传递参数

<body>
    <!-- 创建一个容器 -->
    <div class="subject">
        <!-- 标题 -->
        <h1>欢迎您!{{name}}</h1>
        <!-- 无参事件 -->
        <button v-on:click="WellcomeTo1">无参事件</button>
        <!-- 有参事件-简写 -->
        <button @click="WellcomeTo2(66,name,$event)">有参事件</button>
    </div>
</body>

构建vue实例对象

var vm = new Vue({
        el: '.subject',
        data: {
            name: 'wavesbright'
        },
        methods: { // 配置项methods,用来配置vm实例当中的方法
            // 建议用普通函数的形式书写,不要使用箭头函数
            WellcomeTo1() {
                
            },
            WellcomeTo2(number,name,e) {
             
            },
        }
    });

关于methods

vue实例当中的一个配置项,用来配置vue实例对象当中函数

在vue当中建议使用普通函数的方式,不要使用箭头函数,因为this的指向会发生改变

现在虽然没什么关系,但是以后掌握的内容多起来了会有点不好理解

小demo

设置点击事件 == 无参事件

该事件当中不传递参数,只是表现在vue当中,如何给DOM元素配置事件

methods: { // 配置项methods,用来配置vm实例当中的方法
    // 建议用普通函数的形式书写,不要使用箭头函数
    WellcomeTo1() {
        alert('触发了第一个无参事件')
    },
}

测试一下

image-20221022165657392

event的复习

我们对WellcomeTo1方法修改一下,我们让其接受一个参数event,并在控制台打印

image-20221022170101996

image-20221022170139053

  1. event是一个事件源对象,默认传递的一个对象
  2. 该事件源对象在js原生当中经常使用
  3. 我们经常使用到的有 event.target == 帮助你拿到这个事件挂载的DOM元素
    • image-20221022170322318
    • image-20221022170352170

设置点击事件 == 有参事件

这里是对无参事件1的一个提升,我们传递了三个参数

methods: { // 配置项methods,用来配置vm实例当中的方法
    // 建议用普通函数的形式书写,不要使用箭头函数
    WellcomeTo2(number,name,e) {
        alert('触发了第2个有参事件')
        console.log(number,name,e);
    },
}

我们先看一下该点击事件对应的DOM元素

image-20221022170534880

  1. 在 模板语法 当中,讲过,模板语法分为两类
    1. 插值语法 {{}}
    2. 指令语法 v-xxx
  2. 他们俩都是可以识别 js表达式的
  3. 66属于这个范畴
  4. 而name,不是普通的字符串,在vue当中会去解析这个name,如果在vue实例对象身上挂在了这个属性,那么就可以解析,否则就不行(会报错)
    • image-20221022171059604
  5. 最后一个 event,是通过占位符($)进行获取的

是否做了数据代理?

验证

image-20221022171619964

为什么

  1. name做数据代理,因为从根上讲 name来自于data
  2. 数据代理数据代理,目的是让你的数据能够跑到页面上去
  3. 而这俩,就是个方法而已,供别人调用的,它要做什么数据代理
    • image-20221022171817093

思考

  • 这两个函数与name是同一级别的
  • 说明,一定有一个与_data一样的属性(配置项)挂载在vue实例上,是 _methods吗
    • 好像没有,是直接挂上去的
  • 那我也可以将这俩函数作为一个属性挂载在data上嘛,我们来试试
    • image-20221022172127488
    • image-20221022172149960

解析

  • 确实可以挂载到data上面,功能也能正常实现
  • 但是 看看当下的vue实例呢
    • image-20221022172308917
  • 这个函数,方法,被做了数据代理,既然做了代理,那么一定有一个get和set来服务它
    • image-20221022172339346
  • 还是回归到原始问题,有必要吗,你这个函数是用来给别人调用的,不是给别人改的
  • 人家的methods配置项是有意义的

总结

事件的基本使用

  1. 使用 v-on:xxx或者@xxx 来为DOM元素绑定事件,xxx是事件名称
  2. 事件的回调函数需要配置在 配置项 === methods当中,最终这个回调函数会挂载在 vm上
  3. methods中的函数,不要使用箭头函数否则this会改变指向非箭头函数下this的默认指向的是vue实例或者组件对象,使用箭头函数this指向的是window
  4. methods中配置的函数,都是被 vue所管理的函数,this指向的是vm或者这个组件的实例对象
  5. 关于参数传递
    1. 无参
      • @click=“name” 等价于 @click=name($event)
    2. 有参
      • @click=name($event,js表达式,vm身上的属性)
      • image-20221022170534880

标签:事件处理,vue,methods,10,name,实例,阶段,事件,函数
From: https://www.cnblogs.com/wavesbright/p/16827040.html

相关文章

  • 10.25.2
    #include<stdio.h>#include<math.h> intmain(){/* inta,b; scanf("%*6d%4d%*8d%d",&a,&b); printf("%d",b-a);*/ doublea; scanf("%lf",&a); printf("%d,%.10g......
  • 2022-10-25学习内容_step01
    1.案例-找回密码-登录界面1.1activity_login_main.xml<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/and......
  • 2022.10.25
    2022.10.25水群只有一次和无数次,呜呜呜呜呜。以后没有人@我,绝不去水群。该水还是要水的。关于我的电脑累了想休息一下这件事。吓傻了。哦!我上午干了什么?写贪心?写二分......
  • 想说的话2022/10/25
    今年遇到了许多不大不小的事情,考研、复试、调剂、尝试找工作、毕业、实习、上研究生......人生确实如梦,每件事情看似都重要,现在去想想又没有那么重要。​今年伊始我怀着......
  • [2022.10.25]常用类—String
    intlength():返回字符串的长度:returnvalue.LengthcharcharAt(intindex):返回某索引处的字符returnvalue[index]booleanisEmpty():判断是否是空字符串:returnvalue......
  • 建立自己的知行系统_01_20221025
    知行合一,事事才能顺遂。1.进行验证测试计划前,测试系统的架构和测试样品的状态需二次确认,避免发生接错(比如今天正负极接反导致模块短路就可以避免)或测试样品存在问题。2.......
  • 10.25
    #include<stdio.h>#definePI3.1415926intmain(){ /*doublea; scanf("%lf",&a); printf("%.2f",PI*a/180);*/ inta; floatb; scanf("%d",&a); if(a<=3) pri......
  • 闲话 22.10.25
    闲话今天又抱泠了(文件:sandalphon*.in/out;lambentlight*.in/out;excalibur*.in/outsoytony:这种nb文件名直接敲错我:这文件名显然是打不错的(然后T2光荣地打成了lamber......
  • vue2- style 和class - 条件渲染 - 列表渲染 - v-for 循环,数组,循环字符串,数字,对象 -
    style和class条件渲染列表渲染v-for循环,数组,循环字符串,数字,对象数组的检测与更新双向数据绑定事件处理过滤案例事件修饰符按键修饰符1.style和class<!DOCT......
  • PAT 乙级 1046 划拳 (15分)
    1046划拳(15分)划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的......