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

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

    20155234 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda Lambda表达式会使程序更加地简洁,在平行设计的时候,能够进行并行 ...

  2. c++ 常量指针

    一.指向常量的指针 定义形式: const 类型 * 指针名; 不能通过指针修改地址里的值. int i=0x123; const int *p=&i; *p=; //错误 //前置const ...

  3. Python_sklearn机器学习库学习笔记（七）the perceptron(感知器）

    一.感知器 感知器是Frank Rosenblatt在1957年就职于Cornell航空实验室时发明的,其灵感来自于对人脑的仿真,大脑是处理信息的神经元(neurons)细胞和链接神经元细胞进行信息传 ...

  4. JAVA基础 XML生成与解析和String包装类下 .replace方法的使用以及char和字符序列的使用场景

    ptLink0.setText(arbu.getPtLink().replace("&","&")); // 如果像 '&','& ...

  5. [Luogu4182][USACO18JAN]Lifeguards P[单调队列]

    题意 给定 \(n\) 个区间,必须去掉其中的 \(K\) 个,询问能够保留的区间并的最大值. \(n \leq 10^5\ ,K \leq 100\) . 分析 定义状态 \(f_{i,j}\) 表 ...

  6. SQL Server 日期格式和日期操作

    SQL Server发展至今,关于日期的格式的控制方法,有传统的方法,比如CONVERT(),也有比较便利的新方法,比如FORMAT():同样,关于日期的操作函数,也分为传统方法:DATEADD()等 ...

  7. JAVA图书管理系统汇总共27个[转]

    java图书馆管理系统[优秀毕业设计论文+源码]http://down.51cto.com/data/68350java+sql server图书管理系统 http://down.51cto.com/ ...

  8. java练习（一）数组、集合的运用

    有这么一个有趣的问题,问:有这么一个不重复的自然数数组,自然数长度为N,而数组长度为N-2,依次随机把自然数放进数组中,请找出2个没有被放进去的自然数.例如:这个自然数数组是[0, 1, 2, 3,  ...

  9. mac zsh不自动加载~/.bashrc

    修改了bashrc, 新开一个终端都要source一下才起作用. 网上有说需要在 . bash_profile加载一次.bashrc. 但是这个和我的问题不一样. 我用的是zsh,需要修改~/.zsh ...

  10. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...