官网给出的解释是:

    被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

      1.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;

      2.如果用在子组件上,引用就指向组件实例。

    eg: 

      <p ref="p"></p>     //  vm.refs.p    指向 DOM节点

      <child-temp  ref="child"></child-temp>    //  vm.$refs.child    指向子组件

      

    code: 

  上面的实例我们在调用的时候:

     ...

     methods: {

        fg(){

          this.$refs.listGroup.style.color = 'red'       //   可以操作Dom 节点

          console.log(this.$refs.listGroup.length)      //    实例含有v-for  结构,这里操作的就是 遍历的数组了。

        }

      }

    总结:

    使用 $refs 减少了 Dom 操作对页面的性能影响。

       关于js操作dom 对性能影响 可访问: http://www.cnblogs.com/yepbug/p/5427213.html 

      

      1.  当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

      2.  关于ref注册时间的重要说明:

         因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!

         $refs 也不是响应式的,因此不应该试图用它在模版中做数据绑定。

      

vue.$refs 的用法的更多相关文章

  1. $refs的用法及作用

    获取DOM元素,一般用document.querySelector获取这个dom节点,然后在获取input的值 但是用ref绑定之后,就不需要在获取dom节点了,直接在上面的input上绑定input ...

  2. Vue中$refs的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个 ...

  3. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  4. vue.js中ref及$refs的使用及讲解

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注 ...

  5. React笔记_(3)_react语法2

    React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...

  6. React从安装到实战

    建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址  搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...

  7. VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数

    一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...

  8. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  9. uni-app $refs的基本用法

    $refs的基本用法 一个对象(Object),持有注册过 ref 特性 的所有 DOM 元素和组件实例. <template> <view class="containe ...

随机推荐

  1. 12.1.0.2自适应特性导致SQL性能下降

    背景介绍 在升级到12.1.0.2.0数据库版本后,在使用12c中引入的自适应特性默认配置的情况下,可能引起SQL性能的下降. 问题现象升级到12.1.0.2.0后,SQL语句性能可能出现下降. 影响 ...

  2. c/c++面试指导---c语言基础算法总结1

    c语言基础算法总结 1  初学者学习任何一门编程语言都必须要明确,重点是学习编程方法和编程思路,不是学习语法规则,语法规则是为编程实现提供服务和支持.所以只要认真的掌握了c语言编程方法,在学习其它的语 ...

  3. mysql 1055 的错误

    1.Err1055,出现这个问题往往是在执行sql语句时候,在最后一行会出现这个问题. [Err] 1055 - Expression #1 of ORDER BY clause is not in ...

  4. JavaScript编码加密

    网上看到的加密方法: JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,deco ...

  5. px与em的区别,权重的优先级

    px与em的区别,权重的优先级 PX特点:px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.EM特点:1. em的值并不是固定的:2. em会继承父级元素的字体大小. 权重 ...

  6. Python中的not, and, or

    logical_operator_lst = [ ('and 与运算',), ('or 或运算',), ('not 非运算',), ('逻辑运算符的优先级',), ('实例',), ('练习',), ...

  7. [Codeforces958F2]Lightsabers (medium)(思维)

    Description 题目链接 Solution 设一个l指针指向当前数列左边,从左往右扫描一遍,将当前颜色记录, 当所有颜色都得到后,进行判断,如果当前l指向的颜色大于需要的颜色,l后移一位,然后 ...

  8. python基础之面向对象编程介绍、类和对象

    面向对象变成介绍 面向过程编程 核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西.主要应用在一旦完成很少修改的地方,如linux ...

  9. 16 Django-admin管理工具

      admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTAL ...

  10. Quartus 11进行编译Compile Design的时候出现错误near text ã

    1. 设计的工程在Compile Design的时候出现以下的错误,百思不得姐 Error (): Verilog HDL syntax error at div_5.v() near text ã ...