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的更多相关文章

  1. vue初始化页面闪动问题

    使用vue开发时,在vue初始化之前,由于div是不归vue管的,所以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是我们 ...

  2. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  3. Vue中 等待DOM或者数据完成 在执行 --this.$nextTick()

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

  4. [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick

    思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...

  5. Vue.js源码解析-Vue初始化流程之动态创建DOM

    目录 前言 一._update 如何判断是初始化还是更新操作? 二.patch 2.1 patch 定义 2.2 初始化的 patch 三.createElm 动态创建DOM 3.1 创建组件节点 3 ...

  6. Vue数据更新页面没有更新问题总结

    Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...

  7. Vue初始化过程

    用vue也有一两年了,始终对vue一知半解,不怎么了解内部的执行过程,最近在看vue源码,还是不少收获的,其中不乏浏览器事件轮询机制.闭包.设计模式等,还是非常值得一读.本篇简要记录下vue的初始化过 ...

  8. vue学习(八)nextTick[异步更新队列]的使用和应用

    nextTick的使用 为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM <div id="app& ...

  9. Vue.js源码解析-Vue初始化流程

    目录 前言 1. 初始化流程概述图.代码流程图 1.1 初始化流程概述 1.2 初始化代码执行流程图 2. 初始化相关代码分析 2.1 initGlobalAPI(Vue) 初始化Vue的全局静态AP ...

随机推荐

  1. NaN与Null与undefiined的关系

    在js中,定义一个变量需要通过关键字var来定义,定义的变量可以是字符串.数字等等都行.但是如果你只是定义了一个变量,没有给他赋值,那么它就默认为'undefined'.例如 var name; co ...

  2. 使用@Validated分组遇到的坑

    在使用@Validate注解分组校验时,如果指定分组,所有的需要验证的属性都必须添加指定分组才会校验 解决办法: 没有指明分组的属性都属于Default,所以分组接口继承Default就可以解决

  3. DeepLearning网络设计总结

    检测网络: 1. tiling层可以减少计算量,deconvolution相比tiling性能要好一些

  4. controller层负责创建类传递类给service;service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性;dao层负责数据的持久化

    controller层负责创建类传递类给service:service层负责逻辑编写调用dao层 将编写后的类传递到dao层,保证事务的正确性:dao层负责数据的持久化

  5. CSS3 flexbox 布局 ---- flex项目属性介绍

    现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...

  6. iOS 通知推送APNS

    结合网上各个资料,再简单整理的一份. 一.APNS推送说明 1.你的IOS应用需要去注册APNS消息推送功能. 2.当苹果APNS推送服收到来自你应用的注册消息就会返回一串device token给你 ...

  7. 轻量级浏览器Midori

    导读 这是一个对再次回归的轻量级.快速.开源的 Web 浏览器 Midori 的快速回顾. 如果你正在寻找一款轻量级网络浏览器替代品,请试试 Midori. Midori是一款开源的网络浏览器,它更注 ...

  8. python 脚本之 获取远程主机的hostname

    import sys, socket try: result = socket.gethostbyaddr("查询的IP") #查询完后获得一个元组 print (result) ...

  9. BZOJ3724PA2014Final Krolestwo——欧拉回路+构造

    题目描述 你有一个无向连通图,边的总数为偶数.设图中有k个奇点(度数为奇数的点),你需要把它们配成k/2个点对(显然k被2整除).对于每个点对(u,v),你需要用一条长度为偶数(假设每条边长度为1)的 ...

  10. 云服务器ECS

    云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...