Vue第五篇 Vue的生命周期
Vue生命周期简介
生命周期的钩子函数
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title> </head>
<body>
<div id="app">
<p>{{message}}</p>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello gaoxin!!"
},
beforeCreate: function () {
console.group("beforeCreate 创建实例之前===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // undefined
console.log("message: " + this.message);
},
created: function () {
console.group("Created: 创建实例完成===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeMount: function () {
console.group("beforeMount 挂载前状态==========");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
mounted: function () {
console.group("Mounted 挂载结束状态=============");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeUpdate: function () {
console.group("beforeUpdate 更新前状态=========");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group("Updated 更新完成状态");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy: function () {
console.group("beforeDestroy 实例销毁之前");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group("Destoryed 实例销毁之后");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
} })
</script> </body>
</html> 生命周期钩子函数
Vue的生命周期
-- beforeCreate
-- created
-- beforeMount
-- mounted
-- beforeUpdate
-- updated
-- beforeDestroy
-- destroyed
node.js
跑在本地的js解释器
类比你下载Python
Vue第五篇 Vue的生命周期的更多相关文章
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- 一起学习vue源码 - Vue2.x的生命周期(初始化阶段)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- 【05】Vue 之 实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue的项目搭建及请求生命周期
目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...
- Java多线程（五）线程的生命周期
点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...
- Vue基础知识之指令和生命周期（一）
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Vue源码之组件化/生命周期(个人向)
大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...
- vue自定义指令directives使用及生命周期
生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...
- VUE【二、选项和生命周期】
vue对象,类似于一个viewModel,是处理页面显示的数据模型的对象 其中会有很多选项,以下为较常用的: 选项 1.data-数据 vue实例会代理其data对象里的所有属性 2.methods- ...
- Vue.JS快速上手（组件生命周期）
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
随机推荐
- [CSP-S 2023] 密码锁
题目描述 小 Y 有一把五个拨圈的密码锁.如图所示,每个拨圈上是从 \(0\) 到 \(9\) 的数字.每个拨圈都是从 \(0\) 到 \(9\) 的循环,即 \(9\) 拨动一个位置后可以变成 \( ...
- 数字孪生结合GIS系统为旅游行业带来的改变
随着数字孪生技术的不断发展和普及,越来越多的行业开始意识到其潜在的价值和应用前景.在旅游行业中,数字孪生结合GIS系统的应用正在逐渐引起关注,并带来了诸多改变和创新. 数字孪生是指通过将现实世界中的实 ...
- android webview(外部浏览器)调起app
最近写的项目中涉及外部浏览器以及项目webview中调起app,所以总结下,和大家分享下. 总的实现方法还是比较简单的, 1:在清单中注册 首先在AndroidManifest文件中,注册一个过滤器 ...
- postman——预处理和断言
一.预处理 Pre-request Scrip 1.Pre-request Script是集合中请求发送之前需要执行的代码片段 2.请求参数中包含一个随机数或者请求header中包括一个时间戳,或者你 ...
- MinIO客户端之license
MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc license mc license info mc license register mc license ...
- Python——Html（内联框架<iframe>）
<iframe>(内联框架)是 HTML 中的一个标签,用于在当前文档中嵌入另一个文档.它提供了一种将一个 HTML 文档嵌套到另一个文档的方式,允许在一个页面中显示另一个页面的内容.以下 ...
- 零基础电气专业毕业生，花费9.9元自学前端，成都月薪6.5K
介绍 毕业于成都理工电气专业,大学毕业后进入了一家电气公司,月薪2000元.一直对互联网行业感兴趣,但由于没有相关专业背景,所以一直没有勇气转行. 转行契机 公司的书记想搞一个内部生产管理系统,看我们 ...
- electron入门之配置镜像加速（四）
electron入门到入土,配置阿里镜像加速.为了防止后面我们打包龟速,需要给electron配置阿里镜像加速 在下面的文件内添加阿里镜像加速,你的文件位置不一定是这个 C:\Program File ...
- ORA-28579 在从外部过程代理程序回调时，发生网络错误，ORA-06512 在"SDE.ST_GEOMETRY_SHAPELIB_PKG"
如图所示,在执行sde.st_transform方法时报错. 环境是arcgis10.8 oracle是12C,版本号是v12.1.0.2.0 但是执行ST_GEOMETRY方法是可以的,说明配置没 ...
- 前世今生：Kubernete 是如何火起来的？
本课时,我们就开始正式进入 Kubernetes 的学习,或许你已经听过或简单了解过 Kubernetes,它是一款由 Google 开源的容器编排管理工具,而我们想要深入地掌握 Kubernetes ...