1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.         <title>vue生命周期学习</title>
  9.         <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  10.     </head>
  11.  
  12.     <body>
  13.         <div id="app">
  14.             <input v-model="message"></input>
  15.             <h1>{{message1}}</h1>
  16.         </div>
  17.     </body>
  18.     <script>
  19.         var vm = new Vue({/*创建vue对象*/
  20.             el: '#app',/****挂载目标****/
  21.             data: {/****数据对象****/
  22.                 message: 'Hello World!'
  23.             },
  24.             computed:{/****实现某一属性的实时计算****/
  25.                 message1:function(){
  26.                     return this.message.split("").reverse().join("");
  27.                 }
  28.             },
  29.             watched:{/****检测某一属性值的变化****/
  30.  
  31.             },
  32.             methods:{/****组件内部的方法****/
  33.  
  34.             },
  35.  
  36.             beforeCreate: function() {
  37.                 console.group('------beforeCreate创建前状态------');
  38.                 console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
  39.                 console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
  40.                 console.log("%c%s", "color:red", "message: " + this.message)//undefined
  41.             },
  42.             /**
  43.              * 1.在beforeCreate和created钩子之间，程序开始监控Data对象数据的变化及vue内部的初始化事件
  44.              *
  45.              * */
  46.             created: function() {
  47.                 console.group('------created创建完毕状态------');
  48.                 console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
  49.                 console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
  50.                 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  51.             },
  52.             /**
  53.              * 2.在created和beforeMount之间，判断是否有el选项，若有则继续编译，无，则暂停生命周期；
  54.              * 然后程序会判断是否有templete参数选项，若有，则将其作为模板编译成render函数。若无，则将外部html作为模板编译（template优先级比外部html高）
  55.              *
  56.              * */
  57.             beforeMount: function() {
  58.                 console.group('------beforeMount挂载前状态------');
  59.                 console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
  60.                 console.log(this.$el);
  61.                 console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
  62.                 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  63.             },
  64.             /**
  65.              * 3.在beforeMount和mounted之间，程序将上一步编辑好的html内容替换el属性指向的dom对象或者选择权对应的html标签里面的内容
  66.              *
  67.              * */
  68.             mounted: function() {
  69.                 console.group('------mounted 挂载结束状态------');
  70.                 console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
  71.                 console.log(this.$el);
  72.                 console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
  73.                 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
  74.             },
  75.             /**
  76.              * 4.mounted和beforeUpdate之间，程序实时监控数据变化
  77.              *
  78.              * */
  79.             beforeUpdate: function() {
  80.                 console.group('beforeUpdate 更新前状态===============》');
  81.                 console.log("%c%s", "color:red", "el     : " + this.$el);
  82.                 console.log(this.$el);
  83.                 console.log("%c%s", "color:red", "data   : " + this.$data);
  84.                 console.log("%c%s", "color:red", "message: " + this.message);
  85.             },
  86.             /**
  87.              * 5.beforeUpdate和updated之间，实时更新dom
  88.              *
  89.              * */
  90.             updated: function() {
  91.                 console.group('updated 更新完成状态===============》');
  92.                 console.log("%c%s", "color:red", "el     : " + this.$el);
  93.                 console.log(this.$el);
  94.                 console.log("%c%s", "color:red", "data   : " + this.$data);
  95.                 console.log("%c%s", "color:red", "message: " + this.message);
  96.             },
  97.             beforeDestroy: function() {
  98.                 console.group('beforeDestroy 销毁前状态===============》');
  99.                 console.log("%c%s", "color:red", "el     : " + this.$el);
  100.                 console.log(this.$el);
  101.                 console.log("%c%s", "color:red", "data   : " + this.$data);
  102.                 console.log("%c%s", "color:red", "message: " + this.message);
  103.             },
  104.             /**
  105.              * 6.实例销毁
  106.              *
  107.              * */
  108.             destroyed: function() {
  109.                 console.group('destroyed 销毁完成状态===============》');
  110.                 console.log("%c%s", "color:red", "el     : " + this.$el);
  111.                 console.log(this.$el);
  112.                 console.log("%c%s", "color:red", "data   : " + this.$data);
  113.                 console.log("%c%s", "color:red", "message: " + this.message)
  114.             }
  115.         })
  116.     </script>
  117.  
  118. </html>

Vue生命周期函数的应用的更多相关文章

  1. Vue生命周期函数详解

    vue实例的生命周期 1 什么是生命周期(每个实例的一辈子) 概念:每一个Vue实例创建.运行.销毁的过程,就是生命周期:在实例的生命周期中,总是伴随着各种事件,这些事件就是生命周期函数: 生命周期: ...

  2. Vue生命周期函数

    生命周期函数: 组件挂载,以及组件更新,组建销毁的时候出发的一系列方法. beforeCreate:实例创建之前 created:实例创建完成 beforeMount:模板编译之前 mounted:模 ...

  3. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  4. vue生命周期函数2

    转载:http://blog.csdn.net/qq_15766181/article/details/73549933 钩子就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在 ...

  5. vue 生命周期函数详解

    beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, compu ...

  6. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  7. Vue之生命周期函数和钩子函数详解

    在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...

  8. vue实例的生命周期函数

    Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...

  9. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. 【ACM-ICPC 2018 南京赛区网络预赛 A】An Olympian Math Problem

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 估计试几个就会发现答案总是n-1吧. 队友给的证明 [代码] #include <bits/stdc++.h> #def ...

  2. [React Router] Prevent Navigation with the React Router Prompt Component

    In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a s ...

  3. Android自己定义对话框实现QQ退出界面

    效果 首先看下qq的效果图,点击菜单button后点退出就会出现如图的对话框. 从上图能够看出,该对话框有一个圆角,以及标题,提示信息,两个button,button颜色是白色,button点击后背景 ...

  4. 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...

  5. 9patch生成图片

    private Bitmap get_ninepatch(int id,int x, int y, Context context){ // id is a resource id for a val ...

  6. SQL语句之transaction

    http://blog.csdn.net/xbc1213/article/details/50169935 案例: begin tran --定义一个存储错误新的变量 执行一条语句 set @sumE ...

  7. mongo服务器异常

    1.Detected unclean shutdown - /data/db/mongod.lock is not empty. 前几天把研究用的虚拟机直接关了回家过年,今天启动发现启动不了,报了个u ...

  8. 当安装了ubuntu操作系统怎么也调用不出中文输入法时，可以用以下方式尝试解决。

    卸载 fcitx sudo apt-get remove fcitx 重启 sudo reboot 重新安装 fcitxsudo apt-get isntall fcitx 安装拼音输入法sudo a ...

  9. Ubuntu 16.04或14.04里下安装搜狗输入法（图文详解）（全网最简单）

    不多说,直接上干货! 其实啊,很简单 分三步走 1.添加fcitx的键盘输入法系统,因为sogou是基于fcitx的,而系统默认的是iBus: 2.安装sogou输入法: 3.设置系统参数及一些注意点 ...

  10. Spark编程模型几大要素

    不多说,直接上干货! Spark编程模型几大要素 Driver Program 输入-Transformation-Action 缓存 共享变量