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

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. 20155238 2016-2017-2 《Java程序设计》第四周学习总结

    教材学习内容总结 继承 extends public class SwordsMan extends Role 检查语法逻辑,从=右边向左边读.编译程序就是语法检查器. 重新定义行为 public v ...

  2. matplotlib绑定到PyQt5（有菜单）

    稍微复杂地实现matplotlib绑定到PyQt5(有菜单) [知识点] import matplotlib matplotlib.use("Qt5Agg") [效果图] [源代码 ...

  3. 在ns2.35下完成柯老师lab18实验

    说明:柯志亨老师<ns2仿真实验-----多媒体和无线网络通信>这本书lab18实验为“无线网络封包传输遗失模型”的实验.该无线传输遗失模型是柯老师自己开发的,原始的ns-allinone ...

  4. 在初学Flask中遇到的小问题。

    今天初步认识到了Flask这个轻量级web开发框架.对于初步认识框架的我,暂时的有了一个小小的认识, 因为初学.也没有什么代码可供参开.一下的就是一个小小的例子. # 导包from flask imp ...

  5. python里的魔法方法1（构造与析构）

    魔法方法——构造与析构 1.python编程的魔法方法: (1)魔法方法总是被双下划线包围,例如__init__: (2)魔法方法是面向对象的python的一切. 2.__new__(class[,… ...

  6. POJ--3279（开关问题2个不同时间写的代码）

    Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19730   Accepted: 7118 Descrip ...

  7. HTML文件转Word文件格式

    这是我需要转换的HTML文件 第一步~ 使用我们的福昕阅读器将我们.html文件打开,如下图 第二步: 点击“文件”——“另存为”——选择一个你自己喜欢的位置存放文件,此时的文件已经被转换成了.pdf ...

  8. 从零开始的Python学习Episode 17——序列化

    序列化 我们把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语 言中也被称之为serialization,marshalling,flattenin ...

  9. NDK 链接第三方静态库的方法

    将NDK编译的第三方静态拷贝到JNI目录下,在Android.mk中添加如下代码 以openssl静态库(libcrypto-static.a)为例 第一种链接方法:LOCAL_LDFLAGS := ...

  10. sync命令详解

    转:https://blog.csdn.net/everything1209/article/details/50423679 1.谁和谁同步? 2.为什么要同步?复制移动的过程不是同步的吗,都发生了 ...