VUE核心

文章目录

🚏 一、VUE核心

😹 作者: gh-xiaohe
😻 gh-xiaohe的博客
😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！

🚏 一、VUE核心

🚀 1、Vue

🚬 1、Vue是什么？

在这里插入图片描述

🚬 2、Vue的特点

1、采用组件化模式，提高代码复用率、且让代码更好维护。

在这里插入图片描述

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率。

在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

在这里插入图片描述

🚄 2、Vue官网

1、英文官网:

2、中文官网:

🚒 3、HelloWord案例

总结：初识Vue：

		{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a			变量
									(2). a+b		运算表达式	
									(3). demo(1)	函数调用表达式
									(4). x === y ? 'a' : 'b' 三元表达式

						2.js代码(语句)
									(1). if(){}		判断语句
									(2). for(){}	循环语句
		-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

id 选择器（建议使用）

		
			Hello，{{name}}，{{address}}
		

		
	
	

		
		
			
			Hello，{{name.toUpperCase}}，{{address}}
		

		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

🚤 4、Vue模板语法

总结：

		{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
1
2
3
4
5
6
7
8
9
10
11
12

🚬 插值语法（双大括号表达式{{}} ）

1、功能: 用于解析标签体内容

2、语法: {{xxx}} ，xxxx 会作为 js 表达式解析

🚬 指令语法（以 v-开头）

1、功能: 解析标签属性、解析标签体内容、绑定事件

2、举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析（Vue 中有有很多的指令，此处只是用 v-bind 举个例子）

🚬 什么时候使用插值语法什么时候是指令语法

插值语法：往往制定标签体内容
指令语法：制定标签属性



	
		
		模板语法
		
		
	
	
		{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
		
		
			插值语法
			你好，{{name}}
			
			指令语法
			点我去{{school.name}}学习1
			

			
			点我去{{school.name}}学习2
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

🚗 5、Vue数据绑定

总结：
		
1
2
3
4
5
6
7
8

🚬 单向数据绑定

1、语法：v-bind:href =“xxx” 或简写为 :href

2、特点：数据只能从 data 流向页面

🚬 双向数据绑定

1、语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”

2、数据不仅能从 data 流向页面，还能从页面流向 data

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EW0iUfTZ-1658758735342)(VUE入门.assets/image-20220723131111024.png)]

🚭 v-model的应用位置

并不是所有的值都是可以用v-model
v-model只能应用在表单类元素（输入类元素）
- 表单类元素，是用户可以操作的，标题类的标签，不可以输入（没有Value值），不能捕获用户的输入，无法影响数据的变化

🚲 6、el和data的两种写法

总结：

🚬 el的两种写法

🚭 方式一：

//第一种写法
	new Vue({
			el:'#root', 
			data:{
				name:'Tom'
			}
		})
1
2
3
4
5
6
7

🚭 方式二：更灵活一下

	//第二种写法
	Vue vm = new Vue({
			el:'#root', 
			data:{
				name:'Tom'
			}
		})
		console.log(v) // 输出Vue实例，不是Vue构造函数
		vm.$mount('#root')
1
2
3
4
5
6
7
8
9

	Vue vm = new Vue({
			el:'#root', 
			data:{
				name:'Tom'
			}
		})
		console.log(v) // 输出Vue实例，不是Vue构造函数
		// 定时器，一秒钟后执行
		setTimeout(() => {
		vm.$mount('#root')
		},1000);
1
2
3
4
5
6
7
8
9
10
11

🚭 Vue实例：

在这里插入图片描述

🚬 data的两种写法

🚭 方式一：对象式

		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			 data:{
				name:'Tom'
			} 
		})
1
2
3
4
5
6
7

🚭 方式二：函数式

要求：data函数必须要返回一个对象return

data是普通函数时 this是Vue实例对象

写法一：
		new Vue({
			el:'#root',
			//data的第二种写法：函数式
			data:function(){
				console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
				return{
					name:'Tom'
				}
			}
		})
1
2
3
4
5
6
7
8
9
10
写法一：
		new Vue({
			el:'#root',
			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //data函数中 this是Vue实例对象,前提data是普通函数
				return{
					name:'Tom'
				}
			}
		})
1
2
3
4
5
6
7
8
9
10
data是箭头函数时 this是全局的Window（箭头函数没有自己的this，向外找是window）
		new Vue({
			el:'#root',
			data:()=>{ // 此时data 不是普通函数 是箭头函数，此时this是全局的Window 
				console.log('@@@',this) 
				return{
					name:'Tom'
				}
			}
		})
1
2
3
4
5
6
7
8
9
拓展：使用组件时候必须使用data函数式，不可以使用对象式

🚀 7、MVVM模型

总结：
		
1
2
3
4
5
6
7
8
9

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

在这里插入图片描述

🚬 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用：你可以把一些视图逻辑放在一个Vi ewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

在这里插入图片描述

🚬 MVVM模式的实现者

Model：模型层，对应data中的数据

View：视图层，在这里表示DOM(HTML操作的元素) 模板

ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 Vue实例对象

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model层交互，获取和更新数据，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而View Model就是定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了， Vue.js就是一个MVVM的实现者，他的**核心就是实现了DOM监听与数据绑定**

🚄 8、数据代理

🚬 1、回顾Object.defineProperty方法

解释：define定义Property属性，给一个对象定义属性

传递三个参数：哪个对象添加属性，添加的属性名字，{}配置项

①两种方式：给person添加age属性区别一： age不可以被枚举

②两种方式：给person添加age属性区别一： age不可以被修改

③两种方式：给person添加age属性区别一： age不可以被删除

④高级：根据变量number来设置/获取age 的属性值



	
		
		回顾Object.defineproperty方法
	
	
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

🚬 数据代理的定义

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

在这里插入图片描述

🚬 Vue中如何应用数据代理

总结：

vm.-data == data true vm自身的-data 和传递的data是一个



	
		
		Vue中的数据代理
		
		
	
	

		
			学校名称：{{_data.name}}
			学校地址：{{_data.address}}
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

🚒 9、事件处理

🚬 事件的基本使用

总结：

①v-on事件绑定简写：@



	
		
		事件的基本使用
		
		
	
	

		
			欢迎来到{{name}}学习
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

②事件绑定传递参数 event

event.target 拿到发生事件的时间目标此时是 button按钮

event.target.innerText 拿到里面的文字此时是点我提示信息



	
		
		事件的基本使用
		
		
	
	

		
			欢迎来到{{name}}学习
			 

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

③ 调用shouInfo2传递参数, 不仅仅收到event 还有收到数值

🚬 事件修饰符

总结：

① a标签跳转阻止跳转的默认行为

e.preventDefault()// 阻止默认行为 Vue 中不用亲自书写应这样书写@click.prevent



	
		
		事件修饰符
		
		
	
	

		
			欢迎来到{{name}}学习
			
			点我提示信息

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

② 阻止冒泡点击的是按钮冒泡到div身上

e.stopPropageation()



	
		
		事件修饰符
		
		
  		
	
	

		
			欢迎来到{{name}}学习

      
			
				
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

③ 事件只触发一次



	
		
		事件修饰符
		
		

	
	

		
			欢迎来到{{name}}学习

			
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

④ 使用事件的捕获模式点击box2 传递 2 点击 box1 传递 1

没有阻止冒泡点击 2 控制台输入 2 1 捕获阶段由外向内触发阶段是由内向外

capture 捕获模式点击 2 控制台输入 1 2



	
		
		事件修饰符
		
		
		
	
	

		
			欢迎来到{{name}}学习

			
			
				div1
				
					div2
				
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

⑤ self：只有event.target是当前操作的元素时才触发事件；



	
		
		事件修饰符
		
		
		
	
	

		
			欢迎来到{{name}}学习

			
			
				
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

⑥ passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

wheel 鼠标滚轮事件



	
		
		事件修饰符
		
		
		
	
	

		
			欢迎来到{{name}}学习


			
			
				1
				2
				3
				4
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

⑦ 修饰符可以连续先阻止默认行为在阻止冒泡

		
			
			点我提示信息
		
1
2
3
4

🚬 键盘事件

总结：
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
keyup 按下弹起来触发（常用）

keydoun 按下触发

判断回车 event.keycode 按键编码（key 按键）回车对应数字 13

if（e.keyCode !== 13） return Vue 中 @keyup.enter=“”

① 按下回车
	
		
		键盘事件
		
		
	
	

		
			欢迎来到{{name}}学习
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
② 使用 CapsLock 切换大小写按键多个单词使用 caps-lock

console.log(e.key,e.keyCode) 获取按键名和按键编码
	
		
		键盘事件
		
		
	
	

		
			欢迎来到{{name}}学习
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
③ 有些特殊的按键，无法绑定，举例：特殊键盘的控制音量键

