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

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. FPGA中ROM与RAM相关知识总结（五）

    把看到的关于存储的一些东西整理一下,有些话来自于网友,所以还是那句话,看到的人要带着自己的思考去看,记住尽信书不如无书,fighting!!! 一.基本概念 最熟悉的两个词语应该是RAM与ROM,RA ...

  2. PostgreSQL统计信息索引页

    磨砺技术珠矶,践行数据之道,追求卓越价值 返回顶级页:PostgreSQL索引页 本页记录所有本人所写的PostgreSQL的统计信息相关文摘和文章的链接: pg_stats:   --------- ...

  3. 成都Uber优步司机奖励政策（4月19日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 【转载】COM小结

    原文:http://blog.csdn.net/byxdaz/article/details/6595210 一.Com概念 所谓COM(Componet Object Model,组件对象模型),是 ...

  5. [C/C++11]_[初级]_[std::bind介绍和使用]

    场景 1.C++11 引入了std::function 对象, 这个对象可以通过std::bind封装所有的函数, 并通过代理调用这个std::function的方式调用这个函数. 比如通过统一的方式 ...

  6. 使用JDBC连接MySQL数据库

    Java数据库连接(Java DataBase connectivity简称JDBC) 下载JDBC驱动:https://dev.mysql.com/downloads/connector/j/ Wi ...

  7. UWP DEP0700: 应用程序注册失败。[0x80073CF9] 另一个用户已安装此应用的未打包版本。当前用户无法将该版本替换为打包版本。

    最近电脑抽风,我在[应用程序和功能]中重置了以下我的App自然灾害,居然,搞出大新闻了. 它居然从列表中消失了... vs再次编译代码的时候,提示 严重性 代码 说明 项目 文件 行 禁止显示状态 错 ...

  8. android 判断应用是否在前台显示

    在一些场景下我们需要知道应用是否在前台显示,当不在前台显示的时候,一些后台进程可以暂时停止,比如一些查询任务.不必要的线程.不需要的渲染等,以减少对设备资源的占用.判断应用是否在前台通常可以使用一下方 ...

  9. DMS路由表

    DMS路由表: route add -p 53.90.146.0 mask 255.255.255.0 10.77.35.249   ================================= ...

  10. double类型四舍五入保留两位小数

    double x; int(x * 100 + 0.5) /100; 通过int强制转换截去后面的位数,实现两位小数保存, 由于强制转换直接把后面的信息截去,所以要想五入需要加0.5.