Vue中的ref作用详解(实现DOM的联动操作)

其实官网已经讲的很仔细了，只是我个人可能接受能力比较差，并没有立刻明白他的意思。不过使用之后就很明白了。这里主要举个例子来说明：

我想要的效果是点击保存的同时，也能点击重置这个按钮，触发reset，ref这个特性就帮我达到了DOM的一个联动效果。

总结

赞 (0)

相关推荐

  • 解决vue里碰到 $refs 的问题的方法

    解决vue里碰到 $refs 的问题的方法

    本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题 记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获

  • Vue 2中ref属性的使用方法及注意事项

    Vue 2中ref属性的使用方法及注意事项

    发现问题 最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组 // html <ul> <li ref="refCon">1</li> <li ref="refCon">2</li> </ul> // js created: function() { this.$nextTick(() => { console.log(this.$refs.refCon) // 打印结果:

  • vue组件 $children,$refs，$parent的使用详解

    vue组件 $children,$refs，$parent的使用详解

    本文介绍了vue组件 $children,$refs,$parent的使用,分享给大家,也自己留个笔记 如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"></firstchild> 然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数 2)$children 他返回的是一个

  • 深入理解vue $refs的基本用法

    我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", metho

  • vue2里面ref的具体使用方法

    本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下. 1.我们先定义两个组件 html部分 <div id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </div> js部分 Vue.component('navbar',{ template:'<div>{{navs}}</div>', data:function

  • Vue中的ref作用详解(实现DOM的联动操作)

    Vue中的ref作用详解(实现DOM的联动操作)

    其实官网已经讲的很仔细了,只是我个人可能接受能力比较差,并没有立刻明白他的意思.不过使用之后就很明白了.这里主要举个例子来说明: 我想要的效果是点击保存的同时,也能点击重置这个按钮,触发reset,ref这个特性就帮我达到了DOM的一个联动效果. 总结

  • Vue中keep-alive组件作用详解

    keep-alive组件的作用,供大家参考 作用:用于保留组件状态或避免重新渲染(缓存的作用) 比如:当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回目录时,都能从缓存中快速渲染,而不用重新渲染. 属性 该标签有两个属性include与exclude: include:字符

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • 基于pandas中expand的作用详解

    expand表示是否把series类型转化为DataFrame类型 下面代码中的n表示去掉下划线"_"的数量 代码如下: import numpy as np import pandas as pd s2 = pd.Series(['a_b_c_f_j', 'c_d_e_f_h', np.nan, 'f_g_h_x_g']) print("-----------------------------------") print(s2.str.split('_')) p

随机推荐