Vue(七) 生命周期和组件(一)

news2024/11/8 18:49:12

目录

1. 生命周期

1.1 引出生命周期

1.2 生命周期——挂载流程

1.3 生命周期——更新流程

1.4 生命周期——销毁流程

1.5 总结

2. 非单文件组件

2.1 对组建的理解

2.2 非单文件组件

2.3 组件的注意点

2.4 组件的嵌套

2.5 VueComponent构造函数


1. 生命周期

生命周期函数里得this都是vm

1.1 引出生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				生命周期:
						1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
						2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
						3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
						4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-if="a">你好啊</h2>
			<!-- style="{opacity}透明度是1 ,
	{opacity:opacity}第一个是css属性,第二个是数据的名(0/1不显示/显示)重名简写-->
			<h2 :style="{opacity}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				
			},
			//Vue完成模板的解析并把初始的(只调这一次)真实DOM元素放入页面后(挂载完毕)调用mounted
			mounted(){
				console.log('mounted',this)
				//setInterval不是vue管理的函数,每隔一段时间透明度变化函数
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通过外部的定时器实现(不推荐)
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>

1.2 生命周期——挂载流程

 

 

这里头得叫挂载流程 

1.3 生命周期——更新流程

1.4 生命周期——销毁流程

vm.$destroy属于自杀,下面带1得红圈是他杀 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root" :x="n">
			<h2 v-text="n"></h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="add">点我n+1</button>
			<button @click="bye">点我销毁vm</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
        //template不能做根标签使用
			
//用下面这种方式代表下面div里面的东西将全部替换上面<div id="root" :x="n">,会把x搞没
			// template:`用这个当模板了,最后又放在上面的div里面
			// 	<div> //h2和button必须两个包裹在div里面形成一个节点
			// 		<h2>当前的n值是:{{n}}</h2>
			// 		<button @click="add">点我n+1</button>
			// 	</div>
			// `,
			data:{
				n:1
			},
			methods: {
				add(){
					console.log('add')
					this.n++
				},
				bye(){
					console.log('bye')
					this.$destroy()
				}
			},
			watch:{
				//监视n变化
				n(){
					console.log('n变了')
				}
			},
			//8个生命周期钩子
			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>
</html>

 1.5 总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				常用的生命周期钩子:
						1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
						2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

				关于销毁Vue实例
						1.销毁后借助Vue开发者工具看不到任何信息。
						2.销毁后自定义事件会失效,但原生DOM事件依然有效。
						3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 :style="{opacity}">欢迎学习Vue</h2>
			<button @click="opacity = 1">透明度设置为1</button>
			<button @click="stop">点我停止变换</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		 new Vue({
			el:'#root',
			data:{
				opacity:1
			},
			methods: {
				stop(){
					this.$destroy()
					//暴力停下,不是简单得停下定时器
//点按钮时走stop.his.$destroy(),vm被干掉了,就开始走销毁流程beforeDestroy,然后定时器也被干掉了
				}
			},
	//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
			mounted(){
				console.log('mounted',this)
				this.timer = setInterval(() => {
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
			//clearInterval清除定时器
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},
		})

	</script>
</html>

2. 非单文件组件

2.1 对组建的理解

 

 

粉色框是实现js所需模块,红色框是组件

 单文件组件,由vue实例创建

 

2.2 非单文件组件

<!DOCTYPE html>//基本使用
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			Vue中使用组件的三大步骤:
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件?
						使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
						区别如下:
								1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
								2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
						备注:使用template可以配置组件结构。

			二、如何注册组件?
							1.局部注册:靠new Vue的时候传入components选项
							2.全局注册:靠Vue.component('组件名',组件)

			三、编写组件标签:
							<school></school>
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步:编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步:编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步:创建school组件,用vue里的extend
		const school = Vue.extend({
			//模板都用template表示了
			template:`
				<div class="demo">
					<h2>学校名称:{{schoolName}}</h2>
					<h2>学校地址:{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
// el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
//组件不能写el
              data(){
//组件data一定得用函数式,每次调用都会返回一个新值(两个变量同时调,其中一个变量里把它改了另一个不会有影响,但是用对象式会有影响)
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步:创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名:{{studentName}}</h2>
					<h2>学生年龄:{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步:创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊!{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步:全局注册组件(组件的名字,这个组件在哪)
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
	//创建vm时data可以写成一个对象,组件时不可以
			data:{
				msg:'你好啊!'
			},
			//第二步:注册组件(局部注册) 参数是key;value
			//school:school合并了,第二个school是上面的变量啥名都行
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>
</html>

2.3 组件的注意点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			几个注意点:
					1.关于组件名:
								一个单词组成:
											第一种写法(首字母小写):school
											第二种写法(首字母大写):School
								多个单词组成:
											第一种写法(kebab-case命名):my-school
											第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
								备注:
										(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法:<school></school>
								第二种写法:<school/>  得用脚手架环境
								备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

					3.一个简写方式:
								const school = Vue.extend(options) 可简写为:const school = options
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>{{msg}}</h1>
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({
//这得name定义的是开发者工具显示的名字,这个name不定义的话就用注册名
			name:'atguigu',
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			}
		})

		new Vue({
			el:'#root',
			data:{
				msg:'欢迎学习Vue!'
			},
			components:{
				school:s
	//注册的时候叫什么名,用的时候标签就得叫什么名儿
			}
		})
	</script>
</html>

2.4 组件的嵌套

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
<!-- 容器里面干干净净,完全靠下面的代码往里面放 -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//套娃:将student定义为school的子组件,在school定义组件的里面定义:components:{student}
//由于要在school组件里面调用student子组件,所以student子组件必须先定义
//两个都是局部注册,school注册给了vm,但是student注册给了school
		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名:{{name}}</h2>	
					<h2>学生年龄:{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
	//由于student组件注册给了school组件,所以vm里面没有student,调用需要从注册地调
	  //注册给谁就去谁的结构里面写
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件(局部)
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习!'
				}
			}
		})
		
//定义app组件,里面有所有组件(vm之下,所有组件之上,管理者),包括了子组件
//所以下面的vm里面可以只写一个app
		const app = Vue.extend({
			template:`
				<div>	
		//这么写意味着页面中hello比school先显示
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
	//要是html的div里面连<app></app>都不想写就在vm里面配置template(要带引号)
//最后结果是上面容器里的
	       template:'<app></app>',
			el:'#root',
			//注册组件(局部)
			components:{app}
		})
	</script>
</html>

2.5 VueComponent构造函数

组件实质就是一个构造函数

每一次调用Vue.extend,都是现定义 VueComponent再返回的,所以组件之间不影响,如下 

 vm管理着一个个vc

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			关于VueComponent:
						1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

						2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,
							即Vue帮我们执行的:new VueComponent(options)。

						3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

						4.关于this指向:
								(1).组件配置中:
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
								(2).new Vue(options)配置中:
											data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

						5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
							Vue的实例对象,以后简称vm。
				vm在管理着一个个vc
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称:{{name}}</h2>	
					<h2>学校地址:{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊!'
				}
			},
			components:{test}
		})


		// console.log('@',school)
		// console.log('#',hello)

		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>
