Vue2知识总结

vue2复习知识总结

婷宝_知萌

3169人浏览 · 2023-10-13 21:01:05

婷宝_知萌 · 2023-10-13 21:01:05 发布

vue2复习回顾

vue基础

想让vue工作，就必须创建一个vue实例，并且传入一个配置对象【el data 】

<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.js 中的一个配置选项，用于关闭生产环境下的提示。

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

先有容器。之后创建实例，解析实例之后如果有容器里面需要的内容，将容器里面的东西进行替换
容器和实例之间是一一对应的关系

01 创建vue实例

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

02 模板语法

插值语法：{{XXX}} 使用方式单一，把指定的值放到指定的位置 , xxx为js表达式
指令语法：以 v-开头 v-bind 动态绑定值进行简写形式是：
指令语法用于解析标签（包括：标签属性,标签体内容，绑定事件）

03 事件绑定

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

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

04 el和data的两种写法

el的两种写法

1.new Vue的时候创建el属性
2.先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el属性

new Vue({
el:'#root',
data:{
name:'小红'
}
})
// *************************
const v=new Vue({
data:{
name:'小红'
}
})
v.$mount('#root')

data的两种写法

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

			//data的第二种写法：函数式
			data(){
				console.log('this',this) //此处的this是Vue实例对象，前提是data是普通函数
				return{
					name:'小红'
				}
			}
		})

注意：在组件学习中data必须使用函数式

05 MVVM模型

在这里插入图片描述
把数据放在指定的位置，写出模板代码，让vm框架将数据和模板建立连接，并且实现了数据的实时更新。vm 【ViewModel，vue实例对象】,因此在文档中经常使用vm表示Vue,
data里面的数据最终出现在了vm身上，vm 身上有的东西都可以在模板里面直接使用

MVVM模型

					1. M：模型(Model) ：data中的数据
					2. V：视图(View) ：模板代码
					3. VM：视图模型(ViewModel)：Vue实例
		观察发现：
					1.data中所有的属性，最后都出现在了vm身上。
					2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

06 Object.defineProperty()

Object.defineProperty(obj, prop, {})

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
{} 配置项

	let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
//Object.defineProperty 直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
			Object.defineProperty(person,'age',{
		  //value:18,  // 添加属性成功输出
		  // enumerable:true, //控制属性是否可以枚举，默认值是false
		 // writable:true, //控制属性是否可以被修改，默认值是false
		 // configurable:true //控制属性是否可以被删除，默认值是false
         //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get () {
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set (value) {
				console.log('有人修改了age属性，且值是', value)
				number = value
			}
	}
	console.log(person )  // 张三 男 18

01数据代理

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x  // 	通过get方法让obj2获取obj的属性
				},
				set(value){
					obj.x = value
				}
			})

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

07事件

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

01 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
<!--Vue 允许为 v-on 在监听键盘事件时添加按键修饰符-->
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

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

08计算属性 commputed

1.什么是属性
在vue中data中的内容就可以称之为属性

new Vue({
el:"#root",
data:{
 name:'小红'，
 age:18
  }
})

2.什么是计算属性【computed】
拿着自己已有的属性进行加工计算，就是计算属性
在计算属性中，计算的整个过程可以配置成为一个对象

computed:{
all:{
get(){
return this.name+'-'+this.age}
    }
  }
}

计算属性：
				1.定义：要用的属性不存在，要通过已有属性计算得来。
				2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
				3.get函数什么时候执行？
							(1).初次读取时会执行一次。
							(2).当依赖的数据发生改变时会被再次调用。
				4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
				5.备注：
						1.计算属性最终会出现在vm上，直接读取使用即可。
						2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
						
//get有什么作用？当有人读取属性时，get就会被调用，且返回值就作为属性的值
//get什么时候调用？1.初次读取属性时。2.所依赖的数据发生变化时。

09 监视属性 watch

//写法1：
	 watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} 
//*******************************
// 写法2
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时根据数据的具体结构，决定是否采用深度监视。

watch:{
				//正常写法
				 isHot:{
			// immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
					}
				}, 
				//简写 当不需要deep 和immediate的时候可以进行简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

computed和watch的区别

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象。
计算属性 computed

