Vue生命周期简介

生命周期的钩子函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Title</title>

</head>

<body>

<div id="app">

    <p>{{message}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            message: "hello gaoxin!!"

        },

        beforeCreate: function () {

            console.group("beforeCreate  创建实例之前===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // undefined

            console.log("message: " + this.message);

        },

        created: function () {

            console.group("Created:  创建实例完成===========");

            console.log("el: " + this.$el); // undefined

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeMount: function () {

            console.group("beforeMount  挂载前状态==========");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        mounted: function () {

            console.group("Mounted  挂载结束状态=============");

            console.log("el: " + this.$el); // 已被初始化

            console.log("data: " + this.$data); // 已被初始化

            console.log("message: " + this.message); // 已被初始化

        },

        beforeUpdate: function () {

            console.group("beforeUpdate  更新前状态=========");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        updated: function () {

            console.group("Updated  更新完成状态");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        beforeDestroy: function () {

            console.group("beforeDestroy  实例销毁之前");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        },

        destroyed: function () {

            console.group("Destoryed  实例销毁之后");

            console.log("el: " + this.$el);

            console.log("data: " + this.$data);

            console.log("message: " + this.message);

        }

    })

</script>

</body>

</html>

生命周期钩子函数

　　

Vue的生命周期
-- beforeCreate
-- created
-- beforeMount
-- mounted
-- beforeUpdate
-- updated
-- beforeDestroy
-- destroyed
node.js
跑在本地的js解释器
类比你下载Python

Vue第五篇 Vue的生命周期的更多相关文章

  1. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  2. 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  3. 【05】Vue 之 实例详解与生命周期

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

  4. Vue的项目搭建及请求生命周期

    目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

  5. Java多线程（五）线程的生命周期

    点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...

  6. Vue基础知识之指令和生命周期（一）

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

  7. Vue源码之组件化/生命周期(个人向)

    大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...

  8. vue自定义指令directives使用及生命周期

    生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...

  9. VUE【二、选项和生命周期】

    vue对象,类似于一个viewModel,是处理页面显示的数据模型的对象 其中会有很多选项,以下为较常用的: 选项 1.data-数据 vue实例会代理其data对象里的所有属性 2.methods- ...

  10. Vue.JS快速上手（组件生命周期）

    一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...

随机推荐

  1. 牛客小白月赛2 E题 是是非非 （尼姆博弈）

    题目链接:https://www.nowcoder.com/acm/contest/86/E 解题思路:由尼姆博弈我们可以知道,如果所有堆的石子数量异或为0,那么先手必败,否则先手必胜. 由异或我们可 ...

  2. Charles对Android手机Https请求的抓包

    Charles对Android手机Https请求的抓包 • 前情提要: 本文只是对android手机进行抓包的描述,由于android手机系统原因,android7.0系统及以上需要在app中配置证书 ...

  3. 基于一维卷积神经网络模型的AI量化智能选股策略

    这是早前BigQuant专题研究:基于卷积神经网络CNN的深度学习因子选股模型.卷积神经网络(Convolutional Neural Network, CNN),是计算机视觉研究和应用领域中最具影响 ...

  4. ElasticSearch给索引起"别名"和其重要性

    创建别名: https://www.elastic.co/guide/en/elasticsearch/reference/6.8/indices-aliases.html 我们有时候并不能确保索引库 ...

  5. Selenium-无头模式headless

    无头模式适合的场景: 部署到没有gui界面的服务器,比如linux 开发环境测试完全没问题后可以使用无头模式,提高selenium速度. # 使用headless无界面浏览器模式 chrome_opt ...

  6. 华企盾DSC客户端图标不显示常见处理方法

    1.检查是否启用了360桌面.猎豹桌面之类的(兼容腾讯桌面),打强制显示客户端图标的补丁 2.是否被杀毒软件查杀 3.用Autoruns查看explorer项图标那一栏前10个是否有我们图标没有的话把 ...

  7. Javascript面向对象的程序设计 —— 自定义类实现继承的6种方法

    许多OO语言都支持两种继承方式: 接口继承:只继承方法签名: 实现继承:继承实际的方法.ECMAScript只支持实现继承,实现继承是继承实际的方法,依靠原型链来实现.1.原型链原型链是实现继承的主要 ...

  8. Javascript面向对象的程序设计 —— 创建自定义类型的7种方法

    Object构造函数或对象字面量都可以用来创建单个对象,但是使用这些方式用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,工厂模式的一种变体开始被使用.1.工厂模式工厂模式抽象了创建具 ...

  9. Python——第五章：time模块、datetime模块

    time模块 在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime,calendar(很少用,不讲),下面分别来介绍. 我们写程序时对时间 ...

  10. JavaFx之SceneBuilder添加其他依赖库（十六）

    JavaFx之SceneBuilder添加其他依赖库(十六) Could not open 'xxxxx.jar' Open operation has failed. Make sure that ...