<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项目创建时发生了什么 三.项目初始 ...
随机推荐
- stm32存储器：Flash
先擦除后写入,stm32内置flash擦或写时,必须打开外部/内部高速振荡器. 擦除操作 以页为单位,每页1024个字节 起始地址0x0800 0000 擦写时要避开用户程序存储区 最多擦写10万次 ...
- [AGC024F] Simple Subsequence Problem
Problem Statement You are given a set $S$ of strings consisting of 0 and 1, and an integer $K$. Find ...
- [gym104076][CCPC2022济南站L] Tree Distance
You are given an unrooted weighted tree \(T\) with vertices \(1,2,-,n\). Please answer some queries. ...
- 后端程序员必会的前端知识-03：Vue2
三. Vue 2 1. Vue 基础 1) 环境准备 安装脚手架 npm install -g @vue/cli -g 参数表示全局安装,这样在任意目录都可以使用 vue 脚本创建项目 创建项目 vu ...
- modeless dialog in html
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8& ...
- ElasticSearch之Health API
查看当前集群全部健康指标的信息,执行如下命令: curl -X GET "https://localhost:9200/_health_report?pretty" --cacer ...
- 【JVM】一文掌握JVM垃圾回收机制
作为Java程序员,除了业务逻辑以外,随着更深入的了解,都无法避免的会接触到JVM以及垃圾回收相关知识.JVM调优是一个听起来很可怕,实际上很简单的事. 感到可怕,是因为垃圾回收相关机制都在JVM的C ...
- 扩展中国剩余定理（Excrt）笔记
扩展中国剩余定理(excrt) 本来应该先学中国剩余定理的.但是有了扩展中国剩余定理,朴素的 CRT 就没用了. 扩展中国剩余定理用来求解如下形式的同余方程组: \[\begin{cases} x \ ...
- Docker + Jenkins 如何实现自动化部署？
Docker + Jenkins 如何实现自动化部署? 一. 概述 实验室每次项目发布测试时,都要手动本地打包好了然后上传到服务器,替换原来nginx下面的目录文件,十分麻烦和繁琐.这次就来优化一下, ...
- 一些Mybatis的知识点&易错点总结
1.映射文件配置容易出错 在映射文件中,我们习惯性在sql语句后面添加';'. 结果是报了一堆错误: org.apache.ibatis.exceptions.PersistenceException ...