监听属性watch

10绑定样式

1. class样式
				写法:class="xxx" xxx可以是字符串、对象、数组。
					字符串写法适用于：类名不确定，要动态获取。
					对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
					数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
				2. style样式
					:style="{fontSize: xxx}"其中xxx是动态值。
					:style="[a,b]"其中a、b是样式对象。

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一定可以获取到。

12列表渲染

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

// vue
new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
				}
		})
		//html  
<ul>
		<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
		</li>
</ul>

在这里插入图片描述

13 key的基本原理【重要】

在这里插入图片描述

面试题：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是没有问题的。

//#region
//#region

// ************在备注里面的最上面和最下面使用这些东西，可以将注释里面的内容进行折叠*********

14列表过滤和列表排序

<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<!-- <input type="text" placeholder="请输入名字" v-model="keyWord"> -->
		<button @click="sortType = 2">年龄升序</button>
		<button @click="sortType = 1">年龄降序</button>
		<button @click="sortType = 0">原顺序</button>
		<ul>
			<li v-for="(p,index) of filPerons" :key="p.id">
				{{p.name}}-{{p.age}}-{{p.sex}}
				<!-- <input type="text"> -->
			</li>
		</ul>
	</div>

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

		new Vue({
			el: '#root',
			data: {
				keyWord: '',
				sortType: 0, //0原顺序 1降序 2升序
				persons: [
					{ id: '001', name: '马冬梅', age: 30, sex: '女' },
					{ id: '002', name: '周冬雨', age: 31, sex: '女' },
					{ id: '003', name: '周杰伦', age: 18, sex: '男' },
					{ id: '004', name: '温兆伦', age: 19, sex: '男' }
				]
			},
			computed: {
				filPerons () {
					const arr = this.persons.filter((p) => {
						return p.name.indexOf(this.keyWord) !== -1
					})
					//判断一下是否需要排序
					// 这里可接收一个可选的回调函数作为参数，p1排序过程的第一个元素，p2排序过程的第二个元素
					// arr.sort中前-后是升序  后-前是降序
					if (this.sortType) {
						arr.sort((p1, p2) => {
							return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
						})
					}
					return arr
				}
			}
		})

arr.sort(a,b)
Array.prototype.sort()方法可以接受一个可选的回调函数作为参数，用来定义排序的方式。这个回调函数应该接受两个参数，我们称之为a和b。
a排序过程的第一个元素，
b排序过程的第二个元素
// arr.sort中前-后是升序后-前-是降序

15数据代理

在这里插入图片描述
vm身上所有的数据和属性都来自与_data，_data中的1数据来自与data中传入的数据
vm._data=data

1）数据代理的步骤：

① 加工data 把自所写的数据【每一组key:value】都形成了get set 【加工数据实现了响应式】
② vm._data=data

// 模拟一个数据监视 
	<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
		</script>

在我们模拟的数据监视中只考虑了第一层，在vue中的数据检测中使用了递归，可以一直进行查找。在vue中只要修改数据就会重新解析模板，虚拟dom之后进行对比

16 Vue检测数据的原理

vue.set

this.$set是Vue.js的一个方法，用于动态地为响应式对象添加一个新的属性，并确保新属性同样是响应式的，同时触发视图更新。这个方法接收3个参数：

①目标对象
②要添加或更新的属性名
③要添加或更新的属性值

this.$set(this.student,'sex','男')中，
为student对象添加一个新的属性sex并设置其值为男。

this.$set() 只能为data中的某一个对象追加属性，而不能给data追加属性
调用Vue.set的时候第一个参数不能是vm,

Vue监视数据的原理：

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？
		通过setter实现监视，且要在new Vue时就传入要监测的数据。
					(1).对象中后追加的属性，Vue默认不做响应式处理
					(2).如需给后添加的属性做响应式，请使用如下API：
								Vue.set(target，propertyName/index，value) 或 
								vm.$set(target，propertyName/index，value)

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的根数据对象 添加属性！！！

数组里面的属性不是通过get,set 进行数据监视的
在这里插入图片描述
上面的例子中通过vm 改变了数据，但是页面并没有检测到
数组方式的修改：
通过javaScript中push pop shift unshift splice sort reverse 进行数组里面数据的修改

