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 ...
随机推荐
- c++ 怎么输出保留2位小数的浮点数
//添加头文件 #include<iomanip> //定义变量 folat a=9.1; cout<<setiosflags(ios::fixed)<<setpr ...
- 51nod1016
1016 水仙花数 V2 1 秒 131,072 KB 160 分 6 级题 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3 ...
- Civil 3d设置横断面图样式
一位网友提出这样一个问题: 在使用SectionView.StyleName属性时, 会抛出异常:need to override property StyleName. 我测试的结果一样, 同时测试 ...
- property装饰器
# 需要了解的property的用法 class People: def __init__(self,name): self.__name=name @property def name(self): ...
- 【cf842C】 Ilya And The Tree(dfs、枚举因子)
C. Ilya And The Tree 题意 给一棵树求每个点到根的路上允许修改一个为0,gcd的最大值. 题解 g是从根到当前点允许修改的最大gcd,gs为不修改的最大gcd.枚举当前点的因子,更 ...
- Codeforces Round #511 (Div. 1) C. Region Separation(dp + 数论)
题意 一棵 \(n\) 个点的树,每个点有权值 \(a_i\) .你想砍树. 你可以砍任意次,每次你选择一些边断开,需要满足砍完后每个连通块的权值和是相等的.求有多少种砍树方案. \(n \le 10 ...
- 【BZOJ4771】七彩树(主席树)
[BZOJ4771]七彩树(主席树) 题面 BZOJ 题解 如果没有深度限制,每次只询问子树内的颜色个数,除了树套树\(dfs\)序加前驱或者后继强行二维数点之外,还有这样一种做法: 把所有相同颜色的 ...
- 【BZOJ2618】[CQOI2006]凸多边形(半平面交)
[BZOJ2618][CQOI2006]凸多边形(半平面交) 题面 BZOJ 洛谷 题解 这个东西就是要求凸多边形的边所形成的半平面交. 那么就是一个半平面交模板题了. 这里写的是平方的做法. #in ...
- One-hot encoding 独热编码
http://blog.sina.com.cn/s/blog_5252f6ca0102uy47.html
- 选做题:设计并实现一个Book类
目录 题目分析 设计思路 具体代码 测试代码 运行截图 参考资料 题目分析 题目内容 0.设计并实现一个Book类,定义义成Book.java,Book 包含书名,作者,出版社和出版日期 1.这些数据 ...