dom加载后执行 vue_Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。一、新闻滚动列表1、在created函数中获取后台数据；2、模板引擎中用v-for生成列表项；3、调用滚动函数，假设该滚动函数式原声方法写的；4、什么时候开始调用滚动函数比较合适呢？二、thi
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。比如一个新闻滚动的列表项。如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后。
一、新闻滚动列表
1、在created函数中获取后台数据；
2、模板引擎中用v-for生成列表项；
3、调用滚动函数，假设该滚动函数式原声方法写的；
4、什么时候开始调用滚动函数比较合适呢？
二、this.$nextTick()
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
Vue.component('example', {
template: '{{ message }}',
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元素
Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js 1.0版本中,通过v-el绑定,然后通过this.els ...
vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例:
Sql server的Merge语句，源表中如果有重复数据会导致执行报错
用过sql server的Merge语句的开发人员都应该很清楚Merge用来做表数据的插入/更新是非常方便的,但是其中有一个问题值得关注,那就是Merge语句中的源表中不能出现重复的数据,我们举例来说 ...
Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
vue中关于dom的操作
mounted 个人理解为DOM结构准备就绪了,可以开始加载vue数据了, 挂载点,配合使用 mounted:function(){ this.$nextTick(function(){ //this ...
vue中的dom指令控制
一.条件控制指令1.v-if,条件渲染
显示该标签
...随机推荐
【转】 Linux shell的&;&;和||
http://www.2cto.com/os/201302/189655.html Linux shell的&&和|| shell 在执行某个命令的时候,会返回一个返回值,该返回值 ...
GATK软件介绍
背景介绍 GATK全称是The Genome Analysis Toolkit,是Broad Institute(The Broad Institute, formerly the Broad Ins ...
MVC 区域功能
因为MVC项目是要求都放在固定的文件夹,所以,当项目大的时候,会很不方便管理,所以微软引入的区域的功能 使用方法: 在项目上右击--添加--区域 就会出现Areas的文件夹,里面就是子MVC 渲染: ...
c# form的设定
1. 窗体的显示位置startPosition CenterScreen 窗体在当前居中 CenterParent 窗体在其父窗体居中 WindowDefaultBounds 窗体定期在windows ...
第六届蓝桥杯B组C++试题
1. 奖券数目 有些人很迷信数字,比如带"4"的数字,认为和"死"谐音,就觉得不吉利. 虽然这些说法纯属无稽之谈,但有时还要迎合大众的需求.某抽奖活动的奖券号 ...
初始twisted(一)
1.与同步模型的优势: 1.有大量的任务,一个时刻内至少有一个任务要运行 2.任务执行大量的I/O,同步模型会因为任务阻塞而浪费大量时间 3.任务之间相互独立,任务内部交互少. 2.与同步模式客户端的 ...
HIVE快速入门
(一)简单入门 1.创建一个表 create table if not exists ljh_emp( name string, salary float, gender string) commen ...
POJ 1562 Oil Deposits
转载请注明出处:http://blog.csdn.net/a1dark 大规模的图论切题之旅正式开始了.由于今天停了一天的电.所以晚上才开始切题.直到昨晚才把图论大概看了一遍.虽然网络流部分还是不怎么 ...
[C#] 如何截取完整的网页图片
前言 有时候浏览到非常有用的网页时,我们会选择将它加入到收藏夹中,但是网站一旦过期,以后就看不到这个网页了.当然也可以将网页打印成PDF文档保存.最新的Windows 10中的Edge浏览器支持将网页 ...
linux mysql重启命令
1.通过rpm包安装的MySQL 1 2 service mysqld restart /etc/inint.d/mysqld start 2.从源码包安装的MySQL 1 2 3 4 // Linu ...
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)