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 ...
随机推荐
- How to gitignore
git rm -r --cached . git add . git commit -m "remove gitignore cache" git push
- Jenkins: 1.x升级到2.x
停止Jenkins Service 用2.x的"jenkins.war"替换安装目录下的"jenkins.war" 启动Jenkins Service 打开je ...
- HDU 1074 Doing Homework(经典状压dp)
题目链接 Doing Homework Ignatius has just come back school from the 30th ACM/ICPC. Now he has a ...
- xx.hbm.xml中相关重要的配置
1.<!-- 指定hibernate操作数据库时的隔离级别 #hibernate.connection.isolation 1|2|4|8 ...
- hdu-4825(01字典树)
题意:中文题意 解题思路:01字典树板子题 代码: #include<iostream> #include<algorithm> #include<cstdio> ...
- GitHub大佬:供计算机学习鉴黄功能的图片数据库
ps:学无止境 想要构建一套鉴黄系统,必须有大量的真实图片供计算机进行学习,以便于区分开正常图片和黄色图片. 近期有位加拿大程序员在Github上传了图片列表,里面包含了大量图片地址可以供计算机进行学 ...
- BZOJ2809 dispatching 【可并堆】
题目分析: yy一下就知道了,合并用可并堆少个log. 代码: #include<bits/stdc++.h> using namespace std; ; int n,m; int b[ ...
- Codeforces519 E. A and B and Lecture Rooms
传送门:>Here< 题意:询问给出一棵无根树上任意两点$a,b$,求关于所有点$i$,$dist(a,i) = dist(b,i)$的点的数量.要求每一次询问在$O(log n)$的时间 ...
- NTT算法小结
从理论上说,经过人们优化的FFT已经十分优秀,能够处理大部分的多项式乘法,但是有的时候仍然会出现下面的情况: 1)常数仍然比较大 2)在进行与整数有关的FFT时,发现得到的结果是一堆诡异的数,你需要不 ...
- Mysql 数据备份导出
mysqldump导出整个数据库mysqldump --single-transaction --skip-lock-tables -uDBUSER -pDBPASSWD -hDBIP \--defa ...