④ top 键有些特殊是失去焦点事件只能配合keydown使用

⑤也可以使用keyCode去指定具体的按键（不推荐）不同的键盘编码可能不统一
		
			欢迎来到{{name}}学习
			
		
1
2
3
4
⑥ Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）
		
			欢迎来到{{name}}学习
			
		

		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
1
2
3
4
5
6
⑦ 只用按ctrl + y 时才有效(系统修饰键后面可以加按键)
		
			欢迎来到{{name}}学习
			
		
1
2
3
4

🚤 10、计算属性 computed

🚬 姓名案例_插值语法实现



	
		
		姓名案例_插值语法实现
		
		
	
	
		
		
			姓： 


			名： 


			全名：{{firstName}}-{{lastName}}
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

🚬 姓名案例_methods实现

数据发生改变Vue一定会重写解析模板，重新解析模板才知道模板里面的内容用到了这个姓,然后把姓更新



	
		
		姓名案例_methods实现
		
		
	
	
		
		
			姓： 


			名： 


			全名：{{fullName()}}
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

🚬 姓名案例_计算属性实现

总结：类似于缓存多次调用相同数据时走缓存



	
		
		姓名案例_计算属性实现
		
		
	
	

		
			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

🚬 计算属性简写(只读时可以使用)

计算属性更多的情况是不修改，呈现给用户看：

完整写法:

			computed:{
				//完整写法
				 fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} 
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

