vue中$nextTick的用法讲解


Posted in Javascript onJanuary 17, 2019

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如你在Vue生命周期的created()/mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()/mounted()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

vue中$nextTick的用法讲解

为什么要用nextTick?

请看如下一段代码

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.get()
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

我在获取到数据后赋值给数据模型中list属性,然后我想引用ul元素找到第一个li把它的颜色变为红色,但是事实上,这个要报错了,我们知道,在执行这句话时,ul下面并没有li,也就是说刚刚进行的赋值操作,当前并没有引起视图层的更新。因此,在这样的情况下,vue给我们提供了$nextTick方法,如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。

new Vue({
 el: '#app',
 data: {
  list: []
 },
 mounted: function () {
  this.$nextTick(() => {
    this.get()
  })
 },
 methods: {
  get: function () {
   this.$http.get('/api/article').then(function (res) {
    this.list = res.data.data.list
    // ref list 引用了ul元素,我想把第一个li颜色变为红色
    this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
   })
  },
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 #Javascript
js中Array对象的常用遍历方法详解
Jan 17 #Javascript
vuex如何重置所有state(可定制)
Jan 17 #Javascript
node app 打包工具pkg的具体使用
Jan 17 #Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 #Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 #Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 #Javascript
You might like
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
python搜索算法原理及实例讲解
2020/11/18 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
大学生实习证明范文(5篇)
2014/09/18 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
婚礼答谢礼品
2015/01/20 职场文书
关于开学的感想
2015/08/10 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers