<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项目创建时发生了什么 三.项目初始 ...
随机推荐
- 聊聊数据库连接池 Druid
在 Spring Boot 项目中,数据库连接池已经成为标配,然而,我曾经遇到过不少连接池异常导致业务错误的事故.很多经验丰富的工程师也可能不小心在这方面出现问题. 在这篇文章中,我们将探讨数据库连接 ...
- LeetCode190：颠倒二进制（位运算分治! 时间复杂度O(1)）
解题思路:这道题很两种解法,常规的就是O(n),另一种就是巧妙的利用位运算实现分治,时间复杂度O(1),类似于归并排序.不过这个递归不是自顶向下,而是巧用位运算从自底向上实现. 比如01001000通 ...
- 16级C程序设计竞赛C题
问题 C: 回文 时间限制: 1 Sec 内存限制: 128 MB提交: 74 解决: 36[提交][状态][讨论版] 题目描述 给定一个字符串,你可以对字符串做任意改动,你可以在任意地方增加一个 ...
- bash shell笔记整理——less命令
less命令的作用 less和cat.more最大的差别在于不会一次性加载整个文件,速度比较快!另外less具备翻页功能,可以向上/向下翻页! 语法 less [选项] [文件名] *选项* *使用说 ...
- 从Redis读取.NET Core配置
在本文中,我们将创建一个自定义的.NET Core应用配置源和提供程序,用于从Redis中读取配置.在此之前,您需要稍微了解一些.NET Core配置提供程序的工作原理,相关的内容可以在Microso ...
- Android辅助功能
1:AccessibilityService 新建service public class AccessibilityService extends android.accessibilityserv ...
- VisionPro学习笔记（6）——如何使用QuickBuild
如果需要了解其他图像处理的文章,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice ...
- 技术实践丨PostgreSQL插件之pg_dirtyread "闪回查询"
摘要:Oracle数据库有时候不小心删除掉数据,想查询这些数据,或者恢复数据,就可以使用带有as of子句的select语句进行闪回查询. PG粉有福了,下面介绍一种类似"闪回查询" ...
- 云小课｜GaussDB(DWS)数据存储尽在掌控，冷热数据切换自如
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: GaussDB( ...
- 测试用例又双叒叕失败了，NLP帮你
摘要:本文将介绍如何使用AI技术实现失败测试用例的智能分析. 本文分享自华为云社区<测试用例又双叒叕失败了,啥原因?NLP帮你来分析>,作者: 敏捷的小智 . 随着软件行业的快速发展,为了 ...