简写:

			computed:{
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
1
2
3
4
5
6
7

🚗 11、监视属性（侦听属性） watch

immediate:true, //初始化时让handler调用一下

deep:true, //深度监视

🚬 天气案例

1
2



	
		
		天气案例
		
		
	
	
		
		
			今天天气很{{info}}
			
			
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

🚬 天气案例_监视属性

总结：

二者的区别：在创建时就明确监视对象方式一、不明确时方式二

方式一：



	
		
		天气案例_监视属性
		
		
	
	
		
			今天天气很{{info}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

方式二：

🚬 天气案例_深度监视

总结：

① 只监测a的变化不监测b 错误

按照上面的写的书写出错

存在的属性是 isHot、numbers 存在的计算属性是 info 不存在所写的a

应该是 numbers .a, 但是会报错还原为最初的写法 ‘numbers .a’ , 正常的key 都是 ’ key ’ 简写 key 多个属性时 ‘key.s’ 误区



	
		
		天气案例_深度监视
		
		
	
	

		
			今天天气很{{info}}
			
			
			a的值是:{{numbers.a}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

			watch:{
				// 监视多级结构中某个属性的变化
				'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				},
1
2
3
4
5
6
7

② 监视 a 和 b的变化

numbers 错误此时监视的是numbers 而不是监视 numbers 里面属性a和b的变化

		// 此时 numbers 发生改变 监视的numbers 	
		<button @click="numbers = {a:666,b:888}">彻底替换掉numbersbutton>
1
2

② 监视 a 和 b的变化正确配置项 deep:true 开启深度监测

🚬 天气案例_监视属性_简写

要求： 不需要配置项时，可以使用简写

① watch 方式一：正常写法

			watch:{
				//正常写法
				isHot:{
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, 

			}
1
2
3
4
5
6
7
8
9

② watch 方式一：简写不允许书写成箭头函数

			watch:{
				//简写
				isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} 
			}
1
2
3
4
5
6

③ watch 方式二：正常写法

		//正常写法
		vm.$watch('isHot',{
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) 

1
2
3
4
5
6
7

④ watch 方式二：简写不允许书写成箭头函数

		//简写
		 vm.$watch('isHot',function(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue,this)
		}) 
1
2
3
4

🚬 姓名案例_watch实现和计算属性做个对比

总结：

初始值需要自己配置，需要监视姓，还需要监视名



	
		
		姓名案例_watch实现
		
		
	
	

		
			姓： 


			名： 


			全名：{{fullName}} 


		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

② 需要姓名改变时，全名延迟 1s实现此时只能使用 watch

watch 靠的不是返回值,靠的值自己亲自修改

定时器 setTimeout 所指定的函数不是 Vue 所管理的函数，此时一定要是箭头函数,不能书写成普通函数，定时器指定的是Js引擎

			watch:{
				firstName(newValue){
					setTimeout(()=>{ // 定时器,延迟器  
						console.log(this)
						this.fullName = newValue + '-' + this.lastName
					},1000);
				},
				lastName(newValue){
					this.fullName = this.firstName + '-' + newValue
				}
			}
1
2
3
4
5
6
7
8
9
10
11

计算属性不能开启异步任务靠的就是return 返回值此时把renturn的返回值返回给了 setTimeout，fullName没有返回值

			computed:{
				 fullName:{
					setTimeout(()=>{
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},1000)
				} 
			}
1
2
3
4
5
6
7
8

🚲 12、class和style绑定（绑定样式）

总结：

① 样式

② div 有两个样式 basic 基础的和一个心情 normal 点击后变成 happy

正常的样式，正常书写，变化的样式绑定的方式

③ 在② 的基础上修改变成随机切换心情

④ div 初始有 basic 样式日后可能增加样式多少个不确定

把需要使用的样式都配置到 data 的 classArr 中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ybk9k4EU-1658758735345)(VUE入门.assets/image-20220724213709207.png)]

⑤ div 初始有 basic 样式切换text1 和 text2 （切换的个数确定，名字也确定，不确定的是到底使用不使用）对象写法

在这里插入图片描述

⑥ 绑定style样式–对象写法推荐

麻烦方式:

{{name}}
 



		const vm = new Vue({
			el:'#root',
			data:{
				fsize: 40
			},
		})
1
2
3
4
5
6
7
8

正常方式

在这里插入图片描述
⑦ 绑定style样式–数组写法使用较少

// 方式一：

	{{name}}
 


1

方式二：

🚀 13、条件渲染

总结：
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
① 让div 隐藏 v-show

不仅可以可以写 boolean 值 v-show=“false”
也可以写表达式用表达式的结果来进行判断 v-show=“1 === 1”
此时结构存在但是不显示
	
		
		条件渲染
		
	
	

		

			
			欢迎来到{{name}}
			欢迎来到{{name}}

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
② 使用 v-if进行条件渲染

此时结构斗都不存在
同样可以使用boolean 和表达式
		

			
			欢迎来到{{name}}
			欢迎来到{{name}}

		
1
2
3
4
5
6
7
③ 小案例：n=0 ,点击n++，n=1时展示一个div，n=2时展示一个div，n=3时展示一个div
			// v-if 实现
			Angular
			React
			Vue
			// v-show 实现
			Angular
			React
			Vue
1
2
3
4
5
6
7
8
二者之间的区别

当切换频率高时，使用v-show
当切换频率低时，使用v-if
v-if的拓展，v-else，v-else-if,(if 和 else-if 是一组判断)
配合使用时四个div不能打断，要紧紧的挨在一起
			
			Angular
			React
			Vue
			哈哈
1
2
3
4
5
④ 三个标签在n=1时展示，v-if与template的配合使用

特别注意：只能template 只能和 v-if使用，v-show不可以
			//方式一: 可以实现 但是可能导致 h2 拿不到一些样式
				
				你好
				Tom
				北京
			
			//方式二:  template 模板 最大的特点就是不影响结构
			
1
2
3
4
5
6
7
8
9
10
11
12

🚄 14、列表渲染重要

🚬 1、基本列表

总结：

①人员列表（遍历数组）

方式一：一个参数接收



	
		
		基本列表
		
	
	

		
			
			人员列表（遍历数组）
			
				
					{{p.name}}-{{p.age}}
				
			

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

方式二：推荐，两个参数接收

			
			人员列表（遍历数组）
			
				
					{{p.name}}-{{p.age}}
				
			
1
2
3
4
5
6
7

② 汽车信息（遍历对象）

	
			
			测试遍历字符串（用得少）
			
				
					{{char}}-{{index}}
				
			

		new Vue({
			el:'#root',
			data:{
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
			}
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

③ 遍历字符串（用得少），使用较少

	
			
			测试遍历字符串（用得少）
			
				
					{{char}}-{{index}}
				
			

		new Vue({
			el:'#root',
			data:{
				str:'hello'
			}
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

④ 遍历制定次数使用较少

			
			测试遍历指定次数（用得少）
			
				
					{{index}}-{{number}}
				
			
1
2
3
4
5
6
7

在这里插入图片描述

🚬 2、key的原理

总结：
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
① 在数组中添加一个老刘，添加的位置在数组的前面，会出现问题（索引为0，索引后移），添加在数组的后面不会出现问题
	
		
		key的原理
		
	
	
		
			
			人员列表（遍历数组）
			    
			
			
				
					{{p.name}}-{{p.age}}
					
				
			
		

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
问题：

有严重的效率问题
从上面往下添加，索引重新开始生成，一个都没有复用，效率低
在后面增加一个input text 文本框出现严重的问题
错在在特殊的情况下使用 :key=“index” index 作为key

② 解决上面说的添加老刘后面文字篡位问题使用 p.id 作为key
		
			
			人员列表（遍历数组）
			    
			
			
				
					{{p.name}}-{{p.age}}
					
				
			
		
1
2
3
4
5
6
7
8
9
10
11
12

🚭 虚拟Dom的对比算法

在这里插入图片描述

🚭 key

在没有书写key时，Vue会把的索引值自动作为key

🚭 总结

🚬 3、列表过滤

① 收集用户所输入的数据 v-model

② 拿着用户的输入信息进行匹配（计算属性标准）

  用户输入的关键词 发生变化 就需要重新过滤   ==watch数据监视、计算属性==

  					// 不等发生改变时就调用了一次
  					immediate:true,
                     // 不包含返回 -1 包含返回第几位出现的索引
  					return p.name.indexOf(val) !== -1
  					// filter 不改变原来的数组 会创建一个全新的数组
  					// 数组的元数据不能发生改变，把新数据交给 filPerons:[]
  					// 上面遍历时，就不能使用persions 而是使用 filPerons

  					// 一个字符里面,包不包含空格字符串 包含 返回索引是 0 不是 -1
1
2
3
4
5
6
7
8
9
10
11

方式一：watch数据监视



	
		
		列表过滤
		
	
	
		
		
			人员列表
			
			
				
					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

方式二：计算属性



	
		
		列表过滤
		
	
	
		
		
			人员列表
			
			
				
					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

🚬 4、列表排序–在数据过滤的基础上进行

过滤和排序是不分家的



	
		
		列表排序
		
	
	
		
		
			人员列表
			
			
			
			
			
				
					{{p.name}}-{{p.age}}-{{p.sex}}
					
				
			
		

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

🚬 5、更新时的一个问题

更新时的一个问题

点击按钮更新马冬梅信息

vue检测数据改变的原理

分析检测数据的原理

成功 ①

				methods: {
					updateMei(){
				 		this.persons[0].name = '马老师' //奏效
				 		this.persons[0].age = 50 		//奏效
				 		this.persons[0].sex = '男' 		//奏效
					}
				}
1
2
3
4
5
6
7

失败② 数据已经修改成功，但是Vue 没有发现数据的改变 why？后面 Vue监测数据改变的原理–数组中讲解

				methods: {
					updateMei(){
						this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
					}
				}
1
2
3
4
5

在这里插入图片描述

成功最终 ③

				methods: {
					updateMei(){
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'}) //奏效
					}
				}
1
2
3
4
5



	
		
		更新时的一个问题
		
	
	
		
		
			人员列表
			
			
				
					{{p.name}}-{{p.age}}-{{p.sex}}
				
			
		

		

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

🚭 Vue监测数据改变的原理–对象



	
		
		Vue监测数据改变的原理
		
		
	
	
		
		
			学校名称：{{name}}
			学校地址：{{address}}
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这里插入图片描述

🚭 模拟一个数据监测

在这里插入图片描述

🚭 Vue.set方法（Vue Api）

Vue 不完善的功能。如：添加一个性别，当时性别有没有定义下来，随着用户的交互，代码的发现，需要性别

数据是undefined，不会报错，只是页面不展示信息

解决方式（两种方式）：

方式一：Vue.set(target,key,val) 在Vue身上

target 目标（往谁的身上添加属性）

key 什么属性

val 属性的值

方式二：vm.$set(vm._data.student,‘sex’,‘男’) 在vm身上

① 基础
	
		
		Vue监测数据改变的原理
		
		
	
	
		
		
			学校信息
			学校名称：{{school.name}}
			学校地址：{{school.address}}
			
			学生信息
			姓名：{{student.name}}
           性别：{{student.sex}}
			年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			朋友们
			
				
					{{f.name}}--{{f.age}}
				
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
② 随着用户的需求，需要添加一个性别

思路：找到student.sex 添加性别这个思路不行

为什么？

解决办法使用 Vue 提供的 api，让其实现后添加的数据，也能实现响应式功能

方式一：Vue.set(target,key,val) 在Vue身上

target 目标（往谁的身上添加属性）

key 什么属性

val 属性的值

Vue.set有局限性 Vue.set 只能给data里面的某一个对象属性添加属性,不能给data 添加属性

方式二：vm.$set(vm.student,‘sex’,‘男’) 在vm身上

方式一实现：

方式二实现：

③ 添加一个功能点我给学生添加一个性别
		
			
			姓名：{{student.name}}
			性别：{{student.sex}}
		

	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
④ Vue.set 有局限性演示：给学校在添加个校长
		
			校长是：{{school.leader}}
		
1
2
3
官网解释说明：

🚭 Vue监测数据改变的原理–数组



	
		
		Vue监测数据改变的原理_数组
		
		
	
	
		
		
			学校信息
			学校名称：{{school.name}}
			学校地址：{{school.address}}
			校长是：{{school.leader}}
			
			学生信息
			
			姓名：{{student.name}}
			性别：{{student.sex}}
			年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
			爱好
			
				
					{{h}}
				
			
			朋友们
			
				
					{{f.name}}--{{f.age}}
				
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

在这里插入图片描述

Vue 认修改数组的方法 (7个操作数组的方法)

Vue 调用的这些方法都被包装过，所以可以监测到数据的变化
官网解释：
push 最后的位置新增一个元素
pop 删除最后一个元素
shift 删除第一个元素
unshift 最前面添加一个元素
splice 指定位置插入一个元素，或者删除一个元素，或者替换调一个元素
sort 数组排序
reverse 翻转数组
共同点：可以修改数组，引起数组的改变
filter 不影响原数组，但是还想使用filter 怎么办？
- 把过滤生成的新数组，替换掉原来的数组

在这里插入图片描述

同样可以使用Vue.set方法

在这里插入图片描述

🚬 6、Vue数据监测总结

总结：

① 基础



	
		
		总结数据监视
		
		
		
	
	

		
			学生信息
			姓名：{{student.name}}
			年龄：{{student.age}}
			性别：{{student.sex}}
			爱好：
			
				
					{{h}}
				
			
			朋友们：
			
				
					{{f.name}}--{{f.age}}
				
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

② 练习

③ 完整



	
		
		总结数据监视
		
		
		
	
	

		
			学生信息
			 

			 

			 

			 

			 

			 

			 

			 

			姓名：{{student.name}}
			年龄：{{student.age}}
			性别：{{student.sex}}
			爱好：
			
				
					{{h}}
				
			
			朋友们：
			
				
					{{f.name}}--{{f.age}}
				
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

🚒 15、收集表单数据 v-model

总结：



	
		
		收集表单数据
		
	
	

		
			
				账号： 


				密码： 


				年龄： 


				性别：
				男
				女 


				爱好：
				学习
				打游戏
				吃饭
				


				所属校区
				
				


				其他信息：
				 


				阅读并接受《用户协议》
				
			

		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

拓展：

			<form>
				
				<label for="demo">账号：label>
				<input type="text" id="demo">
			form>   
1
2
3
4
5

🚤 16、过滤器 filters

总结：

		{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据
		-->
1
2
3
4
5
6
7
8
9
10

引入dayjs CDN 解析时间，格式：

		dhyjs() // 传入时间戳，转化,不传入就以当前时间为主
			.startof('month')  // startof 出发,开始
			.add(1,'day')
			.set('year', 2018)
			.format('YYYY-MM-DD HH:mm:ss')
1
2
3
4
5

全局过滤器写在new Vue之前
局部过滤器



	
		
		过滤器
		
		
	
	

		
			显示格式化后的时间
			
			计算属性实现,现在是：{{fmtTime}}
			
			methods实现,现在是：{{getFmtTime()}}
			
			过滤器实现,现在是：{{time | timeFormater}}
			
			
			过滤器实现（传参）,现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}
			
			Tom
		

		
		
			{{msg | mySlice}}
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

🚗 17、内置指令

🚬 常用的内置指令

v-text : 更新元素的 textContent

v-html : 更新元素的 innerHTML

v-if : 如果为 true, 当前标签才会输出到页面

v-else: 如果为 false, 当前标签才会输出到页面

v-show : 通过控制 display 样式来控制显示/隐藏

v-for : 遍历数组/对象

v-on : 绑定事件监听, 一般简写为@

v-bind : 绑定解析表达式, 可以省略 v-bind

v-model : 双向数据绑定

v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

🚬 v-text指令

总结：

		{xx}}则不会。
		-->
1
2
3
4
5



	
		
		v-text指令
		
		
	
	
       
		
			你好，{{name}}
			
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

🚬 v-html指令

总结：

		{xx}}则不会。
									(2).v-html可以识别html结构。
						3.严重注意：v-html有安全性问题！！！！
									(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
									(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
		-->
1
2
3
4
5
6
7
8
9
10
11



	
		
		v-html指令
		
		
	
	

		
			你好，{{name}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

Cookie的工作原理：

在这里插入图片描述




	
	v-html指令
	
	


	
		你好，{{name}}
		
		
	




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

🚬 v-cloak指令

总结：解决闪烁问题

		{xxx}}的问题。
		-->
1
2
3
4
5

		

		
			{{name}}
		
1
2
3
4
5
6
7
8
9

🚬 v-once指令

总结：

		
           
			初始化的n值是:{{n}}
		
1
2
3
4



	
		
		v-once指令
		
		
	
	

		
			初始化的n值是:{{n}}
			当前的n值是:{{n}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

🚬 v-pre指令

总结：

		
           
			Vue其实很简单>
		
1
2
3
4



	
		
		v-pre指令
		
		
	
	
		
			Vue其实很简单
			当前的n值是:{{n}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

🚲 18、自定义指令 directives

总结：

🚬 1、自定义指令-函数式

函数式属于对象式的简写方式只是写了 bind、update 没有书写 inserted

// 函数式
<script type="text/javascript">
	Vue.config.productionTip = false
   
	new Vue({
		el:'#root',
		data:{
		},
		directives:{
			big(){
			},
		}
	})
	
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。



	
		
		自定义指令
		
	
	

		
			{{name}}
			当前的n值是： 
			放大10倍后的n值是： 
			
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

如何验证 element 是真实Dom元素：

			directives:{
				// big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				// element 真实的Dom元素 binding 本次绑定的所有信息
				big(element,binding){
					// 如何验证 element 是真实Dom元素
					// 方式一:
					console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法
					// 方式二:
					console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true 
				},
			}
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

🚬 2、自定义指令-对象式

<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
			},
			directives:{
				fbind:{
                   // 函数名不能写错
					// 指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					// 指令所在元素被插入页面时
					inserted(element,binding){
						element.focus() // focus 获取焦点
					},
					// 指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。



	
		
		自定义指令
		
	
	
		
			{{name}}
			当前的n值是： 
			
			放大10倍后的n值是： 
			
			
			
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

在这里插入图片描述

🚬 3、注意点

此时的this 是 window
多个名称一起定义时使用 - ，不是驼峰命名法，如：big-number

局部指令和全局指令

		// 定义全局指令  和 过滤器一样
		// 对象式
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) 
		// 函数式
		Vue.directive('fbind',function(element,binding){
					// 如何验证 element 是真实Dom元素
					// 方式一:
					console.dir(element) // 在控制台查看 身上拥有所有真实Dom的属性和方法
					// 方式二:
					console.log(element instanceof HTMLElement) // instanceof 谁是不是谁的实例 控制台 true 
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

🚀 19、Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建初始化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

🚬 1、生命周期流程图

在这里插入图片描述

🚬 2、vue 生命周期

初始化显示：

beforeCreate()
created()
beforeMount()
mounted()

更新状态: this.xxx = value

beforeUpdate()
updated()

销毁 vue 实例: vm.$destory()

beforeDestory()
destoryed()

🚬 3、常用的生命周期方法

mounted(): 发送 ajax 请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

🚬 4、引出Vue的生命周期

总结：

① 初始透明度

在这里插入图片描述

② 每隔一段时间透明度减少一些

方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的
修改思路：1、vm不收到，2、定时器放在vm里面见方式二

// 方式一：不推荐，逻辑操作，Vue实例，代码层面是割裂开的
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方式二：mounted 钩子函数

🚬 5、分析Vue的生命周期

① 基础



	
		
		分析生命周期
		
		
	
	
		
		
			
			当前的n值是：{{n}}
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述



	
		
		分析生命周期
		
		
	
	
		
		
			
			当前的n值是：{{n}}
			
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

生命周期的挂载：

🚭 ① beforeCreate

			beforeCreate() {
				console.log('beforeCreate')
				console.log(this)
				debugger;
			},
1
2
3
4
5

在这里插入图片描述

🚭 ② created

			created() {
				console.log('created')
				console.log(this)
				debugger;
			},
1
2
3
4
5

在这里插入图片描述

🚭 ③ beforeMount

			beforeMount() {
				console.log('beforeMount')
				console.log(this)
				debugger;
			},
1
2
3
4
5

在这里插入图片描述

🚭 ④ mounted

			mounted() {
				console.log('mounted')
				console.log(this)
				document.querySelector('h2').innerText = "123"
		        // 验证 el 是不是真实Dom
		        console.log('mounted',this.$el)
             console.log('mounted',this.$el instanceof HTMLElement)
				debugger;
			},
		
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

生命周期的更新：

🚭 ⑤ beforeUpdate

			beforeUpdate() {
				console.log('beforeUpdate')
				console.log(this.n)
				debugger;
			},
1
2
3
4
5

在这里插入图片描述

🚭 ⑥ updated

			updated() {
				console.log('updated')
				console.log(this.n)
				debugger;
			},
1
2
3
4
5

在这里插入图片描述

🚭 ⑦ beforeDestroy

			beforeDestroy() {
				console.log('beforeDestroy')
			},
1
2
3

在这里插入图片描述

🚭 ⑧ destroyed

			destroyed() {
				console.log('destroyed')
			},
1
2
3

在这里插入图片描述

🚬 Vue生命周期的总结

在这里插入图片描述

总结：

有个按钮透明度停止变化，外部修改时不可以修改

清除定时器的id --可以修改
vm 都清除 – 定时器需要清除
清除定时器可以放在 beforeDestroy 销毁之前

相关阅读:
Nginx 用syslog传输error.log到远程服务器
CMake技术总结
8李沐动手学深度学习v2/逻辑回归（softmax回归（分类））从0开始实现
RTP Tools
怎么让重要文件自动备份到OneDrive？
批量生成,本地推理，人工智能声音克隆框架PaddleSpeech本地批量克隆实践(Python3.10)
Springboot 过滤器
Opencv基本操作 (上)
博客园商业化之路-开发任务众包平台：召集早期合作开发者
【第48篇】MaxViT：多轴视觉转换器

原文地址：https://blog.csdn.net/gh_xiaohe/article/details/126011998

VUE核心

文章目录

🚏 一、VUE核心

🚀 1、Vue

🚬 1、Vue是什么？

🚬 2、Vue的特点

🚄 2、Vue官网

🚒 3、HelloWord案例

Hello，{{name}}，{{address}}

Hello，{{name.toUpperCase}}，{{address}}

🚤 4、Vue模板语法

🚬 插值语法（双大括号表达式{{}} ）

🚬 指令语法（以 v-开头）

🚬 什么时候使用插值语法什么时候是指令语法

插值语法

你好，{{name}}

指令语法

🚗 5、Vue数据绑定

🚬 单向数据绑定

🚬 双向数据绑定

🚭 v-model的应用位置

🚲 6、el和data的两种写法

🚬 el的两种写法

🚭 方式一：

🚭 方式二： 更灵活一下

🚭 Vue实例：

🚬 data的两种写法

🚭 方式一：对象式

🚭 方式二：函数式

🚀 7、MVVM模型

🚬 为什么要使用MVVM

🚬 MVVM模式的实现者

🚄 8、数据代理

🚬 1、回顾Object.defineProperty方法

🚬 数据代理的定义

🚬 Vue中如何应用数据代理

学校名称：{{_data.name}}

学校地址：{{_data.address}}

🚒 9、事件处理

🚬 事件的基本使用

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

🚬 事件修饰符

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

🚬 键盘事件

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

欢迎来到{{name}}学习

🚤 10、计算属性 computed

🚬 姓名案例_插值语法实现

🚬 姓名案例_methods实现

🚬 姓名案例_计算属性实现

🚬 计算属性简写(只读时可以使用)

🚗 11、监视属性（侦听属性） watch

🚬 天气案例

今天天气很{{info}}

🚬 天气案例_监视属性

今天天气很{{info}}

🚬 天气案例_深度监视

今天天气很{{info}}

a的值是:{{numbers.a}}

🚬 天气案例_监视属性_简写

🚬 姓名案例_watch实现 和计算属性 做个对比

🚲 12、class和style绑定（绑定样式）

🚀 13、条件渲染

欢迎来到{{name}}

欢迎来到{{name}}

欢迎来到{{name}}

欢迎来到{{name}}

你好

Tom

北京

🚭 方式二：更灵活一下

🚬 姓名案例_watch实现和计算属性做个对比

🚄 14、列表渲染重要