<vue初体验> 基础知识 4、 vue的生命周期
系列导航
一、 效果
展示生命周期（不同生命周期的执行顺序）
二、代码结构
三、代码
04-Vue生命周期.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-Vue生命周期</title>
</head>
<body> <div id="app">
{{message}}
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World'
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
})
</script> </body>
</html>
四、代码解释
补充：
我们在创建Vue实例的时候，传入了一个对象options。
这个options中可以包含哪些选项呢？
查看文档：ps://cn.vuejs.org/v4/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
<vue初体验> 基础知识 4、 vue的生命周期的更多相关文章
- Vue基础知识之指令和生命周期（一）
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Android基础知识05—活动的生命周期
------ 活动的生命周期 ------ Android是使用任务Task来管理活动的,一个任务就是一组存放在栈里的活动的集合.每当启动一个活动 ,他就会在返回栈中入栈,并处于栈顶位置.而每当我们按 ...
- iOS系列 基础篇 03 探究应用生命周期
iOS系列 基础篇 03 探究应用生命周期 目录: 1. 非运行状态 - 应用启动场景 2. 点击Home键 - 应用退出场景 3. 挂起重新运行场景 4. 内存清除 - 应用终止场景 5. 结尾 本 ...
- iOS系列 基础篇 04 探究视图生命周期
iOS系列 基础篇 04 探究视图生命周期 视图是应用的一个重要的组成部份,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 以视图的四种状态为基础,我们来系统了解一下视 ...
- Vue框架之基础知识
在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...
- Vue初体验（一）
每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 可以看到在 V ...
- Vue学习计划基础笔记(一) - vue实例
最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...
- Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- vue中的父组件及子组件生命周期的执行顺序
一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...
- Vue项目的创建、路由、及生命周期钩子
目录 一.Vue项目搭建 1.环境搭建 2.项目的创建 3.pycharm配置并启动vue项目 4.vue项目目录结构分析 5.Vue根据配置重新构建依赖 二.Vue项目创建时发生了什么 三.项目初始 ...
随机推荐
- 吉特日化MES系统&各类化妆品检验标准汇总
在日化行业中,生产配料过程中,对产品的检验主要分为四大类: (1) 感官指标 (2) 理化指标 (3) 微生物指标 (4) 毒理指标 根据每个产品的不同,其指标会有所不同
- [ABC261B] Tournament Result
Problem Statement $N$ players played a round-robin tournament. You are given an $N$-by-$N$ table $A$ ...
- MySQL运维4-Mycat入门
一.mycat概述 mycat是阿里巴巴企业下的开源的,基于JAVA语言编写的MySQL数据库中间件,可以像使用MySQL一样来使用Mycat,对于开发人员来说根本感觉不到mycat的存在.之前在国内 ...
- django-celery-beat插件使用
该插件从 Django 管理界面管理celery的定期任务,您可以在其中动态****创建.编辑和删除定期任务以及它们的运行频率. django-celery-beat提供了几种添加定时或周期性任务的方 ...
- 操作系统大作业：在Linux环境下模拟实现简单命令解释器（代码部分）
好家伙 1. 题目要求 一. 课程设计(大作业)目的 熟悉Linux编程环境,加强对Linux命令的理解及函数的运用,完成一个操作系统的部分系统的设计过程.编码.调试,锻炼实际应用能力. 二. ...
- 神经网络优化篇：详解其他正则化方法（Other regularization methods）
其他正则化方法 除了\(L2\)正则化和随机失活(dropout)正则化,还有几种方法可以减少神经网络中的过拟合: 一.数据扩增 假设正在拟合猫咪图片分类器,如果想通过扩增训练数据来解决过拟合,但扩增 ...
- Win10遇到服务器启动失败 80端口被占用如何解决
Win10提示"服务器启动失败,80端口被占用"怎么办?具体解决方法如下 步骤如下: 1.以管理员身份运行cmd; 2.输入:net stop http 注:如果提示是否真的需要停 ...
- MinIO客户端之mb
MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc mb MinIO对象锁定 桶版本控制 桶复制 站点复制概述 创建桶bkt1,命令如下: ./mc mb lo ...
- JVM学习-类加载机制
文章原文:https://gaoyubo.cn/blogs/4b481fd7.html 一.类加载机制 在JVM学习-Class文件结构中,讲了Class文件存储格式的具体细节.虽然Class文件中描 ...
- 神经网络基础篇：详解导数（Derivatives）
导数 一个函数\(f(a)=3a\),它是一条直线.下面来简单理解下导数.让 看看函数中几个点,假定\(a=2\),那么\(f(a)\)是\(a\)的3倍等于6,也就是说如果\(a=2\),那么函数\ ...