最近在看其他项目的过程中,发现在dom节点上使用了ref="xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目.

这两天项目不忙了,有闲心来看别人做的项目了,就看到这个用法了,还是直接百度,有很多解释,大致的意思就是给dom节点绑定一个值value,将这个value值存储到vue的节点管理器refs中,后续要找到这个节点的话,直接调用$refs.value就可以找到这个节点了,我去,太方便了,傻傻的我之前要么自己写id,然后使用document.getElementById来获取,要么直接用jquery,简直是丧心病狂,为了获取节点方便竟然不惜牺牲性能使用jquery,想想真的太水了.还好及时发现了这个方法,以后还是得多通读官方api文档啊.

vue中refs的使用的更多相关文章

  1. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  2. vue中$refs、$slot、$nextTick相关的语法

    Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 1.$data和$el var data = { a: 1 } var vm = new Vue({ el ...

  3. Vue中$refs的用法

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

  4. vue中\$refs、\$emit、$on的使用场景

    1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...

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

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

  6. vue中$refs、,$emit、$on

    $emit https://blog.csdn.net/sllailcp/article/details/78595077 $on https://www.jianshu.com/p/a544728b ...

  7. vue中 $refs的基本用法

    骚年,我看你骨骼惊奇,有撸代码的潜质,这里有324.57GB的前端学习资料传授于你!什么,你不信??? 先随便看几个图: 肯定没看够.再来个GIF图热个身??? 那么问题来了,如果你也想入坑前端或者学 ...

  8. Vue 中的 ref $refs

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

  9. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

随机推荐

  1. C#学习之Timothy Liu

    原文出自 本文摘录了一些值得学习的地方. 1.对一个程序来说,静态指编辑期.编译期,动态指运行期. 静态时装在硬盘里,动态时装在内存里. 2.反射示例 通过反射获得类的属性和方法. static vo ...

  2. 解决tomcat控制台乱码+清除过期缓存条目后可用空间仍不足 - 请考虑增加缓存的最大空间问题

    一.乱码 1.打开Tomcat的目录,找到conf文件夹,一般修改server.xml中的编码集,改为utf-8即可 2.若server.xml中编码设置的就是utf-8,可以修改logging.pr ...

  3. C# 常用方法——base64字符串转图片

    其他常用方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// base64编码的文本转为图片 / ...

  4. Nowcoder的JS计时器题分析

    题目描述 实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 ...

  5. [CTF]Heap vuln -- unlink

    0x00: 起因 一直在堆的漏洞利用中不得要领,之前ZCTF又是三个堆的利用,血崩,chxx表哥给写了一个heap的pwn,学习学习. 0x01: 关于heap的unlink的漏洞利用,出的很早,在低 ...

  6. Confluence 6.15 附件（Attachments ）宏

    附件宏显示添加到一个页面中的所有文件列表. 同时附件宏允许用户(用户需要具有正确的权限)来进行下面的操作: 直接从列表中上传一个文件到页面 编辑附件属性和标签 删除一个附件文件(这个将会删除文件的所有 ...

  7. Confluence 6 在一个空间中查看所有附加的文件

    有下面 2 种方法可以让你查看空间的所有附件.你可以: 使用 Space Attachments Macro 来在一个页面中显示列表文件. 进入空间后,然后从边栏的底部选择 空间工具(Space to ...

  8. git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题

    在同步本地文件到线上仓库的时候 报错 pre -commit hook failed (add --no-verify to bypass) 当你在终端输入git commit -m "xx ...

  9. HDU 5806 NanoApe Loves Sequence Ⅱ ——（尺取法）

    题意:给出一个序列,问能找出多少个连续的子序列,使得这个子序列中第k大的数字不小于m. 分析:这个子序列中只要大于等于m的个数大于等于k个即可.那么,我们可以用尺取法写,代码不难写,但是有些小细节需要 ...

  10. 【Python】模块学习之locust性能测试

    背景 locust是一个python的第三方库,用于做性能测试,可使用多台机器同时对一台服务器进行压测,使用其中一台机器作为主节点,进行分布式管理 博主测试接口的时候一直是使用python脚本,后来有 ...