① push: 该方法用于在数组的末尾添加一个或多个元素，并返回新的长度。
② pop: 该方法用于删除并返回数组的最后一个元素。
③ shift: 该方法用于删除并返回数组的第一个元素。
④ unshift: 该方法用于在数组的开头添加一个或多个元素，并返回新的长度。
⑤ plice: 该方法用于在数组中添加/删除项目，然后返回被删除的项目。该方法接受三个参数，第一个参数是开始位置，第二个参数是要删除的元素数量，第三个参数（可选）是要添加到数组中的新元素。
⑥ sort: 该方法用于对数组的元素进行排序。默认情况下，它将元素转换为字符串，然后按照字符顺序进行排序。你可以提供一个比较函数来自定义排序方式。
⑦ reverse: 该方法用于颠倒数组中元素的顺序。

vue中修改数据的方法是靠包装数组上面的常用方法实现的

 <div id="root">
    <h1>学生信息</h1>
    <button @click="student.age++">年龄+1岁</button> <br />
    <button @click="addSex">添加性别属性，默认值：男</button> <br />
    <button @click="student.sex = '未知' ">修改性别</button> <br />
    <button @click="addFriend">在列表首位添加一个朋友</button> <br />
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br />
    <button @click="addHobby">添加一个爱好</button> <br />
    <button @click="updateHobby">修改第一个爱好为：开车</button> <br />
    <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
    <h3>姓名：{{student.name}}</h3>
    <h3>年龄：{{student.age}}</h3>
    <h3 v-if="student.sex">性别：{{student.sex}}</h3>
    <h3>爱好：</h3>
    <ul>
      <li v-for="(h,index) in student.hobby" :key="index">
        {{h}}
      </li>
    </ul>
    <h3>朋友们：</h3>
    <ul>
      <li v-for="(f,index) in student.friends" :key="index">
        {{f.name}}--{{f.age}}
      </li>
    </ul>
  </div>
</body>

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

  const vm = new Vue({
    el: '#root',
    data: {
      student: {
        name: 'tom',
        age: 18,
        hobby: ['抽烟', '喝酒', '烫头'],
        friends: [
          { name: 'jerry', age: 35 },
          { name: 'tony', age: 36 }
        ]
      }
    },
    methods: {
      addSex () {
        // 这里实现了响应式
        // Vue.set(this.student,'sex','男')
        this.$set(this.student, 'sex', '男')
        //vm.$set(this.student, 'sex', '男')

      },
      addFriend () {
        // 这里操作数组 同时添加的是一个对象  
        this.student.friends.unshift({ name: 'jack', age: 70 })
      },
      updateFirstFriendName () {
        // this.student.friends[0] 这里是对象 name是对象里面的属性所以有get和set 
        this.student.friends[0].name = '张三'
      },
      addHobby () {
        this.student.hobby.push('学习')
      },
      updateHobby () {
        // this.student.hobby.splice(0,1,'开车')
        // Vue.set(this.student.hobby,0,'开车')
        // 操作hobby里面的第0项，将它改为开车
        this.$set(this.student.hobby, 0, '开车')
      },
      // h：代表数组 this.student.hobby 中的当前元素,在每次迭代时，filter 方法会检查数组中的每一个元素，并将其作为 h 参数传递给箭头函数。
      removeSmoke () {
        this.student.hobby = this.student.hobby.filter((h) => {
          return h !== '抽烟'
        })
      }
    }
  })

17收集表单数据

收集表单数据：
				若：<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：输入首尾空格过滤

18过滤器

过滤器：
			定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
			语法：
					1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
					2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
			备注：
					1.过滤器也可以接收额外参数、多个过滤器也可以串联
					2.并没有改变原本的数据, 是产生新的对应的数据


<body>
	<!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						1.过滤器也可以接收额外参数、多个过滤器也可以串联
						2.并没有改变原本的数据, 是产生新的对应的数据b
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 过滤器实现 | 管道符 timeFormater 【过滤器的名字】  -->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现（传参） -->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		<h3 :x="msg | mySlice">尚硅谷</h3>
	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

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

	new Vue({
		el: '#root',
		data: {
			time: 1697008493066, //时间戳
			msg: '你好，尚硅谷'
		},
		//局部过滤器  过滤器的本质就是一个函数 对数据进行加工 vue调用这个方法 之后进行返回将{{time | timeFormater}}里面的数据全部进行替换
		filters: {
			// value 这里的value 就是当前的时间戳 过滤器的第一个数据【value】就是过滤器管道符前面的数据
			// 如果str有值 就用传过来的，如果没有值就使用后面的 HH:mm:ss
			timeFormater (value, str = 'YYYY年MM月DD日 HH:mm:ss') {
				console.log('@', value)
				return dayjs(value).format(str)
			}
		}
	})

	new Vue({
		el: '#root2',
		data: {
			msg: 'hello,atguigu!'
		}
	})
</script>

19内置组件

19_1

v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

	<!-- 准备好一个容器-->
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name">你好！！</div>
		<div v-text="str"></div>
	</div>

在这里插入图片描述

19_2

v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

19_3

v-cloak指令（没有值）：
					1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
					2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>

19_4

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

19_5

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

<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>

20 自定义指令

//定义全局指令   //定义全局指令
	 Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来） element指令所在的元素  binding本次绑定的信息
		bind(element,binding){
			// 将元素的值设置为绑定的值 
			element.value = binding.value   
		},
		//指令所在元素被插入页面时  它会在指令与元素成功绑定时被调用
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) 
	 Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来） element指令所在的元素  binding本次绑定的信息
		bind(element,binding){
			// 将元素的值设置为绑定的值 
			element.value = binding.value   
		},
		//指令所在元素被插入页面时  它会在指令与元素成功绑定时被调用
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) 
	// 局部自定义指令
	
	new Vue({
	
		directives: {
			//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
			/* 'big-number'(element,binding){
				// console.log('big')
				element.innerText = binding.value * 10
			}, */
			big (element, binding) {
				console.log('big', this) //注意此处的this是window
				// console.log('big')
				element.innerText = binding.value * 10
			},
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind (element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted (element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update (element, binding) {
					element.value = binding.value
				}
			}
		}
	})

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
			需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
			自定义指令总结：
					一、定义语法：
								(1).局部指令：
											new Vue({															new Vue({
												directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
											}) 																		})
								(2).全局指令：
												Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

					二、配置对象中常用的3个回调：
								(1).bind：指令与元素成功绑定时调用。
								(2).inserted：指令所在元素被插入页面时调用。
								(3).update：指令所在模板结构被重新解析时调用。

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

21 Vue生命周期

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

请添加图片描述
只要函数准备好，vue就会在合适的时候将函数钩出来进行调用

在这里插入图片描述

在beforeUpdata步骤中信息尚没有保持同步

 <template></template> 不能作为跟标签进行使用

vm.$destroy 完全销毁一个实例，清理他与其他实例的连接，解绑它的全部指令及自定义事件监听器，原生的dom事件不会被清除，
beforeDestroy步骤的时候你可以访问到数据调用到方法，但是对数据的修改不会再触发更新了
8个生命周期钩子
数据检测和数据代理创建之前 beforeCreate created
挂载之前和挂载完毕：beforeMounted mounted
更新之前和更新完毕： beforeUpdate update
销毁之前和销毁完毕：beforeDestory desctory
在这里插入图片描述

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

22组件

22_0 组件化编程的好处

在这里插入图片描述

组件可以产生嵌套

模块化只关注解决js的问题
组件的定义——实现应用中局部功能代码和资源的集合
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>

22.1注册组件

// 全局注册组件
Vue.component('my-component-name', {
  // ... 选项 ...
})
// 局部注册组件
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
// 局部注册的组件在其子组件中不可用

几个注意点：
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

23VueComponent

关于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.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法

实例的隐式原型属性永远指向自己缔造者的原型对象
在这里插入图片描述
补充：

console.dir()
是 JavaScript 中的一个方法，它是浏览器控制台（或其他JavaScript环境，如Node.js）中的一个实用程序，用于显示一个对象及其子对象的属性和方法。这个方法的名字是 “directory” 的缩写，意为 “目录”，暗示它可以列出对象的结构。

24 vue脚手架 Vue CLI

https://cli.vuejs.org/zh/guide/installation.html

第一步（仅第一次执行）：全局安装@vue/cli。
npm install -g @vue/cli
//之后可以输入vue 测试是否安装成功
第二步：切换到你要创建项目的目录，然后使用命令创建项目 xxxx项目名称·
vue create xxxx
第三步：启动项目
npm run serve

备注：

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry
https://registry.npm.taobao.org
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，
请执行：vue inspect > output.js

可以通过以下命令来查看自己是否安装了淘宝镜像：

npm config get registry

如果返回的结果是https://registry.npm.taobao.org，则表示已经成功配置了淘宝镜像。
如果返回的结果是https://registry.npmjs.org/，则表示使用的是默认的npm镜像。

24.1 脚手架分析

├── 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：包版本控制文

框里面的内容默认不进行修改
在这里插入图片描述

render

其实就是帮我们创建模板，加载组件。

为什么要用render？因为vue-cli默认加载的是运行版本的Vue，它不认识 template和components这两个标签，所以只能用render。

render是一个重要的选项，它用于编写渲染逻辑并返回虚拟DOM节点。

类型：(createElement: () => VNode) => VNode
// 该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

关于不同版本的Vue：

//创建Vue实例对象---vm  
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中 
  render: h => h(App),  // 只有创建vm的时候才执行render
	
})

	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函数去指定具体内容。

