vue.js全局API之nextTick全面解析


Posted in Javascript onJuly 07, 2017

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

就是DOM更新完成之后执行的方法,并且超级方便的事情是回调函数中的this会绑定到最新的vue实例上。

代码示例如下:

<p ref="mgs">{{mgs}}</p>
<button @click="updateDom">点击更新DOM</button>
data:function () {
  return {
   mgs:"DOM"
  }
 }
updateDom:function () {
     this.mgs = "update Dom";
     console.log(this.$refs.mgs.innerHTML);
     this.$nextTick(function () {
      console.log(this.$refs.mgs.innerHTML);
     })
   }

点击更新按钮,调用updateDom,首先给mgs重新赋值,此时打印页面中p标签对应的内容,以及nextTick中也打印相应的内容,结果如下:

vue.js全局API之nextTick全面解析

从结果可以看出,this.mgs = “update Dom”;执行之后,DOM并没有直接更新,而nextTick是等到DOM更新完成之后进行回调,回调函数中的this已经是更新过的vue

代码地址:https://github.com/Demon-han/vue_demo/

其中nextTick.vue为该实例,其他组件将在其他文章中详细介绍

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS中的phototype详解
Feb 04 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
详谈js模块化规范
Jul 07 #Javascript
使用JavaScript实现alert的实例代码
Jul 06 #Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
You might like
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP如何实现跨域
2016/05/30 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python collections模块的使用方法
2020/10/09 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
通用C#笔试题附答案
2016/11/26 面试题
会计专业推荐信
2013/10/29 职场文书
计算机相关的自我评价
2014/01/15 职场文书
保安辞职信范文
2015/02/28 职场文书
校园运动会广播稿
2015/08/19 职场文书
小学运动会开幕词
2016/03/04 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python