vue快速入门(二十六)生命周期钩子函数

注释很详细,直接上代码

上一篇

新增内容

  1. 生命周期钩子函数的解析
  2. 生命周期函数效果演示

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 挂载点 --><div id="root"><h1>{{msg}}</h1><button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button></div><!-- 导入vue的js代码:不会下载的看专栏第一篇 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据msg:'生命周期钩子函数演示',count:100},        beforeCreate(){// 创建阶段,此时不能调用data中的数据,也不能调用methods中的方法console.log('beforeCreate',this.msg)},created(){// 创建完成,此时可以调用data中的数据,但并且可以调用methods中的方法console.log('created',this.count)},beforeMount(){// 挂载阶段,此时数据还没渲染到页面中console.log('beforeMount',document.querySelector('h1'))},mounted(){// 挂载完成,此时数据已经渲染到页面中console.log('mounted',document.querySelector('h1'))},beforeUpdate(){// 更新阶段,数据更新了但页面中的数据还未更新console.log('beforeUpdate',this.count,document.querySelector('span').innerHTML) },updated(){// 更新完成,数据已经更新了,页面中的数据也已经更新了console.log('updated',this.count,document.querySelector('span').innerHTML) },beforeDestroy(){// 销毁阶段,此时vue实例还未销毁,方法与页面中的数据还未销毁console.log('beforeDestroy',this.msg)},destroyed(){// 销毁完成,此时vue实例已经销毁console.log('destroyed',this.msg)},methods: {// 方法},computed:{// 计算属性},watch:{// 侦听器}})</script>
</body></html>

效果演示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/58.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB初学者入门(2)—— 进阶技巧

信号处理和图像处理 MATLAB非常适合进行信号处理和图像处理&#xff0c;这得益于其强大的内置函数和专门的工具箱。 信号处理工具箱 提供了分析、滤波、转换和提取信号特征的工具。 fs 1000; % 采样频率1000 Hz t 0:1/fs:1-1/fs; x cos(2*pi*100*t) randn(size(t)); % 生…

《Linux运维总结:Kylin V10+ARM架构CPU基于docker-compose一键离线部署mongodb4.0.11之副本集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面向不通的客户安装我们的业务系统&…

华为“天才少年”4万字演讲:现在的AI技术要么无趣,要么无用

近期&#xff0c;一篇4万字的演讲风靡于国内人工智能&#xff08;AI&#xff09;学术圈。 原华为“天才少年”、Logenic AI公司联合创始人李博杰博士&#xff0c;日前发表了一篇关于AI Agent思考的文章&#xff0c;题为“AI Agent 应该更有趣还是更有用”。 李博杰在这篇文章…

Claude国内镜像网站

AI生产力工具Claude 3私藏链接大公开&#xff01; &#x1f680; 国内尚未开放注册&#xff1f;别担心&#xff0c;这里有你想要的解决方案&#xff01; &#x1f517; 私藏链接&#xff1a;https://hiclaude3.cn &#x1f31f; 推荐指数&#xff1a;&#x1f31f;&#x1f…

多路复用-select

select 实现与应用 select 的原理基本函数select对fd_set 操作 用select搭建一个简单的服务端总结 select 的原理 在网络IO一篇中我们讲到了5种的IO网络模型。而select则是多路复用中的一种。它把等待数据就绪和读取数据区分开&#xff0c;实现了单线程操作多个网络IO的功能。 …

c++中各种运算符

c中各种运算符 1. 算术运算符&#xff1a; 加法运算符&#xff1a;减法运算符&#xff1a;-乘法运算符&#xff1a;*除法运算符&#xff1a;/取模运算符&#xff08;取余数&#xff09;&#xff1a;%&#xff08;取模运算符&#xff09; 2. 关系运算符&#xff1a; 相等运算…

探索设计模式的魅力:融合AI大模型与函数式编程、开启智能编程新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#xff1a;探索设计模式的魅力&#xff1a;融合AI大模型与函数式…

葡萄书--图卷积网络

现有图神经网络皆基于邻居聚合的框架&#xff0c;即为每个目标节点通过聚合其邻居刻画结构信息&#xff0c;进而学习目标节点的表示 谱域方法&#xff1a;利用图上卷积定理从谱域定义图卷积。空间域方法&#xff1a;从节点域出发&#xff0c;通过在节点层面定义聚合函数来聚合…

如何把PDF转成word文件?三个好用的方法推荐给你

PDF转Word的问题&#xff0c;一直是许多人在处理文档时经常遇到的挑战。PDF作为一种广泛使用的文件格式&#xff0c;具有许多优点&#xff0c;如保持文档的原始布局、防止内容被轻易修改等。然而&#xff0c;这也意味着PDF文件在某些情况下不易编辑&#xff0c;特别是当需要对其…

Linux系统一键安装DataEase结合内网穿透实现公网访问本地WebUI界面

文章目录 前言1. 安装DataEase2. 本地访问测试3. 安装 cpolar内网穿透软件4. 配置DataEase公网访问地址5. 公网远程访问Data Ease6. 固定Data Ease公网地址 前言 DataEase 是开源的数据可视化分析工具&#xff0c;帮助用户快速分析数据并洞察业务趋势&#xff0c;从而实现业务…

蓝桥杯刷题-约数的个数

3377. 约数的个数 - AcWing题库 #include <bits/stdc.h>using namespace std;int n; int Get(int x) {int ans 0;for(int i 1;i < x / i; i ){if(x % i 0 && i ! x / i) ans 2;if(x % i 0 && i x / i) ans 1;}return ans; }int main() {cin &…

【WEEK8】学习目标及总结【MySQL+Spring Boot】【中文版】

学习目标&#xff1a; 完成MySQL部分的学习 开始学习SpringBoot 学习内容&#xff1a; 参考视频教程【狂神说Java】MySQL最新教程通俗易懂事务数据库连接池 参考视频教程【狂神说Java】SpringBoot最新教程IDEA版通俗易懂Spring Boot总览Spring Boot运行原理 学习时间及产出&a…

基于51单片机点滴输液控制系统LCD显示( proteus仿真+程序+设计报告+讲解视频)

基于51单片机点滴输液控制系统LCD显示 1. 主要功能&#xff1a;2. 讲解视频&#xff1a;3. 仿真设计4. 程序代码5. 设计报告6. 设计资料内容清单&&下载链接 基于51单片机点滴输液控制系统LCD显示( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus7.8及以上…

SpringBoot 集成Swagger3

说明&#xff1a; 1&#xff09;、本文使用Spring2 集成Swagger3&#xff0c; 本想使用Springboot3 jdk 17 集成Swagger3, 但是搜了一些资料&#xff0c;Spring 想引用swagger3 需要依赖降级使用Spring2 版本&#xff0c;不然会出现下图的报错信息&#xff0c; 或者使用Sprin…

python笔记 | 哥德巴赫猜想

哥德巴赫猜想&#xff1a;每个不小于6的偶数都可以表示成两个素数之和。 素数&#xff1a;只能被1和自身整除的正整数。就是大于1且除了1和它本身之外没有其他因数的数。例如&#xff0c;2、3、5、7、11等都是素数&#xff0c;而4、6、8、9等则不是素数。 下面这段Python代码…

Python学习(四)文件操作

文件操作 想想我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤(简称文件操作三步走): ① 打开文件 ② 读写文件 ③ 关闭文件 注意:可以只打开和关闭文件&#xff0c;不进行任何读写 在Python&#xff0c;使用open函数&#xff0c;可以打开一个已经存在的文件&…

【Java】处理工具类详解

在Java开发中&#xff0c;日期和时间的处理是一个绕不开的话题。Java自身提供了丰富的API来处理日期和时间&#xff0c;但是使用起来可能较为繁琐。因此&#xff0c;许多开发者会使用一些工具类来简化日期和时间的处理。本文将介绍一个常用的日期处理工具类——DateUtils&#…

LeetCode 2007.从双倍数组中还原原数组:哈希表——从nlogn到n

【LetMeFly】2007.从双倍数组中还原原数组&#xff1a;哈希表——从nlogn到n 力扣题目链接&#xff1a;https://leetcode.cn/problems/find-original-array-from-doubled-array/ 一个整数数组 original 可以转变成一个 双倍 数组 changed &#xff0c;转变方式为将 original …

环形链表的约瑟夫问题(牛客网)

/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param n int整型 * param m int整型 * return int整型*/struct ListNode * BuyNode(int n)//创建节点和成环{ struct ListNode *pheadNULL;struct ListNode *ptailN…

吐血整理!跨境电商全年选品方向!一年12个月热点解析

一月 演出服、礼盒、贺卡、装饰品、彩带、拉花、红地毯、邀请函、荧光棒、泡泡机等。 二月 超级碗&#xff1a;投影仪、蓝牙音箱、超级碗电子游戏、望远镜、运动类产品等&#xff1b; 情人节&#xff1a;珠宝、服饰饰品、巧克力、香水、口红、烘焙用品、礼盒、个人护理、成…