</html>

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

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

相关文章

正版授权|FastStone Image Viewer 图像编辑转换浏览器软件,个人免费的图像浏览器、转换器和编辑器。

前言&#xff1a;快速、稳定、用户友好的图像浏览器、转换器和编辑器。它具有一系列不错的功能&#xff0c;包括图像查看、管理、比较、红眼去除、电子邮件、调整大小、裁剪、修饰和颜色调整。以下是软件页面。 FastStone Image Viewer 是一个快速、稳定、用户友好的图像浏览器…

软件安全测试需要考虑哪些问题?看看专业软件测评中心怎么说

互联网信息时代&#xff0c;软件产品为我们的生活和工作中带来了极大的便利。我们使用的软件都有包含个人资料以及各类信息等安全因素&#xff0c;因此软件的安全问题是用户最为关注的话题之一。可以有效保障软件产品安全的的关键手段便是软件安全测试&#xff0c;那么在进行软…

力扣sql入门篇(九)

力扣sql入门篇(九) 1 股票的资本损益 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 1.2 示例sql语句 # 每个用户的所有Sell的price值减去Buy的price值就可以了 SELECT e.stock_name,sum(e.price) capital_gain_loss FROM ( SELECT stock_name,operation,operation…

解决可见性的方案有哪几种,你都知道吗???

1. 前言 上次【保证原子性的几种方式&#xff0c;你都知道吗&#xff1f;&#xff1f;&#xff1f;】 经过一顿大杂烩后&#xff0c;列举了几种原子性的解决方案。这次我们继续上次的话题&#xff0c;我们来说说可见性的解决方案。废话不多说&#xff0c;让我们赶快开始吧。 2.…

【阶段二】Python数据分析Pandas工具使用10篇:探索性数据分析:数据的检验:正态性检验

本篇的思维导图: 探索性数据分析:数据的检验 数据检索,则是对数据深层次的探索或挖掘,用于验证数据是否服从某种假设,这部分内容将以数据的正态性检验、卡方检验和t检验为例,结合Python讲解具体的使用方法。 正态性检验 统计学中的很多模型或检验都需要…

java旅游日志博客系统旅行记录系统

简介 记录个人旅游动态日志的系统&#xff0c;也可以用来做博客系统&#xff0c;主页可以发布旅游日志&#xff0c;关注博主&#xff0c;给博主留言&#xff0c;管理评论&#xff0c;博文点赞&#xff0c;个人主页。 演示视频 https://www.bilibili.com/video/BV1rv41147W1/?…

(深度学习快速入门)第三章第三节1:深度学习必备组件之数据集处理和参数初始化

文章目录一&#xff1a;数据集的处理&#xff08;1&#xff09;数据集划分&#xff08;2&#xff09;数据集验证&#xff08;3&#xff09;标准化和归一化二&#xff1a;模型参数的初始化&#xff08;1&#xff09;梯度消失和梯度爆炸&#xff08;2&#xff09;模型参数初始化方…

Kafka概述

