vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。

this.$refs.xxx为undefined的几种情况记录:

1、在created里钩子函数中调用

原因:created()在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。所以this.$refs压根就调不到那个dom,因为页面还没有挂载上去。

解决:在mounted () 钩子函数中调用

注意:在此种情况中,元素节点一定是直接写在html中的,而不是通过数据或者条件渲染的

2、数据或条件渲染(v-if,v-show)之后的调用

原因:

/** ref
本身作为渲染结果被创建,在初始渲染的时候不能访问他们,是不存在的
$refs不是响应式的,只在组件渲染完成后才填充
用于元素或子组件注册引用信息,注册完成,将会注册在父组件$refs对象上
调用对象是否和v-if结合使用
ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。
*/
解决:可以通过setTimeOut(()=>{...}, 0)来实现
 
代码说明:
<template>
<div>
<p ref="testText">this is a test data</p>
<p v-if="msg" ref="msgText">{{msg}}</p>
<button @click="handleClick">点一下</button>
</div>
</template> <script>
import { setTimeout } from 'timers';
export default {
data () {
return {
text: 'message show',
msg: ''
}
},
created () {
console.log(this.$refs.testText) // undefined
// this.$refs.testText.style.color = '#f00'
},
mounted () {
console.log(this.$refs.testText) // <p data-v-5752faac="" style="color: rgb(255, 0, 0);">this is a test data</p>
console.log(this.$refs.msgText) // undefined
this.$refs.testText.style.color = '#f00'
},
methods: {
handleClick () {
this.msg = 'msg show'
console.log(this.$refs.msgText) // undefined
setTimeout(() => {
this.$refs.msgText.style.color = '#eee'
console.log(this.$refs.msgText) // <p data-v-5752faac="" style="color: rgb(238, 238, 238);">msg show</p>
}, 0)
}
}
}

关于vue里的$refs属性的更多相关文章

  1. vue里碰到 $refs 的问题

    记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域 ...

  2. vue里ref ($refs)用法

    ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方 ...

  3. 怎样在 Vue 里面绑定样式属性 ?

    在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...

  4. this.$refs.tabs.activeKey ref就是vue里面的id

    this.$refs.tabs.activeKey ref就是vue里面的id

  5. vue学习笔记之属性和方法

    每个Vue都会代理其data对象里所有的属性:只有这些被代理的属性是响应的.如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.例子: <script type="text/j ...

  6. vue学习笔记 计算属性(四)

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  7. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  8. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  9. vue里的渲染以及computed的好处

    如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...

随机推荐

  1. springboot整合activiti

    1.第一步添加bpmn文件得插件,不然没法查看和编辑bpmn文件,添加插件的方法各自百度即可,很简单 2.安装好bpmn插件后开始新建bpmn文件,也就是画流程图 一般是在代码中进行指定流程审批人的, ...

  2. 解决 Docker Hadoop ssh "Connection to * closed".问题

    Docker 最近很火, 可以快速轻量级地虚拟出多个node,所以打算在Docker中跑Hadoop伪分布式应用. 其实要做出个简单的版本倒是不难,主要在 建立ssh无密码登录本机时,出现刚登录上去, ...

  3. MySQL必知必会(创建计算字段(field))

    #字段(field)基本上和列(column)的意思相同 SELECT Concat(vend_name, ' (', vend_country, ')') FROM vendors ORDER BY ...

  4. 使用SQL计算宝宝每次吃奶的时间间隔

    需求:媳妇儿最近担心宝宝的吃奶时间不够规律,网上说是正常平均3小时喂奶一次,让我记录下每次的吃奶时间,分析下实际是否偏差很大,好在下次去医院复查时反馈给医生. 此外,还要注意有时候哭闹要吃奶,而实际只 ...

  5. iOS 自定义TabBarController

    转自:http://blog.csdn.net/xn4545945/article/details/35994863 一.自定义的思路 iOS中的TabBarController确实已经很强大了,大部 ...

  6. [TimLinux] Django 中间件

    1. 定义 中间件是一个钩子框架,深入到django的请求/响应处理过程中.这是一个轻量.底层插件系统,目的是全局修改django的输入或输出.每一个中间件组件都是用来处理特定的功能.例如django ...

  7. HDU 全国多校第四场 题解

    题解 A AND Minimum Spanning Tree 参考代码: #include<bits/stdc++.h> #define maxl 200010 using namespa ...

  8. 【前端知乎系列】ArrayBuffer 和 Blob 对象

    本文首发在 个人博客 更多丰富的前端学习资料,可以查看我的 Github: <Leo-JavaScript>,内容涵盖数据结构与算法.HTTP.Hybrid.面试题.React.Angul ...

  9. redis(4)--redis集群之主从复制

    集群 先来简单了解下redis中提供的集群策略, 虽然redis有持久化功能能够保障redis服务器宕机也能恢复并且只有少量的数据损失,但是由于所有数据在一台服务器上,如果这台服务器出现硬盘故障,那就 ...

  10. 阿里巴巴的26款Java开源项目

    阿里巴巴的26款Java开源项目 开源展示了人类共同协作,成果分享的魅力.没有任何一家网络公司可以不使用开源技术,仅靠自身技术发展起来.“取之于开源,用之于开源,才能促进开源的良性发展”,阿里巴巴各个 ...