第二章 组件化编程

模块与组件、模块化与组件化

模块

1. 理解：向外提供特定功能的 js 程序， 一般就是一个 js 文件。

2. 为什么：js 文件很多很复杂。

3. 作用：复用 js，简化 js 的编写，提高 js 运行效率。

组件

1. 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image …..)。

2. 为什么：一个界面的功能很复杂。

3. 作用：复用编码，简化项目编码，提高运行效率。

模块化

当应用中的 js 都以模块来编写的， 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文件组件

1. 模板编写没有提示。

2. 没有构建过程，无法将 ES6 转换成 ES5。

3. 不支持组件的 CSS。

4. 真正开发中几乎不用。

单文件组件

什么是单文件组件

文件扩展名为.vue的单文件。

.vue文件的组成

模板页面

<template>
页面模板
</template>

JS 模块对象

<script>
export default {
    data() {
        return {}
    },
    methods: {},
    computed: {},
    components: {}
}
</script>

样式

<style>
样式定义
</style>

基本使用

1. 引入组件

<script>
import Aotu from 'aotu.vue'
</script>    

2. 注册组件

<script>
export default {
	components: { Aotu }
}
</script>     

3. 使用组件标签

<template>
	<aotu />
</template>