最近在看其他项目的过程中,发现在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

    例如: let imgs = { small: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"], mi ...

  2. 嵌入式Linux下CAN总线配置

    问题背景:本人开发板使用的是迅为iTOP4412精英版,额外购买的CAN/485模块,如下图: 但是插上模块之后,在终端使用ifconfig can0命令发现开发板读不到CAN设备,显示“ifconf ...

  3. TXNLP 33-40

    词向量: 回顾基于检索的问答系统 倒排表解决:坑爹的翻译...应该翻译成“反向索引” 常规的索引是文档到关键词的映射: 文档——>关键词但是这样检索关键词的时候很费力,要一个文档一个文档的遍历一 ...

  4. nodejs基础一

    Node.js是一个基于Chrome V8引擎的JavaScript运行. js的运行环境 运行js有两种: .js文件方式 交互(REPL): node  回车进入交互模式 .exit 退出交互模式 ...

  5. 题解 【POJ1952】 BUY LOW, BUY LOWER

    题目意思: 给你一个长度为\(n\)(\(1<=n<=5000\))的序列,并求出最长下降子序列的长度及个数, 并且,如果两个序列中元素的权值完全相同,那么即使它们的位置不一样,也只算一种 ...

  6. hdu 6065 RXD, tree and sequence

    题 OwO http://acm.hdu.edu.cn/showproblem.php?pid=6065 (2017 Multi-University Training Contest - Team ...

  7. python 通过序列索引迭代

    另外一种执行循环的遍历方式是通过索引,如下实例: #!/usr/bin/python # -*- coding: UTF-8 -*- fruits = ['banana', 'apple', 'man ...

  8. 主流包管理工具npm、yarn、cnpm、pnpm之间的区别与联系——原理篇

    接触 node 之后,一直使用npm包管理工具, cnpm 一开始会用一些,但是并没有觉得比 npm 快得多,使用 cnpm 的时候还经常安装不成功,只能再用 npm 安装一遍,渐渐的就弃用了 cnp ...

  9. LOJ #2731 [JOI2016春季合宿]Solitaire (DP、组合计数)

    题目链接 https://loj.ac/problem/2731 题解 首先一个很自然的思路是,设\(dp[i][j]\)表示选了前\(i\)列,第\(2\)行第\(i\)列的格子是第\(j\)个被填 ...

  10. 20.Python类型转换，Python数据类型转换函数大全

    虽然 Python 是弱类型编程语言,不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型,但在一些特定场景中,仍然需要用到类型转换. 比如说,我们想通过使用 print() 函数输出信 ...