25 ref和props

ref

它允许我们获取对DOM元素、子组件实例或Vue实例的引用，以便在Vue组件的方法中进行操作或访问

<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
</div>
	
methods: {
			// 在vue2中方法的thiS 指向一般是 vc Vue组件实例
			// 使用方式 this.$refs.xxx   
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},

props

props是用于在组件之间传递数据的选项。通过props，父组件可以向子组件传递数据，子组件可以使用这些数据进行渲染或执行其他操作。

// app.js 父组件
<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>
// 在对应的子组件Student 里面 进行接收
//简单声明接收
		props:['name','age','sex'] 
// 之后在对应的位置进行展示
·<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge}}</h2>
	</div>
</template>

26. mixin混入

mixin是一种用于组件复用的特殊机制
当两个组件共享一个配置，使用mixin将内容进行抽离，混合必须写在一个数组里

//mixin.js  定义混入
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
}
// 在对应的组件引入和使用 
// 方法1 局部混入
	import {hunhe,hunhe2} from '../mixin'
	export default {
		 mixins:[hunhe,hunhe2]
	}
	// 方法2 全局混入  在main.js 进行引入
	Vue.minin()  
</script>

补充：
①默认暴露：default export 默认暴露是指在一个模块中，只能有一个默认暴露
其他模块可以通过import语句来引入这个默认暴露的对象
②分别暴露： default 分别暴露是指在一个模块中，可以暴露多个值，每个值都有一个唯一的名称
其他模块可以通过import语句来引入这些分别暴露的对象

27 插件

在入口处（main.js）全局引用插件（只有入口处才能写大Vue，也就是vm）

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

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

使用插件：Vue.use()

定义插件之后在main.js 引入插件。之后使用Vue.use() 使用插件

28 scoped样式

解决方案：使style只对本组件生效！
scoped解决的痛点：

两个不同的组件，class属性重名

类选择器也都一样，但是颜色不同。

如果此时在app处同时引入这两个组件，就会引发样式冲突！

<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

29 webStorage

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

30 组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据) 在父组件的方法中，定义处理自定义事件的函数
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

31 全局事件总线

用于实现任意组件间通信的机制。通过使用全局事件总线，组件可以在不直接相互引用的情况下传递数据和事件。

1 创建一个空的Vue实例作为全局事件总线

import Vue from 'vue';  
Vue.prototype.$bus = new Vue();
// 或者
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

2在需要发送事件的组件中，通过this. $b u s .$ emit(‘事件名’, 数据)触发全局事件，并传递数据。可以传递多个数据，用逗号隔开，如下所示：

// $emit()是一个组件实例方法，用于触发当前实例上的事件。它接收两个参数：事件名称和可选的数据。
this.$bus.$emit('事件名', 数据1, 数据2, 数据3);

