mounted

  个人理解为DOM结构准备就绪了,可以开始加载vue数据了,

  挂载点,配合使用

mounted:function(){
this.$nextTick(function(){ //this.$nextTick是在下次DOM更新循环结束时调用延迟回调函数。异步函数
this.loadData();          //DOM加载就绪,后调用loadData方法进行数据更新
        //想要更新后的获取dom              //此时若获取更新后dom数据将会报错,数据为undefined;
})
}

  此时,若想要获取更新后的dom结构,并操作dom,必须在下一个钩子函数中获取,否则将会报错,获取不到

updated

  数据更新导致的dom结构更新,在更新完之后会调用这个钩子

  在此时获取上一步中更新的数据,就可以成功获取到。

引用插件的方法,在mounted钩子中加载数据,在updated钩子引用处理这个数据的插件。

beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
updated: 在这里处理更新后的数据
beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容

  

vue中关于dom的操作的更多相关文章

  1. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

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

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

  3. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  4. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  5. Vue中对data的操作

    1. {{a}} var vm = new Vue({ el: '#app', data: { a: { a: 1, b: 2 } } })   vm.a.c = 'sadoisad' // 按理说是 ...

  6. Vue中的DOM操作

    1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...

  7. vue中的dom指令控制

    一.条件控制指令1.v-if,条件渲染 <div id="J_app"> <p v-if="show">显示该标签</p> ...

  8. vue中一个dom元素可以绑定多个事件?

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

  9. 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Luogu3119 草鉴定-Tarjan+Topsort

    Solution 简单的$Tarjan$题. 有大佬现成博客 就不写了 → 传送门 Code #include<cstdio> #include<cstring> #inclu ...

  2. mvc输出json时报HTTP Status 406错误

    1.mvc输出json时报HTTP Status 406错误 错误纠结了2天时间,今天总与整对了,少jackson-databind引用 对于Spring 4.1.x 和以上, jackson-dat ...

  3. python+selenium—webdriver入门(二)

    本文中主要介绍webdriver常见的对象定位方法: 一.对象定位的目的 二.常见的对象定位方法 一.对象定位的目的: 1.操作对象 2.获得对象的属性,如:对象的class属性.name属性等 3. ...

  4. @RemoteProxy()注释 与@File注释的使用

    @RemoteProxy()注释 dwr3.0可以通过全注解的方式,极大的简化了配置,所有xml配置加在一起不超过20行,而且使用更加简单,bean注入的问题也都解决.配置步骤如下: web.xml的 ...

  5. LVS、Nginx 及 HAProxy 工作原理

    当前大多数的互联网系统都使用了服务器集群技术,集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务,这些集群可以是 Web 应用服务器集群,也可以是数据库服务器集群,还可以是分布式缓存服务器 ...

  6. Windows系统编程之异步I/O和完成端口

    Windows系统编程之异步I/O和完成端口[作者]北极星2003[来源]看雪技术论坛(bbs.pediy.com) [时间]2006年7月1日 一.  同步I/O和异步I/O 在介绍这部分内容之前先 ...

  7. Beta冲刺 (7/7)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1:(组长)柯奇豪 过去两天完成了哪些任务 部分代码的整合 编辑文章部分的完成 ...

  8. EF6学习笔记(六) 创建复杂的数据模型

    EF6学习笔记总目录:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 本篇原文地址:Creating a More Complex Data Model 本篇讲的比较碎,很多内容本人 ...

  9. [ 9.24 ]CF每日一题系列—— 468A构造递推

    Description: 1 - n个数问你能否经过加减乘除这些运算n -1次的操作得到24 Solutrion: 一开始想暴力递推,发现n的范围太大直接否决,也否决了我的跑dfs,后来就像肯定有个递 ...

  10. 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性

    [源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...