<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项目创建时发生了什么 三.项目初始 ...
随机推荐
- JeecgBoot 框架升级至 Spring Boot3 的实战步骤
JeecgBoot 框架升级 Spring Boot 3.1.5 步骤 JEECG官方推出SpringBoot3分支: https://github.com/jeecgboot/jeecg-boot/ ...
- SpringBoot项目启动过程动态修改接口请求路径
背景 最近遇到一个技术需求,需要对其他多个已有的服务进行整合打包为一个整体的服务,项目启动过程发现一个问题,在controller层多个服务之间存在相同的RequestMapping接口请求路径,导致 ...
- 设备唯一标识方法（Unique Identifier）：如何在 Windows 系统上获取设备的唯一标识
原文地址 设备唯一标识方法(Unique Identifier):如何在 Windows 系统上获取设备的唯一标识 zz 唯一的标识一个设备是一个基本功能,可以拥有很多应用场景,比如软件授权(如何保证 ...
- 聊聊GLM基座模型的理论知识
概述 大模型有两个流程:预训练和推理. 预训练是在某种神经网络模型架构上,导入大规模语料数据,通过一系列的神经网络隐藏层的矩阵计算.微分计算等,输出权重,学习率,模型参数等超参数信息. 推理是在预训练 ...
- 测试member和coupon的远程调用
测试member和coupon的远程调用 想要获取当前会员领取到的所有优惠券.先去注册中心找优惠券服务, 注册中心调一台优惠券服务器给会员,会员服务器发送请求给这台优 惠券服务器,然后对方响应. Fe ...
- 面试官：请列举 Spring 的事务会失效的场景
在日常工作中,如果对 Spring 的事务管理功能使用不当,则会造成 Spring 事务不生效的问题.而针对 Spring 事务不生效的问题,也是在跳槽面试中被问的比较频繁的一个问题. 今天,我们就一 ...
- 微信小程序常用代码
在微信小程序中,可以使用 wx.showToast.wx.showLoading 和 wx.showModal 等方法来显示不同类型的提示框 wx.showToast:用于显示一条浮动的提示框,一般用 ...
- 学会这5种JS函数继承方式，前端面试你至少成功50%
摘要:函数继承是在JS里比较基础也是比较重要的一部分,而且也是面试中常常要问到的.下面带你快速了解JS中有哪几种是经常出现且必须掌握的继承方式.掌握下面的内容面试也差不多没问题啦~ 本文分享自华为云社 ...
- JVM内存模型，你看这一篇就够了
摘要:JVM是一种用于计算设备的规范,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的. 本文分享自华为云社区<[云驻共创]JVM内存模型的探知之旅>,作者:多米 ...
- PNG文件解读(1):PNG/APNG格式的前世今生
PNG格式的前世今生 png是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.PNG使用从LZ77派生的无损数据压缩算法--LZW专 ...