<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

</head>

<body>

<div id="app" ref="app">

    {{ name }}

</div>

</body>

<script>

    let vm = new Vue({

        el: "#app",

        data: {

            name: "python",

        },

        beforeCreate() {

            //这里的代码执行时,vm对象尚未创建,所有data中的属性是无法操作的

            console.log("vm对象创建前：");

            console.log(this.name);  //此时找不到this.name

            this.name = 'java'; //此时设置this对象的属性不会生效

            console.log(this.$el);

            console.log(this.$data);

        },

        created() {

            //这里的代码执行时,vm对象已经创建完成,但是还没有把数据和视图模板进行绑定

            //这里可以用于写从后端获取数据的代码

            console.log("vm对象创建完成：");

            console.log(this.$el);

            console.log(this.$data);

        },

        beforeMount() {

            //这里的代码执行时,已经绑定了视图,但是没有更新视图中的数据

            console.log("挂载前：");

            console.log(this.$el.innerHTML);

            console.log(this.$data);

        },

        mounted() {

            //这里的代码执行时,已经把data中的数据替换了模板中对应的内容了

            //注意: 此时页面还没有显示

            console.log("挂载后：");

            console.log(this.$el.innerHTML);

            console.log(this.$data);

        },

        beforeUpdate() {

            //当data的中数据发生变化时,执行beforeUpdate()和updated()

            //此时data中的数据还没有发生变化

            console.log('更新数据前:');

            let name = this.$el.innerHTML;

            console.log('name:' + name);

        },

        updated() {

            //此时data中的数据已经改变

            console.log('更新数据后:');

            let name = this.$el.innerHTML;

            console.log('name:' + name);

        },

        beforeDestory() {

            console.log("vm对象销毁前");

        },

        destoryed() {

            console.log("vm对象销毁后");

        }

    });

</script>

</html>

Vue对象的生命周期的更多相关文章

  1. Javascript - Vue - vue对象的生命周期

    vue对象的生命周期 从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期. 创建期间的生命周期函数 <div id="box">    <h3 id ...

  2. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. Vue js 的生命周期详解

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

  5. Vue.js-07：第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  6. vue实例的生命周期

    Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...

  7. 浅析vue实例的生命周期（生命周期钩子）

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

  8. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  9. vuejs2.0 vue实例的生命周期

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .下图展示的就是一个v ...

随机推荐

  1. 一、touch.js

    一.touch.js 1.引用链接: <script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"> ...

  2. flashback table

    前提:开启回收站 查看回收站状态 SQL> show parameter recyclebin; NAME TYPE VALUE -------------------------------- ...

  3. AOP技术介绍－－（.Net中关于AOP的实现）

    一.AOP实现初步       AOP将软件系统分为两个部分:核心关注点和横切关注点.核心关注点更多的是业务逻辑,关注的是系统核心的业务:而横切关注点虽与核心的业务实现无关,但它却是一种更通用的业务, ...

  4. CS与BS的比较

    对象 硬件环境 客户端要 求           软件安装 升级和维护 安全性 C/S 用户固定,并且处于相同区域, 要求拥有相同的操作系统. 客户端的计算机电脑配置要求较高. 每一个客户端都必须安装 ...

  5. python的次方操作

    好简单,不需要import任何包 b=a**n就是求a的n次方,如果n=0.5就是开方 如果开方的是负数或者附复数,需要 import math b=math.sqrt(a) 这样

  6. python学习笔记（十二）随机数模块

    import random,string print(random.randint(1,199))#1-199随机取一个整数,包含199 print(string.digits)#所有的数字0-9 p ...

  7. Android之SAX解析笔记

    books.xml: <?xml version="1.0" encoding="utf-8"?> <books> <book i ...

  8. 【面经分享】前端小白半年准备，成功进入bat

    先介绍下背景 非211,985本科毕业.一年半PHP经验,一年半前端经验,前端一直在做React开发. 半年之前,我是一个前端小小小白.多么小白呢? css调样式全靠试. 盒模型,好像知道是啥?好像又 ...

  9. LintCode之加一

    题目描述: 分析:由样例可以知道,当数组的每一个数字都是9时,加一会产生一个最高位的数字1,所以先判断这个数组的每一位是否都是9,如果是,那么新数组的大小是原数组大小加一,否则新数组的大小等于原数组的 ...

  10. centos7 安装gdal2.3.1

    在直接源码安装gdal2.3时报错,大概意思是说没有安装SFCGAL. 1.centos更新cmake到3.5版本: wget https://cmake.org/files/v3.5/cmake-3 ...