Vue第五篇 Vue的生命周期
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的生命周期的更多相关文章
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue的项目搭建及请求生命周期
目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...
- Java多线程（五）线程的生命周期
点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...
- Vue基础知识之指令和生命周期（一）
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Vue源码之组件化/生命周期(个人向)
大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...
- vue自定义指令directives使用及生命周期
生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...
- VUE【二、选项和生命周期】
vue对象,类似于一个viewModel,是处理页面显示的数据模型的对象 其中会有很多选项,以下为较常用的: 选项 1.data-数据 vue实例会代理其data对象里的所有属性 2.methods- ...
- Vue.JS快速上手（组件生命周期）
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
随机推荐
- Redis入门实践
安装Redis 下载:官网:https://redis.io/download/,选择稳定版下载. 上传至linux 解压Redis:tar -zxvf redis-6.2.7.tar.gz,得到: ...
- JavaFx之播放MP4（二十七）
JavaFx之播放MP4(二十七) JavaFX 视频和音频支持,由 JavaFX 媒体类 Media.MediaPlayer.MediaView 和 AudioClip 提供. import jav ...
- STM32CubeMX教程10 RTC 实时时钟 - 周期唤醒、闹钟A/B事件和备份寄存器
本实验主要使用STM32CubeMX软件配置STM32F407开发板实现RTC周期唤醒.闹钟A/B事件功能,周期唤醒中输出RTC时间,闹钟A/B事件发生时利用串口输出闹钟A/B事件发生提示 1.准备材 ...
- 【华为云技术分享】云容器引擎 CCE权限管理实践
随着容器化的快速发展,大数据原有的分布式任务调度模式,正在被基于Kubernetes的技术架构所取代.CCE云容器引擎是华为云推出的支持Kubernetes社区原生应用和工具,应用级自动弹性伸缩,自动 ...
- GaussDB(DWS)运维 ：遇到truncate执行慢，怎么办？
摘要:truncate执行慢,耗时长达几十到几百秒,这可怎么破? 本文分享自华为云社区<GaussDB(DWS)运维 -- truncate慢>,作者: 譡里个檔. [现象]truncat ...
- Taro架构构析(2)：Taro 设计思想及架构
从之前微信公众号的开发经验来说,以及腾讯开放平台的接入 等经验来看,一直对腾讯的开放文档 有心理阴影. 微信小程序从文件组织上看,一个小程序页面或组件,需要同时包含 4 个文件:脚本逻辑.样式.模板以 ...
- 万字长文|Hadoop入门笔记（附资料）
大数据迅速发展,但是Hadoop的基础地位一直没有改变.理解并掌握Hadoop相关知识对于之后的相关组件学习有着地基的作用.本文整理了Hadoop基础理论知识与常用组件介绍,虽然有一些组件已经不太常用 ...
- 处理开发者账号到期导致APP下架的方处理开发者账号到期导致APP下架的方法
开发人员账号到期时,应采取以下步骤处理APP被下架问题: 登录开发者账号. 点击右上角的"账户",选择"续费". 输入信用卡信息,确保使用支持Visa的银行 ...
- 通用漏洞评分系统 (CVSS)系统入门指南
通用漏洞评分系统 (CVSS) 是一个公共框架 ,用于评估软件中安全漏洞的严重性.这是一个中立的评分系统,让所有企业能够使用相同的评分框架对各种软件产品(从操作系统.数据库再到 Web 应用程序)的 ...
- 标注BIO-精灵标注助手
目录 准备待标注数据 将待标数据生成文件 数据标注 下载标注软件 创建项目 标注数据 导出数据 ANN 转 BIO 推荐使用 Label Studio 准备待标注数据 创建 raw_data.txt ...