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 ...
随机推荐
- Windows Server2008、IIS7启用CA认证及证书制作完整过程
1 添加活动目录证书服务 1.1 打开服务器管理器,右键点击角色,选择“添加角色”,在“添加角色向导”窗口左侧面板选择“服务器角色”,然后勾选“Active Dire ...
- poj-1273(最大流)
题解:纯板子题... EK算法 #include<iostream> #include<algorithm> #include<cstring> #include& ...
- 【BZOJ3992】【SDOI2015】序列统计 原根 NTT
题目大意 有一个集合\(s\),里面的每个数都\(\geq0\)且\(<m\). 问有多少个长度为\(n\)的数列满足这个数列所有数的乘积模\(m\)为\(x\).答案模\(1004535809 ...
- 【HDU-6148】 Valley Numer(数位dp)
百度之星2017复赛1005 HDU-6148 Valley Numer 题意 不出现上升后直接下降数位的数,不超过n的有几个.前导零不算. 题解 dfs(当前数位的位置len,这位的数num,是否在 ...
- How to intall and configure Haproxy on Centos
Install Haproxy CentOS/RHEL 5 , 32 bit:# rpm -Uvh http://dl.fedoraproject.org/pub/epel/5/i386/epel-r ...
- 【题解】 bzoj3693: 圆桌会议 (线段树+霍尔定理)
bzoj3693 Solution: 显然我们可以把人和位置抽象成点,就成了一个二分图,然后就可以用霍尔定理判断是否能有解 一开始我随便YY了一个\(check\)的方法:就是每次向后一组,我们就把那 ...
- Redhat上为java Maven项目构建基于Jenkins + Github的持续集成环境
在Redhat enterprise 6.5 的服务器上,为在gutub 上的 java mvaen项目构建一个持续集成环境,用到了Jenkins.因公司的服务器在内网,访问外网时要通过代理,所以为m ...
- redis健康检查与故障转移
哨兵三个定时监控任务 每隔10s每隔sentinel节点会向主节点和从节点发送info命令获取最新的拓扑结构 每隔2S,每个sentinel节点会向redis数据节点的__sentiel__:hell ...
- InnoDB,5项最佳实践,知其所以然?
InnoDB,5项最佳实践,知其所以然? 原创: 58沈剑 架构师之路 昨天 缓存讲了一个月<缓存架构,一篇足够>.今天,开始写数据库. 第一篇,说说MySQL两个最常用的存储引擎,MyI ...
- QML-WebEngineView加载html(Echarts绘图)
实现QML中运用webEngineView加载Echarts GitHub:八至 作者:狐狸家的鱼 本文链接:QML-WebEngineView加载Echarts 一.前言 Qt允许使用混合GUI创建 ...