<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="./lib//Vue2.5.17.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

     <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">

 </head>

 <body>

     <div id="app">

         <input type="button" value="修改msg数据" class="btn btn-primary" @click="changemsg">

         <h3 id="title">{{ msg }}</h3>

     </div>

     <script>

         //创建vue实例

         var vm = new Vue({

             el : "#app",

             data : {

                 msg : "ok"

             },

             methods : {

                 show(){

                     console.log("执行了show方法");

                 },

                 changemsg(){

                     this.msg = "No"

                 }

             },

             beforeCreate() { //这是遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。

                 // console.log(this.msg); undefined 说明此时未拿到data数据

                 // this.show() 报错 此时methods未被初始化

                 //结论，在beforeCreate生命周期函数执行的时候，data和methods中的数据都没有被初始化

             },

             created(){ //这是遇到的第二个生命周期函数

                 console.log(this.msg);

                 this.show();

                 //如果要调用methods中的方法或操作data中的数据，最早只能在created中去操作。

             },

             beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未挂载到页面

                 console.log(document.getElementById("title").innerText); //{{ msg }}

                 //在beforeMount执行的时候，页面中的元素还没有被渲染出来，只是之前写的模板字符串

             },

             mounted(){ //这是遇到的第4个生命周期函数，表示内存中的模板已经挂载页面中。

                 console.log(document.getElementById("title").innerText); //ok

                 //注意：mounted是 《实例创建期间》 的最后一个生命周期函数，当执行完mounted就表示

                 //实例已经被完全创建好了，此时，如果没有后续操作，这个实例就在内存中。

             },

             //接下来是运行中的两个事件

             beforeUpdate(){ //这时候，表示数据在被更新的时候界面还没有被更新，数据已经被更新了。

                 //console.log("界面上元素的内容是:" + document.getElementById("title").innerText);//ok

                 //console.log("data中的msg数据是：" + this.msg); //no

                 //当执行berforeUpdate的时候，页面中显示的数据还是旧数据，此时data数据中的数据是最新的，页面尚未和data的数据同步。

             },

             updated(){

                 console.log("界面上元素的内容是:" + document.getElementById("title").innerText);//no

                 console.log("data中的msg数据是：" + this.msg); //no

                 //updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的。

             }

             //当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段;

             //当执行beforeDestroy的时候，实例身上所有的data和所有的methods以及过滤器，指令。。等处于可用的状态，此时，还没有真正执行销毁的过程

             //当执行destroyed 钩子函数的时候，组件已经完全被销毁，所有的数据都不可用。

         })

     </script>

 </body>

 </html>

Vue系列之 => 钩子函数生命周期的更多相关文章

  1. Vue钩子函数生命周期实例详解

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

  2. 【vue】钩子函数生命周期

    图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html    https://segmentfault.com ...

  3. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  4. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  5. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  6. React 函数生命周期

      React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...

  7. vue学习（五）生命周期 的钩子函数

    生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivate ...

  8. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  9. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. 篮球游戏AI预研

    参考文献: 1.体育竞技游戏的团队AI http://blog.csdn.net/skywind/article/details/44922877 2.

  2. LeetCode 812 Largest Triangle Area 解题报告

    题目要求 You have a list of points in the plane. Return the area of the largest triangle that can be for ...

  3. SQL join的介绍

    学员表 SELECT * FROM tb_address; SELECT * FROM tb_student 1.JOIN关联两个表数据,将匹配数据展示,数据无匹配值则不展示 注释:INNER JOI ...

  4. 简单的document操作

    1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...

  5. ASCLL码中的一些小知识

    其次要记住asill值中   65是A      97是a A与a之间相隔32,用int转换后再用char转换回来. char b = s.charAt(i);为字符串转换成一个一个的.

  6. CAS 原理

    基础模式 1. 访问服务:  客户端发送请求访问应用系统提供的服务资源. 2. 定向认证:  客户端会重定向用户请求到 服务器. 3. 用户认证:用户身份认证. 4. 发放票据: 服务器会产生一个随机 ...

  7. python-面向对象-03_面向对象基础语法

    面向对象基础语法 目标 dir 内置函数 定义简单的类(只包含方法) 方法中的 self 参数 初始化方法 内置方法和属性 01. dir 内置函数(知道) 在 Python 中 对象几乎是无所不在的 ...

  8. 部署 tomcat

    解压 root@mysql soft]# ll 总用量 -rw-r--r--. root root 11月 : apache-tomcat-.tar.gz -rw-r--r--. root root ...

  9. OC UITextField只允许输入两位小数

    //只能输入两位小数 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range r ...

  10. su - 和su的区别

    su root和su - root: su只是切换了root身份,但Shell环境仍然是普通用户的Shell:而su -连用户和Shell环境一起切换成root身份了 推荐使用su - .