<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue生命周期</title>

         <script src="../js/vue.js"></script>

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

     </head>

     <body>

         <div class="test" style="border: 1px black dashed;padding: 8px;">

             {{a}}

         </div>

         <div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">

             我是内容二

         </div>

         <script type="text/javascript">

             var myVue = new Vue({

                 el: ".test",

                 data: {

                     a: "我是内容,在控制台输入myVue.a=123456,可以改变我的值"

                 },

                 created: function () {

                     //在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。

                     //但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即this.a存在,可打印出来 。

                     console.log("建立");

                 },

                 beforeCompile: function () {

                     console.log("未开始编译");

                 },

                 compiled: function () {

                     //在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。

                     console.log("编译完成");

                 },

                 ready: function () {

                     //在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才触发 ready 钩子。

                     console.log("一切准备好了");

                 },

                 attached :function () {  //myVue.$appendTo(".test2")暂时触发不了,不知道怎么解决

                     //在 vm.$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接操作 vm.$el 不会 触发这个钩子。

                     console.log("插入DOM成功");

                 },

                 detached :function () { //触发事件 myVue.$destroy(true),其中参数true控制是否删除DOM节点或者myVue.$remove()

                     //在 vm.$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接操作 vm.$el 不会 触发这个钩子。

                     console.log("删除DOM成功");

                 },

                 beforeDestroy: function () {  //触发方式,在console里面打myVue.$destroy();

                     //在开始销毁实例时调用。此时实例仍然有功能。

                     console.log("销毁前");

                 },

                 destroyed: function () {   //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在

                     //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。

                     console.log("已销毁");

                 }

         });

         </script>

     </body>

 </html>

vue生命周期的介绍的更多相关文章

  1. 【vue生命周期】- 详解

    这篇文章通俗易懂,写的不错,本文转载至:https://www.cnblogs.com/happ0/p/8075562.html 详解Vue Lifecycle 先来看看vue官网对vue生命周期的介 ...

  2. vue—生命周期的基本介绍

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

  3. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  4. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  5. Vue 生命周期方法

    一.Vue 生命周期 Vue的生命周期即是实例从创建到销毁的一个过程.之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便 ...

  6. vue生命周期探究（二）

    vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...

  7. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  8. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  9. vue生命周期的理解

    我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...

随机推荐

  1. xml--笔记

    1.例子 <?xml version="1.0" encoding="utf-8"?> <!--引用css样式文件--> <?xm ...

  2. jquery弹窗插件

    .zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; over ...

  3. 集群下Cookie共享,必须要设置machineKey

    这个节允许你设置用于加密数据和创建数字签名的服务器特定的密钥.ASP.NET自动使用它来保护表单验证Cookie,你也可以将它用于受保护的视图状态数据.同时,这个密钥还用于验证进程外的会话状态提供程序 ...

  4. Unity3D ——强大的跨平台3D游戏开发工具（一）

    众所周知,Unity3D是一个能够实现轻松创作的多平台的游戏开发工具,是一个全面整合的专业游戏引擎.在现有的版本中,其强大的游戏制作功能已 经达到让人瞠目结舌的地步.尤其是它在3.0版本里面制作的那款 ...

  5. jmeter+ant+jenkins+mac 构建后自动发送邮件

    1.安装Email Extension Plugin插件 2.进入系统管理-系统设置,按如下进行设置: ------------------------------------------------ ...

  6. linux内核——1.概述

    1.结构 linux中,我们把操作系统分为内核空间和用户空间.用户通过用户空间与操作系统打交道.用户要通过系统调用访问内核空间.下图为Linux体系结构,shell应该为在最顶层. 系统调用,下面链接 ...

  7. selenium Chromediver

    Here we use wget to fetch the version number of the latest release, then plug the version into anoth ...

  8. Intellij idea 15配置tomcat，maven

    刚导了个项目进去,想把项目运行起开,怎么也找不到tomcat... ctrl + alt +s,打开设置窗,搜索 Application Server Tomcat: 点中间绿色的“+”号,添加选择t ...

  9. JDBC-ODBC桥连接方式操纵SQL数据库

    /**  * 功能:演示使用JDBC-ODBC桥连接方式操纵SQL数据库  * 作者:徐守威  * 操作步骤:  * 1.配置数据源  * 2.在程序中连接数据源  * 3.操作数据  */ pack ...

  10. 第一个shell脚本 结合计划任务下载远程文件

    思路: 进入/usr/local/apache2/htdocs/ipa/  循环读取 /root/shell/wget/down.txt  每次一行,每一行直接就是一条命令,直接 $line 就可以执 ...