（一）模块与组件、模块化与组件化

1.模块

• 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
• 为什么：js 文件很多很复杂
• 作用：复用 js，简化 js 的编写，提高 js 运行效率

2.组件

• 理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image/...）
• 为什么：一个界面的功能很复杂
• 作用：复用编码，简化项目编码，提高项目运行效率

3.模块化

（一）基本使用

1.Vue 中使用组件的三大步骤

• 定义组件（创建组件）
• 注册组件
• 使用组件（写组件标签）

2.如何定义一个组件

1）创建

• 使用 Vue.extend(options) 创建
• 其中 options 和 new Vue(options) 时传入的那个 options 几乎一样
• 使用 template 可以配置组件结构

（一）说明

• Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）
• Vue Command Line Interface（命令行接口工具 ==> 脚手架）
• 文档

（二）具体步骤

1.全局安装@vue/cli

• 仅首次安装执行

npm install -g @vue/cli

（一）作用

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

（二）值

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

（三）使用方式

1.打标识

<h1 ref="xxx"></h1>
<!-- 或者 -->
<School ref="xxx"></School>

（一）作用

• 让组件接收外部传过来的数据

（二）传递数据

<Demo name="xxx" />

（一）功能

• 可以把多个组件共用的配置提取成一个混入对象

（二）使用方式

1.定义混合

export const mixin = {
  data(){...},
  methods(){...},
  ...
};

（一）功能

• 用于增强 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 = xxx;
}

（一）作用

• 让样式在局部生效
• 防止冲突

（二）写法

<style scoped>
.....
</style>

（一）实现静态组件

• 抽取组件，使用组件实现静态页面效果

（二）展示动态数据

• 数据的类型、名称是什么？
• 数据保存在哪个组件？

（三）交互——从绑定事件监听开始

（一）组件化编码流程

1.拆分静态组件

• 组件要按照功能点拆分
• 命名不要与 html 元素冲突

2.实现动态组件

• 考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
• 一个组件在用：放在组件自身即可
• 一些组件在用：放在他们共同的父组件上（状态提升）
• 用：读数据、写数据

3.实现交互

• 从绑定事件开始