本文仅用作简单记录

ref : 在标签上添加 ref = “name” ,表示获取当前元素节点

<input type="text" ref="info">

获取

this.$refs.info.value

  

获取事件对象 , 方法参数传递  $event

<button @click="Event($event)">事件对象</button>

获取

 Event(e){
console.log(e)
}

打印结果:

也可以获取执行事件的节点

e.srcElement

比如,我想给 button 按钮 添加背景颜色

e.srcElement.style.backgroundColor = "red"

也可以通过事件对象获取自定义属性:

比如,button 按钮上自定义一个属性:

<button data-aid="123" @click="getInfo($event)">通过事件对象获取自定义属性</button>
  getInfo(e){
console.log(e);
console.log(e.srcElement.dataset.aid)
}

结果:

vue 笔记,ref 及 $event 事件对象的更多相关文章

  1. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  2. trigger()的event事件对象之坑

    问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...

  3. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  4. Python多线程-Event(事件对象)

    Event 事件对象管理一个内部标志,通过set()方法将其设置为True,并使用clear()方法将其设置为False.wait()方法阻塞,直到标志为True.该标志初始为False. 方法: i ...

  5. 第53天:鼠标事件、event事件对象

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  6. event事件对象

    事件对象event: 在触发DOM事件的时候都会产生一个对象 1.type:获取事件类型 2.target:获取事件目标 3.stopPropagation():组织事件冒泡 4.preventDef ...

  7. event事件对象和clientX,clientY

    一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须 ...

  8. jquery之event与originalEvent的关系、event事件对象用法浅析

    在jquery中,最终传入事件处理程序的 event 其实已经被 jQuery 做过标准化处理, 其原有的事件对象则被保存于 event 对象的 originalEvent 属性之中, 每个 even ...

  9. (转)内核线程对象--Event事件对象

    在所有的内核对象中,事件内核对象是个最基本的对象.事件能够通知一个操作已经完成. 客户机和一个服务器,它们之间需要互相进行通信例子(vs2008 ) 事件内核对象的组成 一个使用计数(与所有内核对象一 ...

随机推荐

  1. C++构造函数异常(二)

    继续上一篇文章提到的构造异常话题,下面继续谈另外两个场景,即多继承构造异常,以及智能指针构造异常 第3:对多继承当中,某个基类构造异常,而其他基类已构造成功,则构造成功的基类不会析构,由编译器负责回收 ...

  2. Haproxy+ssl+nvm+forever

    1 nvm介绍 NVM(Node version manager)顾名思义,就是Node.js的版本管理软件,可以轻松的在Node.js各个版本间切换,项目源码在GitHub: #安装git客户端 [ ...

  3. Eureka 系列(04)客户端源码分析

    Eureka 系列(04)客户端源码分析 [TOC] 0. Spring Cloud 系列目录 - Eureka 篇 在上一篇 Eureka 系列(01)最简使用姿态 中对 Eureka 的简单用法做 ...

  4. 数据转化之JSON

    1.定义:Json(JavaScript Object Notation)是一种轻量级的数据教换模式,简单来说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结 ...

  5. USACO 2014 US Open Fair Photography /// 技巧

    题目大意: 给定n头奶牛 给定n头奶头所在位置和品种 品种只有G H两种 求一段区间的长度 要求区间内包含的品种满足各品种的数量相同 将一个品种的值设为1 另一个设为-1 假设 i<j 而 1~ ...

  6. zabbix--External checks 外部命令检测

    概述zabbix server 运行脚本或者二进制文件来执行外部检测,外部检测不需要在被监控端运行任何 agentditem key 语法如下: 参数 定义 script shell 脚本或者二进制文 ...

  7. Spring学习笔记(7)——Bean的基本配置

            先从IOC说起,这个概念其实是从我们平常new一个对象的对立面来说的,我们平常使用对象的时候,一般都是直接使用关键字类new一个对象,那这样有什么坏处呢?其实很显然的,使用new那么就 ...

  8. 停止node进程

    运行vue-cli项目的时候经常出现端口号占用,npm run dev报错的信息, 此时可通过任务管理器粗暴的杀死node进程,也可以通过cmd检测占用某个端口的程序,进而杀死该进程,步骤如下: 1. ...

  9. CICS FILE OPEN

    CEMT I CECD V FILE() GROUP() CEDA check error log in JESYSMSG FILE OPEN/CLOSE STATUS CICS ACTION res ...

  10. Gabor滤波器的理解

    搬以前写的博客[2014-02-28 20:03] 关于Gabor滤波器是如何提取出特征点,这个过程真是煎熬.看各种文章,结合百度.文章内部的分析才有一点点明白. Gabor滤波器究竟是什么?   很 ...