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. 通过 VS Code 优雅地编辑 Pod 内的代码（非 NodePort）

    目录 1. 概述 2. NodePort 方式 3. Ingress 方式 4. 救命稻草 5. 其他 1. 概述 今天聊点啥呢,话说,你有没有想过怎样用 VS Code 连上 K8s 集群内的某个 ...

  2. Json Schema简介和Json Schema的.net实现库 LateApexEarlySpeed.Json.Schema

    什么是Json Schema ? Json Schema是一种声明式语言,它可以用来标识Json的结构,数据类型和数据的具体限制,它提供了描述期望Json结构的标准化方法. 利用Json Schema ...

  3. Unity无法显示animator面板，如何解决？

    步骤: 点击动画的主体: 右侧Inspector面板找到Animator,双击Controller中的对象: 左上角即可显示animator面板. 总结: 不行就双击!!!!!!!!!!!!!!!!! ...

  4. 高版本jdk的访问私有成员属性的正确姿势

    在jdk17+已经不能直接通过 setAccessible 来访问私有属性了 Field name = access.getClass().getDeclaredField("name&qu ...

  5. 2023-10-11：用go语言，一个数字n，一定要分成k份， 得到的乘积尽量大是多少？ 数字n和k，可能非常大，到达10^12规模。 结果可能更大，所以返回结果对1000000007取模。 来自华为

    2023-10-11:用go语言,一个数字n,一定要分成k份, 得到的乘积尽量大是多少? 数字n和k,可能非常大,到达10^12规模. 结果可能更大,所以返回结果对1000000007取模. 来自华为 ...

  6. C++篇：第七章_结构体、共用体和枚举_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 七.结构体.共用体和枚举 (一)结构体 C++的结构体中可以有构造函数,例: s ...

  7. 云小课｜聊一聊DRS的数据过滤特性

    [本期推荐专题]在DevOps市场中,华为云DevCloud拔得头筹,看它如何助力企业面对商业环境瞬息万变快速响应. [摘要] 目前,DRS已支持其他云.本地IDC.ECS自建MySQL.SQL Se ...

  8. vue2升级vue3：vue3 hooks库选用

    之前a-hooks:https://ahooks.js.org/,比react-use 精简好用.但是没有vue版本的. 网上有个人实现的:https://github.com/dewfall123/ ...

  9. 实用指南：手把手搭建坚若磐石的DevSecOps框架

    长期以来,安全问题一直被当作软件开发流程中的最后一步.开发者贡献可以实现软件特性的代码,但只在开发生命周期的测试和部署阶段考虑安全问题.随着盗版.恶意软件及网络犯罪事件飙升,开发流程需要做出改变. 开 ...

  10. 火山引擎数智平台协助洞察美图类APP新增长，付费用户转化超过 124%

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 美图类 APP 的下一个增长点在哪里? 目前,国内市场上的美图类 APP 大多都遵循着基础功能免费使用.个性化热门 ...