Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。
一、新闻滚动列表
1、在created函数中获取后台数据;
2、模板引擎中用v-for生成列表项;
3、调用滚动函数,假设该滚动函数式原声方法写的;
4、什么时候开始调用滚动函数比较合适呢?
二、this.$nextTick()
官方解释:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})
三、新闻滚动列表中的this.$nextTick()放哪里?
因为数据是根据请求之后获取的,所以应该放到请求的回调函数里面。
四、注意this.nextTick()
this.nextTick(callback),当数据发生变化,更新后执行回调。
this.$nextTick(callback),当dom发生变化,更新后执行的回调。
Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()的更多相关文章
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- Vue中获取dom元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
- [记录] Vue中的dom操作
使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...
- 在vue中操作dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...
- vue中操作Dom节点的方法
1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...
- Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
- Sql server的Merge语句,源表中如果有重复数据会导致执行报错
用过sql server的Merge语句的开发人员都应该很清楚Merge用来做表数据的插入/更新是非常方便的,但是其中有一个问题值得关注,那就是Merge语句中的源表中不能出现重复的数据,我们举例来说 ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
随机推荐
- workerman的使用实践--并与solaris通信
Workerman与solarisTCP通信测试 1. 笔记本win7,tcp_test.php 2. solaris,test.c 编译命令: gcc test.c –o test –lsoc ...
- CF 666E Forensic Examination——广义后缀自动机+线段树合并
题目:http://codeforces.com/contest/666/problem/E 对模式串建广义后缀自动机,询问的时候把询问子串对应到广义后缀自动机的节点上,就处理了“区间”询问. 还要处 ...
- Spring Schedule实现定时任务
applicationContext.xml 1. 增加配置 <!-- 开启定时任务 --> <task:annotation-driven /> <!-- 开启注解 - ...
- Tomcat设置UTF-8字符
进入tomat路径 vim conf/server.xml
- 自然语言处理之:搭建基于HanLP的开发环境(转)
环境搭建比FNLP的简单,具体参考:https://github.com/hankcs/HanLP 各个版本的下载:https://github.com/hankcs/HanLP/releases 完 ...
- 【Spark Java API】broadcast、accumulator
转载自:http://www.jianshu.com/p/082ef79c63c1 broadcast 官方文档描述: Broadcast a read-only variable to the cl ...
- js控制html5 【video】标签中视频的播放和停止
需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...
- WEKA结果解读
红括号里面,左边是bad的数目,右边是good数目. TP Rate FP Rate Precision Recall F-Measure ROC Area Class 0.536 ...
- linux 系统下有sda和hda的硬件设备分别代表什么意思
linux 系统下有sda和hda的硬件设备分别代表什么意思/dev/sda1 # SCSI设备,sda,sdb,sdc,三块盘,1,2,3代表分区(PV)/dev/sda2/dev/sdb1/dev ...
- C++进阶--placement new/delete
//############################################################################ // Placement New 和 Pl ...