3在需要接收事件的组件中，通过this. $b u s .$ on(‘事件名’, 回调函数)监听全局事件，并在回调函数中处理接收到的数据

created() {  
  this.$bus.$on('事件名', (数据1, 数据2, 数据3) => {  
    // 处理接收到的数据  
  });  
}

4 this. $b u s .$ off(‘事件名’, 回调函数)来取消监听

beforeDestroy() {  
  this.$bus.$off('事件名', 回调函数);  
}

在这里插入图片描述

32 消息的订阅与发布

1 订阅消息：消息名
2.发布消息：消息内容
需要安装相应的库 npm i publish-js
安装之后在收数据的地方先引入 import pubsub from 'pubsub-js'这里是一个对象
① 消息的订阅

// hello 是发布的消息   (msgName,data)=>{} 是执行的回调 msgName是消息名,data是真正传入进来的数据   
// pudId 每次订阅都是不同的值
 this.pubId=pubsub.subscribe('hello',(msgName,data)=>{
		console.log(this)
		// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
		})
	},

② 消息的发布

<button @click="sendStudentName">把学生名给School组件</button>

	methods: {
			sendStudentName(){
				pubsub.publish('hello',666)
			}
		},

③ 最后数据在订阅方进行展示
注意订阅方与发布方都需要引入import pubsub from 'pubsub-js'
④ 取消订阅

	beforeDestroy() {
			pubsub.unsubscribe(this.pubId)
		},

消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
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)去取消订阅。

33. nextTick

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

34 Vue封装的过度与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：
写法：
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属性：

    <transition name="hello">
    	<h1 v-show="isShow">你好啊！</h1>
    </transition>

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

35配置代理

配置参考——devServe.proxy
借助vue cli配置代理服务器解决跨域问题
① 下载并引入 axios npm i axios
② 在App.vue中引入axios import axios from 'axios'

//App.vue
<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

// 在vue.config.js 中进行配置
module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

同源策略：规定了协议名主机名端口号必须一致

36 插槽

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

使用方式：

默认插槽：
默认插槽是最简单的插槽类型，它只需要在子组件中定义一个slot标签，父组件就可以将自定义的HTML结构和数据插入到这个位置。默认插槽只有一个插入位置，如果要插入多个位置，可以使用具名插槽。默认插槽的特点是父组件决定结构和数据。

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽：
具名插槽是带有名字的插槽，它允许在子组件中定义多个插槽位置，并通过名字来识别不同的插槽

父组件中：
        <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>

作用域插槽：
1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

父组件则可以通过v-slot指令和scope属性来接收数据。作用域插槽的特点是子组件决定数据，父组件决定结构。

   2. 具体编码：

      
父组件中：
      		<Category>
      			<template scope="scopeData">
      				<!-- 生成的是ul列表 -->
      				<ul>
      					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
      				</ul>
      			</template>
      		</Category>
      
      		<Category>
      			<template slot-scope="scopeData">
      				<!-- 生成的是h4标题 -->
      				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
      			</template>
      		</Category>
  
 子组件中：
              <template>
                  <div>
                      <slot :games="games"></slot>
                  </div>
              </template>
      		
              <script>
                  export default {
                      name:'Category',
                      props:['title'],
                      //数据在子组件自身
                      data() {
                          return {
                              games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                          }
                      },
                  }
              </script>

在<video></video>标签里面只有写上 controls 【控制播放】之后才有播放按钮

37 vuex

在这里插入图片描述

什么时候使用Vuex

数据共享的时候
多个组件依赖于同一状态。
来自不同组件的行为需要变更同一状态。

Vuex工作原理图

在这里插入图片描述

安装 Vuex

https://vuex.vuejs.org/zh/installation.html
①安装 npm install vuex@3
② 使用vuex Vue.use(Vuex)
③ 创建store管理状态
④ 让所有的组件实例vc都能看见store
补充：2022年2月7日Vue3成为了默认版本，当我们现在执行mpn i vue安装的就是vue3,Vue3成为默认版本的同时vuex也更新到了4版本，现在执行npm i vuex 安装的是4版本，Vuex的4版本只能在vue3中使用
vue2中，要用vuex的3版本
vue3中，要用vuex的4版本
⑤安装完成之后在main.js 进行引入 import Vuex from 'vuex'之后进行使用 Vue.use(vuex)
⑥ 当你进行引入和使用之后，在创建vm的时候就可以使用store
让所有的组件实例对象vc, vm都能看见组件实例对象
store 需要管理【actions mutations state】同时store身上需要有Dispatch Commit

