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. Java -- JDBC 学习--数据库连接池

    JDBC数据库连接池的必要性 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet.beans)中建立数据库连接. 进行sql操作 断开数据库连接. 这种模式开 ...

  2. Android微信数据导出

    在Nexus 5(Android 4.4)+WeChat 5.4,和Nexus 5(Android 5.0)+Wechat 6.0上测试可用. 获取加密的sqlite3数据库EnMicroMsg.db ...

  3. 从C,C++,JAVA和C#来看String库的发展(二)---JAVA和C#篇

    http://www.cnblogs.com/wenjiang/p/3272859.html 终于要进入面向对象的世界了,虽然C++也是面向对象,但是它的面向对象程度并不高,因为考虑到要兼容C语言的移 ...

  4. 树莓派使用iperf3测量网络带宽

    这个工具需要两台设备都安装iperf3工具,一台作为服务端,一台作为客户端.客户端通过链接服务端测量吞吐量. 安装iperf3 sudo apt install iperf3 开启服务端 假设在一台I ...

  5. HDU 5608 - function

    HDU 5608 - function 套路题 图片来自: https://blog.csdn.net/V5ZSQ/article/details/52116285 杜教筛思想,根号递归下去. 先搞出 ...

  6. 洛谷P4364 IIIDX

    题意:给定n个数和k,把n个数排成序列,满足ai >= ai/k,并使之字典序最大. 解:毒瘤线段树贪心... 以i/k为i的父亲构树. 当这n个数不同的时候,直接后序遍历贪心即可. 正解神奇的 ...

  7. (转)搭建Maven私服(使用Nexus)

    搭建私服可以做什么? 1.如果公司开发组的开发环境全部内网,这时如何连接到在互联网上的Maven中央仓库呢? 2.如果公司经常开发一些公共的组件,如何共享给各个开发组,使用拷贝方式吗?如果这样,公共库 ...

  8. Java:判断当前操作系统界面采用的主题是windows经典样式还是xp样式

    想起两三年前,发现写Java界面的时候,如果将当前界面的layout设为null,由于windows的不同主题界面下,标题栏的高度不一致,导致当前界面表现也不一致. 当时就想找到一个办法先判断当前用户 ...

  9. hive hadoop 大数据初探

    一.环境搭建: 1.安装虚拟机,mac 系统推荐parallels:直接转化讲师发的xmdl后缀名的文件:里面自带了环境: 注意事项:mac 本机和虚拟机中centos 的通讯,需要修改centos中 ...

  10. xtrabackup备份MySQL

    mysql备份之xtrabackup(建议用来备份innodb) 下载地址:https://www.percona.com/downloads/XtraBackup/ 安装xtrabackup [ro ...