vue.$refs 的用法
官网给出的解释是:
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $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. 当 2. 关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!
|
vue.$refs 的用法的更多相关文章
- $refs的用法及作用
获取DOM元素,一般用document.querySelector获取这个dom节点,然后在获取input的值 但是用ref绑定之后,就不需要在获取dom节点了,直接在上面的input上绑定input ...
- Vue中$refs的用法
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个 ...
- vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...
- vue.js中ref及$refs的使用及讲解
关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注 ...
- React笔记_(3)_react语法2
React笔记_(3)_react语法2 state和refs props就是在render渲染时,向组件内传递的变量,这个传递是单向的,只能继承下来读取. 如何进行双向传递呢? state (状态机 ...
- React从安装到实战
建议:初学者看之前请先看一遍菜鸟教程 可以安装一个ATOM编辑器,本人觉得很好用 一.安装并启动项目:网址 搭建好的项目目录为: 二.开始写项目: 1.组件到界面流程: 定义一个组件app.js导出 ...
- VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
- vue里ref ($refs)用法
ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...
- uni-app $refs的基本用法
$refs的基本用法 一个对象(Object),持有注册过 ref 特性 的所有 DOM 元素和组件实例. <template> <view class="containe ...
随机推荐
- django视图层(views)
1.视图层概念 视图函数,其实就是一个简单的函数,它接收web请求并返回web响应(响应的可以是一个html,一个重定向,一个xml文档等等) 每个视图函数都负责返回一个HttpResponse对象. ...
- Raect Router 4 的使用 (1)
本文来自于官方文档,属于意译而非直译 基本组件 React Router 有三种类型的组件,分别是:react-router.react-router-dom.react-router-native ...
- Git工作流指南:功能分支工作流(转)
一旦你玩转了集中式工作流,在开发过程中可以很简单地加上功能分支,用来鼓励开发者之间协作和简化交流. 功能分支工作流背后的核心思路是所有的功能开发应该在一个专门的分支,而不是在master分支上.这个隔 ...
- Python的静态方法和类方法
Python中使用@staticmethod这个装饰器让方法变为静态方法 一:定义 @staticmethod: 首先它是一个装饰器,被装饰的方法不需要隐含的参数,对象和对象的实例都可以调用静态方法 ...
- motto - question - bodyParser.urlencoded 中设置 extended 为 true 和 false 有什么区别吗?
本文搜索关键字:motto node nodejs js javascript body-parser bodyparser urlencoded x-www-form-urlencoded exte ...
- Linux文件服务器实战(虚拟用户)
vsftpd基于系统用户访问ftp服务器,系统用户越多越不利于管理,不利于系统安全,这样就以vsftp虚拟防护的方式来解决. 虚拟用户没有实际的真实系统用户,,而是通过映射到其中一个真实用户以及设置相 ...
- openldap完整版本搭建记录
文档信息 目 的:搭建一套完整的OpenLDAP系统,实现账号的统一管理. 1:OpenLDAP服务端的搭建 ...
- linux 特殊命令(一)
1.ifconfig 网卡配置:ifconfig [网络设备] [参数] 1) up 启动指定网络设备/网卡. 2) down 关闭指定网络设备/网卡.该参数可以有效地阻止通过指定接口的IP信息流, ...
- 【转载】C#批量插入数据到Sqlserver中的三种方式
引用:https://m.jb51.net/show/99543 这篇文章主要为大家详细介绍了C#批量插入数据到Sqlserver中的三种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本篇, ...
- 一件安装lnmp
wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-full.tar.gz && ...