MeAlert的笔记网站

Appearance

前面的复习总结思维导图 ​

​

​

ref引用 ​

​

1. 什么是 ref 引用 ​

​ ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象。

2. 使用 ref 引用 DOM 元素 ​

​ 如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作：

3.使用 ref 引用组件实例 ​

​ 如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：

​

4.控制文本框和按钮的按需切换 ​

​ 通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下：

​

5.让文本框自动获得焦点 ​

​ 当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生 DOM 对象的 .focus() 方法即可。示例代码如下：

​

6.this.$nextTick(cb) 方法 ​

​ 组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

​

数组中的 some 循环 ​

some和forEach循环对比： ​

​

​ forEach 循环一旦开始，无法在中间被停止，所有的数据都会走一遍,return、break不管用

​ some 循环可以通过return true终止循环

​

用法示例： ​
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			const arr = ['小红','倪大红','苏大强','张三']
			arr.forEach((item,index)=>{
				console.log(index)
				if(item == '苏大强'){
					console.log('苏大强的索引是',index)
				}
			})
			console.log("-------------------");
			arr.some((item,index)=>{
				console.log(index)
				if(item == '苏大强'){
					console.log('苏大强的索引是',index)
					// 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环
					return true
				}
			})
		</script>
	</body>
</html>

数组中的 every 判断 ​

​

介绍： ​

​ every 判断数组中的 布尔值是否为true，如果全部为 true，则为true，否则为false

用法示例： ​
javascript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			const arr = [
				{ id:1,name:'西瓜',state:true },
				{ id:2,name:'榴莲',state:false },
				{ id:3,name:'草莓',state:true }
			]
			const result = arr.every(item => item.state)
			console.log(result)
		</script>
	</body>
</html>

数组中的 reduce 累加器 ​

语法： ​

​ 数组.reduce( (累加的结果,当前的循环项) => {},初始值)

用法示例： ​
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
               //需求：把 arr 数组中的布尔值为 state为：true，根据数量计算总价
			const arr = [
				{ id:1,name:'西瓜',state:true,price:10,count:1},
				{ id:2,name:'榴莲',state:false,price:80,count:2 },
				{ id:3,name:'草莓',state:true,price:20,count:3 }
			]
			const result = arr.filter(item => item.state).reduce((amt,item) => {
				return amt += item.price * item.count
			},0)
			console.log(result)
		</script>
	</body>
</html>
reduce 简化写法： ​
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			const arr = [
				{ id:1,name:'西瓜',state:true,price:10,count:1},
				{ id:2,name:'榴莲',state:false,price:80,count:2 },
				{ id:3,name:'草莓',state:true,price:20,count:3 }
			]
			const result2 = arr.filter(item => item.state).reduce((amt,item) => amt += item.price * item.count,0)
			console.log(result2)
		</script>
	</body>
</html>

动态组件 ​

1. 什么是动态组件 ​

​ 动态组件指的是动态切换组件的显示与隐藏。

2.如何实现动态组件渲染 ​

​ vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。示例代码如下：

​

3.使用 keep-alive 保持状态 ​

​

​ 默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组 件的状态。示例代码如下：

​

4.keep-alive 对应的生命周期函数 ​

​ 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。

​ 当组件被激活时，会自动触发组件的 activated 生命周期函数。

​

​

5.keep-alive 的 include 属性 ​

​ include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

​

6.keep-alive中的exclude属性 ​

​ exclude属性指定哪些组件不需要被缓存，默认的话所有组件都会被缓存，用法和include一样

​ 注意：

​ exclude属性不能和include属性一起使用

name属性 ​

​ 如果在“声明组件的时候”，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”

​ 用法实例：

​

插槽 ​

1. 什么是插槽 ​

​ 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。

​ 可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

2.体验插槽的基础用法 ​

​ 在封装组件时，可以通过 元素定义插槽，从而为用户预留内容占位符。示例代码如下：

2.1 没有预留插槽的内容会被丢弃 ​

​

​ 如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：

​

2.2 后备内容(默认内容) ​

​

​ 封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何 内容，则后备内容会生效。示例代码如下：

​

3.具名插槽 ​

​ 如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。这种带有具体 名称的插槽叫做“具名插槽”。示例代码如下：

​

​

​ 注意：没有指定 name 名称的插槽， 会有隐含的名称叫做 “default”。

3.1 为具名插槽提供内容 ​

​

​ 在向具名插槽提供内容的时候，我们可以在一个template标签元素上使用 v-slot 指令，并以 v-slot 的参数的 形式提供其名称。示例代码如下：

3.2 具名插槽的简写形式 ​

​ 跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

4.作用域插槽 ​

​ 在封装组件的过程中，可以为预留的 插槽绑定 props 数据，这种带有 props 数据的 叫做“作用 域插槽”。示例代码如下：

4.1 使用作用域插槽 ​

​

​ 可以使用 v-slot: 的形式，接收作用域插槽对外提供的数据。示例代码如下：

​

​

4.2 解构插槽 Prop ​

​

​ 作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。示例代码如下：

自定义指令 ​

1.什么是自定义指令 ​

​ vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

2.自定义指令的分类 ​

​ vue 中的自定义指令分为两类，分别是：

​ ⚫ 私有自定义指令

​

​ ⚫ 全局自定义指令

​

3.私有自定义指令 ​

​

​ 在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：

​

4.使用自定义指令 ​

​ 在使用自定义指令时，需要加上 v- 前缀。示例代码如下：

​

​

5.为自定义指令动态绑定参数值 ​

​ 在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值：

​

6.通过 binding 获取指令的参数 ​

​ 在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：

​

7.update 函数 ​

​ bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函 数会在每次 DOM 更新时被调用。示例代码如下：

​

8.函数简写 ​

​ 如果 bind 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

​

​

9.全局自定义指令 ​

​ 全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

​

总结 ​

  • [ ] ① 能够掌握 keep-alive 元素的基本使用 ⚫ 标签、include 属性
  • [ ] ② 能够掌握插槽的基本用 ⚫ 标签、具名插槽、作用域插槽、后备内容
  • [ ] ③ 能够知道如何自定义指令
  • [ ] ⚫ 私有自定义指令 directives: { }
  • [ ] ⚫ 全局自定义指令 Vue.directive()

Copyright © Albert MeAlert 2024