Kafka入门-1 视频资料&#xff0c;b站&#xff1a;https://www.bilibili.com/video/BV1eD4y1C7uM/?spm_id_from333.788.recommend_more_video.14&vd_source37596bc6f952081640b3f38ea9f6a2cb 深入理解 Kafka: 核心设计与实践原理。PDF 书资料&#xff1a; https://book.…

P8第一讲(选修):反向传播Backpropagation

8. 第 1 讲&#xff08;选修&#xff09;&#xff1a;反向传播_哔哩哔哩_bilibili Gradient Descent neual work基本架构已经学过了 backpropagation(反向传播)可以帮助我们有效的进行渐变迭代计算(帮助计算梯度)。 假设网络有一大堆参数&#xff1a; 首先选一个初始的参数&…

零基础多图详解图神经网络(GNN/GCN)【论文精读】

原文链接&#xff1a; A Gentle Introduction to Graph Neural Networks (distill.pub) 我们不仅仅关系整个图的架构&#xff0c;其实我们更关心的是每个顶点每条边和整个图所表示的信息。 我们如何把我们想要的信息表示成以上这些向量&#xff0c;以及这些向量是否能够通过数据…

uni-app打开第三方地图软件进行导航

最近在开发字节小程序的过程中遇到地图导航的需求&#xff0c;相信大家也会遇到所以我为大家整理了一篇干货内容。 下面是我整理的代码案例---------记得喝水&#xff08;太“干”了&#xff0c;复制就能用&#xff09;。 效果图如下&#xff1a; 1.点击图标弹出弹框进行选择…

数据结构与算法基础——算法分析(1)

算法的定义 算法&#xff1a;对特定问题的求解方法和步骤的描述&#xff0c;在计算机中&#xff0c;他是指令的有限集合。 举例&#xff1a;求解一元二次方程的根 描述算法的基本方式&#xff1a; &#xff08;1&#xff09;自然语言 &#xff08;2&#xff09;流程图 &…

CSS3 弹性盒子(flex、flex-direction属性、flex-wrap属性、align-items属性、align-content属性)详解

文章目录flexflex-direction 属性flex-wrap 属性align-items 属性align-content 属性的使用flex 在 CSS3 中给 display 属性增加了新的属性值 flex&#xff0c;如果一个元素被设置 display:flex&#xff0c;说明该元素为弹性布局&#xff0c;也就是个弹性盒子。 flex 主要由两…

Linux traceroute 原理及使用

Linux traceroute 原理及使用 序 在某次接入数据的场景中&#xff0c;需要到对方 SFTP 服务器上&#xff0c;获取数据&#xff0c;但是在配置时发现在配置正确的情况下&#xff0c; 连接总是超时&#xff0c;最终排查后发现网络不通&#xff0c;打通网络后才正确连接&#xf…

【C++】函数重载

函数重载1.函数重载的背景2.函数重载的概念2.1参数类型不同的重载2.2参数个数不同的重载2.3参数类型顺序不同的重载2.4注意事项&#xff1a;仅仅是返回值不同无法构成函数重载3.C函数重载的原理---函数名字修饰4.函数重载总结1.函数重载的背景 在C语言中&#xff0c;我们写一个…

通信原理 | 基本概念

1 通信及通信系统 通信(Communication)是实现信息和消息传输的过程 通信系统(Communication System)的组成: 实现通信的所有硬件和软件设备、传输媒介以及各种通信协议等 消息(Message)、信息(Information)、信号(Signal)的区别: 消息通常指人的感官能够感受到的…

无刷电机高压与低压的选择与未来发展前景

近几年来&#xff0c;伴随无刷马达被戴森吸尘器全力以赴运用在家用电器上&#xff0c;颠覆了传统家电的3个产品运用场景&#xff0c;吹风筒就是这样的一个例子。 迅速风筒由于其加工工艺的创新能力&#xff0c;给大家增添了不一般的产品体验度。新型的迅速风筒&#xff0c;搭配…

2023我的前端面试小结

对事件委托的理解 &#xff08;1&#xff09;事件委托的概念 事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点&#xff0c;父节点可以通过事件对象获取到目标节点&#xff0c;因此可以把子节点的监听函数定义在父节点上&#xff0c;由父节点…

Elasticsearch:利用搜索提高医疗保健公平 - 用多语言 NLP 模型和分析来改善最终用户体验

随着更高生产力和更健康的人群寿命更长&#xff0c;医疗保健将成为社会最重要的方面之一。 COVID-19 大流行加速了现代技术的采用&#xff0c;并凸显了患者体验的重要性。 随着越来越多的消费者开始控制他们的数据&#xff0c;医疗保健系统变得捉襟见肘。 根据德勤和斯科茨代尔…

【High 翻天】Higer-order Networks with Battiston Federico (5)

目录扩散高阶扩散题外话高阶随机游走扩散 在给出建模之后&#xff0c;接下来讨论如何将传统意义下的扩散拓展到高阶系统。扩散是一个线性过程&#xff0c;但在许多不同的情况下都有强相关性。扩散这个词实际可指代两个不同的过程&#xff1a; 标准的扩散过程&#xff0c;或者…