vue初始化页面dom操纵 $nextTick
new Vue({
el: '#app',
data:{
},
mounted: function () {/*生命周期函数*/
this.$nextTick(function () {
$("#contLeft > li").click(function (i, j) {
var index = $("#contLeft > li").index($(this));//这里的this不是vue对象哦
$("#contLeft > li").removeClass("active");
$("#contRight > li").removeClass("nweConActive");
$("#contLeft > li").eq(index).addClass("active");
$("#contRight > li").eq(index).addClass("nweConActive");
});
window.addEventListener('scroll', this.handleScroll);
})
},
methods:{
handleScroll () {
var offsetTop = $("#contRight").offset().top;
if((offsetTop - window.scrollY) <= 120){
$(".Newguide-left").addClass('fixed_left')
}else{
$(".Newguide-left").removeClass('fixed_left')
}
}
}
});
需要使用到vue的生命周期函数mounted然后vue对象有个$nextTick方法用它来操纵dom;
vue的生命周期见官网:生命周期示意图
vue初始化页面dom操纵 $nextTick的更多相关文章
- vue初始化页面闪动问题
使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们 ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick
思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...
- Vue.js源码解析-Vue初始化流程之动态创建DOM
目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...
- Vue数据更新页面没有更新问题总结
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...
- Vue初始化过程
用vue也有一两年了,始终对vue一知半解,不怎么了解内部的执行过程,最近在看vue源码,还是不少收获的,其中不乏浏览器事件轮询机制.闭包.设计模式等,还是非常值得一读.本篇简要记录下vue的初始化过 ...
- vue学习(八)nextTick[异步更新队列]的使用和应用
nextTick的使用 为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM <div id="app& ...
- Vue.js源码解析-Vue初始化流程
目录 前言 1. 初始化流程概述图.代码流程图 1.1 初始化流程概述 1.2 初始化代码执行流程图 2. 初始化相关代码分析 2.1 initGlobalAPI(Vue) 初始化Vue的全局静态AP ...
随机推荐
- javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint-实体报错
使用hibernate validator出现上面的错误, 需要 注意 @NotNull 和 @NotEmpty 和@NotBlank 区别 @NotEmpty 用在集合类上面@NotBlank 用 ...
- hdu-3294(最长回文子串)
题意:给你一个字符和一个字符串让你求出最长回文子串并且输出来,答案需要根据给出的字符转换一下,就是将给出的字符认定为a,然后依次向后推: 解题思路:manacher模板+一些处理 代码: #inclu ...
- Root test & Ratio test
几何级数(Geometric Series/Geometric Progression) Root test与Ratio test都依赖于几何级数求和理论,因此这里先讨论该理论. 在数学上,几何级数, ...
- BZOJ1150[CTSC2007]数据备份Backup——模拟费用流+堆+链表
题目描述 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味 的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家中尽享计算机游 ...
- 如何让自己定义的memory使用fpga自带的memory资源
前言 本文解决方法来源: http://quartushelp.altera.com/13.1/mergedProjects/hdl/vlog/vlog_file_dir_ram.htm 如果你自己V ...
- linux tar 解压命令
如果提示 common not find 先进行安装如下 wget http://www.rarsoft.com/rar/rarlinux-5.3.0.tar.gz tar -zxvf rarlinu ...
- 【cf789D】Weird journey(欧拉路、计数)
cf788B/789D. Weird journey 题意 n个点m条边无重边有自环无向图,问有多少种路径可以经过m-2条边两次,其它两条边1次.边集不同的路径就是不同的. 题解 将所有非自环的边变成 ...
- 「CodeForces - 717E」Paint it really, really dark gray (dfs)
BUPT 2017 summer training (for 16) #1H 题意 每个节点是黑色or白色,经过一个节点就会改变它的颜色,一开始在1节点.求一条路径使得所有点变成黑色. 题解 dfs时 ...
- shell 中的 ${} 、## 、%% 使用范例
日常使用范例见如下例子: 利用 ${ } 还可针对不同的变数状态赋值 (沒设定.空值.非空值): ${file-my.file.txt} :假如 $file 沒有设定,則使用 my.file.txt ...
- 自学Python3.3-函数分类(内置函数补充)
自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...