第 2 章：Vue 组件化编程

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

1、模块

​ 1、理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件

​ 2、为什么: js 文件很多很复杂

​ 3、作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

2、组件

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

​ 2、为什么: 一个界面的功能很复杂

​ 3、作用: 复用编码, 简化项目编码, 提高运行效率

3、模块化

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

4、组件化

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

二、非单文件组件

​ 1、模板编写没有提示

​ 2、没有构建过程, 无法将 ES6 转换成 ES5

​ 3、不支持组件的 CSS

​ 4、真正开发中几乎不用

三、单文件组件

1、一个 .vue文件的组成(3 个部分)

（1）模板页面

<template>
	页面模板
</template>

（2）JS 模块对象

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

（3）样式

<style>
	样式定义
</style>

2、基本使用

​ 1、引入组件

​ 2、映射成标签

​ 3、使用组件标签