创建文件：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
})

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

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

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

38.getters的使用

getters 用于将state中的数据进行加工

在这里插入图片描述

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

在store.js中追加getters配置

......

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

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

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

39.四个map方法的使用

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

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

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

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

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

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

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

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

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

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

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

40.模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确。

修改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
  }
})

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

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

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

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

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

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

store.dispatch方法用于触发action
store.commit方法用于直接提交一个mutation，从而改变state。这是Vuex中数据流动的第二步，即"mutation"

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

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

路由

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

1.基本使用

安装vue-router，命令：npm i vue-router
应用插件：Vue.use(VueRouter)

编写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

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

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

指定展示位置
```
<router-view></router-view>
```

2.几个注意点

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

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

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

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

跳转（要写完整路径）：

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

4.路由的query参数

传递参数

<!-- 跳转并携带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>

接收参数：
```
$route.query.id
$route.query.title
```

5.命名路由

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

如何使用

给路由命名：

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

简化跳转：

<!--简化前，需要写完整的路径 -->
<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参数

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

传递参数

<!-- 跳转并携带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配置！

接收参数：
```
$route.params.id
$route.params.title
```

7.路由的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属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

9.编程式路由导航

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

具体编码：

//$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.缓存路由组件

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

具体编码：

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

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

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

12.路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
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'
	}
})

独享守卫:
独享路由守卫是指在某个特定的路由配置上定义的守卫。它们仅在进入或离开该路由时才被调用，而不像全局守卫那样应用于所有的路由。

主要包括 beforeEnter 守卫，通过在路由配置对象中定义 beforeEnter 函数来实现。这个函数会在进入该路由之前被调用，接收一个参数，即即将进入的路由对象。

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()
	}
}

组件内守卫：
在组件内部定义的守卫，用于在组件的生命周期中的特定阶段执行特定的逻辑。

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

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

hash: localhost:8080/#/home/message#号后面的就是hash值

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Vue里echarts根据页面大小动态调整/自适应

Vue

所有评论(0)

查看更多评论

婷宝_知萌

@weixin_58017233

已为社区贡献1条内容

Vue2知识总结

婷宝_知萌

vue2复习回顾

vue基础

01 创建vue实例

02 模板语法

03 事件绑定

04 el和data的两种写法

05 MVVM模型

MVVM模型

06 Object.defineProperty()

01数据代理

07事件

01 事件修饰符

08计算属性 commputed

09 监视属性 watch

10绑定样式

11条件渲染

12列表渲染

13 key的基本原理 【重要】

14列表过滤和列表排序

15数据代理

1）数据代理的步骤：

16 Vue检测数据的原理

vue.set

17收集表单数据

18过滤器

19内置组件

19_1

19_2

19_3

19_4

19_5

20 自定义指令

21 Vue生命周期

22组件

22_0 组件化编程的好处

22.1注册组件

23VueComponent

24 vue脚手架 Vue CLI

24.1 脚手架分析

render

25 ref和props

ref

props

26. mixin混入

27 插件

28 scoped样式

29 webStorage

30 组件的自定义事件

31 全局事件总线

32 消息的订阅与发布

消息订阅与发布（pubsub）

33. nextTick

34 Vue封装的过度与动画

35配置代理

36 插槽

37 vuex

什么时候使用Vuex

Vuex工作原理图

安装 Vuex

38.getters的使用

getters 用于将state中的数据进行加工

39.四个map方法的使用

40.模块化+命名空间

路由

1.基本使用

2.几个注意点

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

4.路由的query参数

5.命名路由

6.路由的params参数

7.路由的props配置

8.<router-link>的replace属性

9.编程式路由导航

10.缓存路由组件

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

12.路由守卫

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

所有评论(0)

13 key的基本原理【重要】

8.`<router-link>`的replace属性