Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

vuejs2中获取dom的方法

Posted on 2017年4月8日2017年4月8日 by king2088

之前我还未学习到ref属性的时候,使用vue要获取一个dom元素都是使用原生JavaScript中的document.getElementById等方法进行获取DOM元素,但是这种原生JS的方法在VUE中使用不可取,经常会出现问题,比如无法找到dom元素等等一系列的问题,之前我写的一个音乐播放器就是使用document.getElementById,在调试的时候总是出错,今天终于接触到ref属性了,感觉ref好强大。

官方ref解释

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例:


hello




当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 – 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模版中做数据绑定。

实际使用

实际使用中我们直接向官方这样使用,基本获取到的值都是undefined,比如下面的代码,我再尝试了多次后都得到了undefined



可是在官方却没有说清楚到底是怎么使用啊。找了半天没有找到结果,后来在segmentfault上找到相关的解决方法。
原来,我们直接使用this.$refs.menu的使用时,我们还必须要知道一个vue的全局属性才能让this.$refs.menu实时更新。
下面我们来了解下nextTick属性吧。

Vue.nextTick

官方对nextTick属性的描述
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

2.1.0新增:如果没有提供回调且支持 promise 的环境中返回 promise.

使用nextTick

下面我们就要将上面的代码结合nextTick属性一起使用了,这样就能够获得dom了,并且也不会提示undefined。请看代码:


发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme