如图，ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.input1)//<input type="text" id="input1">
console.log(document.getElementById('input1'))//<input type="text" id="input1">

这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

ref和v-for在一起的情况

li里的ref的无法读取item里面的值，即item.name或被直接读取为字符串“item.name”，

此时的$refs

 整个用下来就是比较方便取DOM，方便操作DOM

vue中的 ref 和 $refs的更多相关文章

  1. 理解Vue中的ref和$refs

    参考博客:https://www.cnblogs.com/xumqfaith/p/7743387.html

  2. Vue 中的 ref $refs

    ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例 注意:只要想 ...

  3. vue中的ref属性

    1.什么是ref? ref是用于快速定位到dom结构,vue中一般不去操作dom结构,他是数据驱动的.jQuery会疯狂操作DOM {{msg}} mounted(){ let h = this.$r ...

  4. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  5. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  6. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

  7. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  8. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  9. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

随机推荐

  1. Ocelot中文文档-路由

    Ocelot的主要功能是接管进入的http请求并把它们转发给下游服务.目前是以另一个http请求的形式(将来可能是任何传输机制). Ocelot将路由一个请求到另一个请求描述为ReRoute.为了在O ...

  2. C# 数据库链接字符串加密工具

    有些项目尤其是WinForm或者是WPF项目,针对一些工具形式的小项目,不想软件流出去之后,懂程序的的拿到手之后一看配置文件就知道了我们数据库的用户名和密码,如果外网能访问的话,那就麻烦大了.所以这里 ...

  3. node传统读取文件和promise，async await，

    先上传统文件加载方式代码,传统方式在处理多层嵌套时代码比较混乱 const fs = require('fs') //引入文件系统 function readFile (cb) { fs.readFi ...

  4. ArcCore重构-生成%_offset.h文件

    基于官方arc-stable-9c57d86f66be,AUTOSAR版本3.1.5 基本问题   ArcCore中,需要生成asm_offset.h和arch_offset.h这两个头文件,定义着代 ...

  5. 虚拟机中克隆后使用eth0

    1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=mini1 1.修改ip地址以及udev记录网络规则的脚本 在CentOS中,ude ...

  6. Reactor三种线程模型与Netty线程模型

    文中所讲基本都是以非阻塞IO.异步IO为基础.对于阻塞式IO,下面的编程模型几乎都不适用 Reactor三种线程模型 单线程模型 单个线程以非阻塞IO或事件IO处理所有IO事件,包括连接.读.写.异常 ...

  7. Codeforces Round #483 (Div. 2) C. Finite or not?

    C. Finite or not? time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. Urllib库的使用

    一.任务描述   本实验任务主要对urllib库进行一些基本操作,通过完成本实验任务,要求学生熟练掌握urllib库的使用,并对urllib库的基本操作进行整理并填写工作任务报告. 二.任务目标 1. ...

  9. Unity3D学习（一）：简单梳理下Unity跨平台的机制原理

    前言 首先需要了解的是,Unity3D的C#基础脚本模块是通过Mono来实现的. 什么是Mono? 参考下百度百科:Mono是一个由Novell公司(由Xamarin发起)主持的项目,并由Miguel ...

  10. CentOS6.5系统挂载NTFS分区的硬盘

    下载rpmforge,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.rpmforge拥有4000多种CentOS的软件包,被CentOS社区认为是最安全也是最稳定的一个软件仓 ...