Vue2学习记录 --第二章（Vue组件化编程）第三章（使用Vue脚手架）-CSDN博客

第二章组件化编程

1. 非单文件组件

在这里插入图片描述

1.2 组件的几个注意点

在这里插入图片描述

1.3 VueComponent

在这里插入图片描述

一个重要的内置关系

VueComponent.prototype.proto === Vue.prototype —> true
为什么要有这个关系？

让组件实例对象（vc）可以访问到Vue原型上的属性、方法

在这里插入图片描述

第三章脚手架开发

3.1 脚手架结构

在这里插入图片描述

3.2 render函数

在这里插入图片描述

3.3 ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在 HTML标签上获取的是真实 DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
- 打标识：<h1 ref="xxx">...</h1> 或者 <School ref="xxx"/>
- 获取：this.$refs.xxx

3.4 配置项 props

功能：让组件接收外部传过来的数据

传递数据：
<Demo name="xxx"/>

接收数据

//第一种方式（只接收）
props: ['name']
//第二种方式（限制类型）
props: {
	name: String
}
//第三种方式（限制类型，限制必要性，指定默认值）
props: {
	name: {
		type: String,
		required: true/false,
		default: '张三'
		// 一般而言，required 和 default 不会同时在一个属性内出现
	}
}
```，

props是只读的，Vue底层会监测对props的修改，如果进行了修改，就会发出警告，若确实需要修改，可以复制props的内容到data中，然后修改data中的数据

3.4.2 组件的自定义事件

在这里插入图片描述

3.5 mixin（混入）

在这里插入图片描述

3.6 组件化编码流程（通用）

在这里插入图片描述

3.6.2 Todo案例总结

在这里插入图片描述

3.7 全局事件总线

在这里插入图片描述

3.8 消息订阅与发布（pubsub）

在这里插入图片描述

3.9 nextTick

在这里插入图片描述

3.10 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>
```
1. 如果有多个元素需要过渡，则需要使用：<transition-group>，且每个元素都要指定key值
2. 可以下载使用封装好了的库，如animate.css，官网：https://animate.style/,中文网：http://www.animate.net.cn/