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. 20172325 2018-2019-2 《Java程序设计》第六周学习总结

    20172325 2018-2019-2 <Java程序设计>第六周学习总结 教材学习内容总结 本周学习第十章--树 1.什么是树 (1)树是一种数据结构,与之前学过的栈.队列和列表这些线 ...

  2. Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary

      允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://chengxingliang.blog.51cto.com/3972944/886643 ...

  3. Linux 给文件夹或者文件增加权限

    chmod -R 777 文件夹参数-R是递归的意思777表示开放所有权限 chmod 777 test.sh chmod +x 某文件 如果给所有人添加可执行权限:chmod a+x 文件名:如果给 ...

  4. 一个价格,两份大礼!Mockplus X MindManager限时联合大促

    3月暖春,阳光明媚了,工作量也伴随气温回升了,面对那么多的tasks,效率提升已经迫在眉睫.为了更好的服务产品设计,为各位产品经理.UI设计师.UX设计师等带来更快更简单的设计解决方案,Mockplu ...

  5. .net core 中使用ef 访问mysql

    1.参考文档说修改项目文件添加,就得这么做,不然会报错 <ItemGroup> <DotNetCliToolReference Include="Microsoft.Ent ...

  6. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  7. ActiveMQ_2安装

    Linux安装 环境JDK7以上 gz文件拷贝到 /usr/local/目录下 解压 后缀为 .tar.gz的压缩包 进入解压后的文件夹 cd apache-activemq-x.xx.x/ cd b ...

  8. [solution] JZOJ 5459. 密室

    [solution] JZOJ 5459. 密室 Description 小X 正困在一个密室里,他希望尽快逃出密室. 密室中有$N$ 个房间,初始时,小X 在1 号房间,而出口在N 号房间. 密室的 ...

  9. MySQL数据库插入中文乱码解决方法

    在mysql数据库中,插入中文数据时,会出现乱码的现象. 我的测试方法: 首先用Navicat for MySql 插入一行数据,带有中文的. 再用mysql命令行来查看插入的数据,看是否出现乱码. ...

  10. Codeforces Round #536 (Div. 2)--1106D - Lunar New Year and a Wander

    https://codeforces.com/contest/1106/problem/D 题意:求出字典序最小的走法 解法:走到每个点,都选取与这个点连通的序号最小的点,并且这个序号最小的点没有被访 ...