最近在看其他项目的过程中,发现在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. JS 给数字加三位一逗号间隔的方法

    1.方法 function format_number(n) { var b = parseInt(n).toString(); var len = b.length; ) { return b; } ...

  2. 内置对象-Math

    1.随机数 Math.random() 1)获得0-1之间的随机数 2)0到100:Math.round(Math.random()*100) 2.max:求最大值 ,,,) console.log( ...

  3. MySQL 关于触发器的操作

    -- 监视某种情况,并触发某种操作 --触发器创建语法四要素 1.监视地点 2.监视事件 3.触发时间 4.触发事件 -- 触发器只能创建在永久表上,不能对临时表创建触发器 create trigge ...

  4. Hadoop-No.12之数据采集的时效性

    数据采集的时效性,指的是可进行数据采集的时间与Hadoop中工具可访问数量的时间之间的间隔.采集架构的时间分类会对存储媒介和采集方法造成很大的影响. 一般来说,在设计应用的采集构架之前建议使用以下分类 ...

  5. VC:检测网络连接的方法

    方法一: #include "stdafx.h" #include "windows.h" #include <Sensapi.h> #includ ...

  6. java+文件批量下载

    这篇文章主要介绍了Java实现批量下载选中文件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下 1.在action中定义变量 private List<String> downLoa ...

  7. Comet OJ - Contest #3 D 可爱的菜菜子 线段树+线性基

    题意 给你一个长度为 \(n\) 的整数序列 \(a_1, a_2, \ldots, a_n\),你需要实现以下两种操作,每个操作都可以用四个整数 \(opt\ l\ r\ v\) 来表示: \(op ...

  8. luogu4212

    P4212 外太空旅行 题目描述 在人类的触角伸向银河系的边缘之际,普通人上太空旅行已经变得稀松平常了.某理科试验班有n个人,现在班主任要从中选出尽量多的人去参加一次太空旅行活动. 可是n名同学并不是 ...

  9. Java实验课：命令行参数是什么？

    命令行参数:在命令行中给定的参数就是命令行参数.(即从输入位置角度理解). 命令行的参数 1. 什么是命令行的参数? 如: java Test1 365 156 "China" ( ...

  10. Vue.Draggable拖拽效果

    1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "vuedraggable": ...