<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项目创建时发生了什么 三.项目初始 ...
随机推荐
- 三分钟使用github的技巧
一.GitHub搜索技巧--找开发者 搜索条件 备注 location: location:china,匹配用户填写的地址在china language: language:javascript,匹配 ...
- javascript+php 实现blob加密视频（html video）
1.mp4地址加密为blob链接在html5的video标签展示 PHP: 1 $file_path = "...mp4"; //视频文件地址 2 ob_end_clean(); ...
- 数据库是mysql，使用DBeaver的SQL编辑器执行sql脚本文件时，报错：No active connection 。
遇到这种问题,多半是因为没有与数据库关联 具体操作点击右键,选择与数据库关联 结果如下 出现这个就好了.
- [ARC156C] Tree and LCS
Problem Statement We have a tree $T$ with vertices numbered $1$ to $N$. The $i$-th edge of $T$ conne ...
- UMP系统概述
突出性能: 1.低成本,高性能 2.开源数据库 UMP在设计时要实现一下原则: 多租户:
- 轻量型 Web SCADA 组态软件 TopLink
图扑物联 发布了一款工业物联网边缘侧应用场景的轻量型 Web SCADA 组态软件 Iotopo TopLink.该产品采用 B/S 架构,提供 Web 管理界面,软件包大小仅 23MB,无需安装客户 ...
- MYSQL数据库root账户密码忘记，如何重置？
- PersistenceException、ReflectionException、IllegalArgumentException、wrapException持久性异常 反射异常 非法参数异常 包装异常
PersistenceException.ReflectionException.IllegalArgumentException.wrapException wrapException 持久性异常 ...
- quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
- react 事件函数中 this 绑定问题
在使用类方式创建组件时,类中定义一个函数,并且绑定到元素的点击事件上,此时这个函数中this指向并不是当前这个组件. 组件代码如下: class App extends React.Component ...