最近看别人的项目发现有些语法不能理解，所以百度进行了学习。现在总结一下。

ref 有两种用法

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3.如何利用v-for 和ref 获取一组数组或者dom 节点

vue 中ref 的使用注意事项的更多相关文章

  1. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  3. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  4. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  5. Vue中 $ref 的用法

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

  6. Vue中改变对象的注意事项

    数组更改注意事项 Vue无法检测到以下方式变动的数组 当你利用索引直接设置一个项时,例如:vm.items[index] = newValue 当你修改数组的长度时,例如:vm.items.lengt ...

  7. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  8. vue中ref的使用（this.$refs获取为undefined）

    如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象 试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...

  9. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

随机推荐

  1. 接口与协议学习笔记-USB协议_USB2.0_USB3.0不同版本（三）

    USB(Universal Serial Bus)全称通用串口总线,USB为解决即插即用需求而诞生,支持热插拔.USB协议版本有USB1.0.USB1.1.USB2.0.USB3.1等,USB2.0目 ...

  2. Java线程和多线程（十四）——Synchronized关键字解析

    曾经有一个比较有趣的面试问题,那就是,关于使用synchronized关键字,是用在方法上面尾号,还是用在一个代码块上面为好? 答案就是使用锁定代码块为更好.因为这样不会锁定对象.当synchroni ...

  3. 将properties文件的配置设置为整个Web应用的全局变量。

    四种作用域: Web应用中的变量存放在不同的jsp对象中,会有不一样的作用域,四种不同的作用域排序是 pageContext < request < session < applic ...

  4. ELK批量删除索引

    一.存在问题 用了一段时间elk发现如果索引长时间不删除,elk会越来越慢,重启elasticsearch服务器节点之前同步时间也会很长 二.解决方法(定期删除索引) 1.在elasticsearch ...

  5. Ubuntu环境下安装CUDA9.0

    前言: 本篇文章是基于安装CUDA 9.0的经验写,CUDA9.0目前支持Ubuntu16.04和Ubuntu17.04两个版本,如下图所示(最下面的安装方式我们选择第一个,即runfile方式): ...

  6. Kali2.0可用国内源更新sources.list

    vim /etc/apt/sources.list #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contri ...

  7. Python 的AES加密与解密-需要安装的模块

    踩雷1: #先导入所需要的包 pip3 install Crypto #再安装pycrtpto pin3 install pycrypto from Crypto.Cipher import AES ...

  8. Ubuntu18.04安装Python3.6.8

    Ubuntu18.04预装了Python3.6.5 终于不再预装Python2.7了 但是系统预装的Python分散安装在各个目录里 以后改起来非常不方便 所以本次安装Python3.6.8 Pyth ...

  9. JDBC Mysql 驱动连接异常

    在做JDBC连接Mysql的时候遇到了三个异常: 第一个是:mysql8.0 caching_sha2_password 这个异常是由于是因为在mysql8.0之前的密码规则是mysql_native ...

  10. 【LeetCode算法题库】Day3：Reverse Integer & String to Integer (atoi) & Palindrome Number

    [Q7]  把数倒过来 Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Outpu ...