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

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. 批量生成文件夹内所有文件md5

    说明:md5批量生成批处理脚本,无需安装任何软件,直接调用系统文件进行生成,简单基于windows命令编写了一个批量生成md5值的脚本. 使用说明:新建文本文档,命名为get_md5.bat,直接将代 ...

  2. c++ STL总结

    https://blog.csdn.net/piaoxuezhong/article/details/54348787 http://net.pku.edu.cn/~yhf/UsingSTL.htm ...

  3. 【转载】COM 组件设计与应用（十四）——事件和通知(vc.net)

    原文:http://vckbase.com/index.php/wv/1244.html 一.前言 我的 COM 组件运行时产生一个窗口,当用户双击该窗口的时候,我需要通知调用者: 我的 COM 组件 ...

  4. CLR via C#读书笔记一：CLR的执行模型

    CLR(Common Language Runtime)公共语言进行时是一个可由多种编程语言使用的“进行时”. 将源代码编译成托管模块 可用支持CLR的任何语言创建源代码文件,然后用对应的编译器检查语 ...

  5. 自定义equals

    @Overridepublic boolean equals(Object o) { if (o == null || getClass() != o.getClass()) { return fal ...

  6. 传输层tcp协议以及scoket套字节方法

    一.传输层 1.传输层的由来: 网络层的IP帮我们区分子网 以太网的Mac帮我们找到主机 所以通过IP和Mac找到了一台特定的主机 如何找到该特定主机的应用程序呢? 答案是通过端口,端口即应用程序与网 ...

  7. Python 3 利用 Dlib 19.7 进行人脸检测

    0. 引言 / Overview 介绍 Dlib 中基于 HOG,Histogram of Oriented Gradients / 方向梯度直方图 实现 Face Detect / 人脸检测 的两个 ...

  8. 高可用OpenStack（Queen版）集群-17.一些问题

    参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...

  9. systemctl status ssh.service 服务重启出现报错

    Case: ubuntu在从Ubuntu 16.04 LTS 升级到18.04 的时候,执行 do-release-upgrade -d 后,发现ssh无法登陆服务器, Solution: 1.通过s ...

  10. 【RL系列】Multi-Armed Bandit问题笔记

    这是我学习Reinforcement Learning的一篇记录总结,参考了这本介绍RL比较经典的Reinforcement Learning: An Introduction (Drfit) .这本 ...