created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表)。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作(dom渲染完)。
 
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。
 
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,故输出了结果“唐浩益”。

vue学习生命周期(created和mounted区别)的更多相关文章

  1. 关于Vue实例的生命周期created和mounted的区别

    什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...

  2. Vue实例的生命周期created和mounted的区别

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...

  3. vue的生命周期 created mounted等

    生命周期: beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用 created 页面加载之前执行,在实例创建完成后被立即调用.执行顺序:父组件-子组件 ...

  4. vue笔记 - 生命周期第二次学习与理解

    对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...

  5. vue学习指南:第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  6. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  7. 你还不知道Vue的生命周期吗?带你从Vue源码了解Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  8. 8.vue的生命周期

    Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...

  9. vue之生命周期

    vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...

随机推荐

  1. 【loj3056】【hnoi2019】多边形

    题目 描述 ​ 给出一个 \(n\) 个点的多边形初始的三角剖分: ​ 一次合法的旋转定义为 \((a,b,c,d)\) ,满足 \(a<b<c<d\) : ​ 并且存在边\((a, ...

  2. CF848E Days of Floral Colours——DP+多项式求逆/分治NTT

    官方题解:http://codeforces.com/blog/entry/54233 就是由简入繁 1.序列处理,只考虑一个半圆 2.环形处理(其实这个就是多了旋转同构) 然后基于分割线邻居的跨越与 ...

  3. JS函数&DOM

    函数 <script>    var time = new Date();//显示全部日期//    document.write(time);    var year = time.ge ...

  4. 服务器内存占用不断的增加 & 任务管理器(PF使用率)不断的增加:关注句柄数

    最近一二个月以来,我发现服务器的内存占用正按着每天60M的速度增加. 一台windows 2003的服务器(2G内存),刚刚启起时占用内存:600M左右. 运行20天后,内存占用(PF使用):1.8G ...

  5. python(六)——基本数据类型介绍

    1.数字整形 python3不管数字有多大都是int型,没有long类型 1>字符串转换为数字 s1 = " print(type(s1),s1) b = int(s1)#不加base ...

  6. 2018 ACM 网络选拔赛 徐州赛区

    A. Hard to prepare #include <cstdio> #include <cstdlib> #include <cmath> #include ...

  7. 外显子分析报错解决方案bin field of BAM record does not equal value computed based on alignment start and end, and length of sequence to which read is aligned

    以下链接给出了解决方案:https://gatkforums.broadinstitute.org/gatk/discussion/4290/sam-bin-field-error-for-the-g ...

  8. 教你如何用Meterpreter渗透Win系统

    在这篇文章中,我们将跟大家介绍如何使用Meterpreter来收集目标Windows系统中的信息,获取用户凭证,创建我们自己的账号,启用远程桌面,进行屏幕截图,以及获取用户键盘记录等等. 相关Payl ...

  9. WCF开发实战系列一:创建第一个WCF服务

    WCF开发实战系列一:创建第一个WCF服务 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 在这个实战中我们将使用DataContract,ServiceContract ...

  10. Unity5天空盒小黑点问题

    unity5打开的时候有时候天空盒基本上全是小黑点,原因我现在不知道,以后再补充. 解决办法: 打开windows--lighting选项.然后双击skybox里面的材质,右边会显示当前天空盒的材质界 ...