2.Vue 组件化编程

Vue 组件化编程

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

2.1.1. 模块

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

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

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

2.1.2. 组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
2. 为什么: 一个界面的功能很复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率

2.1.3. 模块化

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

2.1.4. 组件化

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

2.2. 非单文件组件

1. 模板编写没有提示 
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS 
4. 真正开发中几乎不用

2.3. 单文件组件

1. 模板页面

<template>
    页面模板
</template>

2. JS 模块对象

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

3. 样式

<style scoped>
样式定义
</style>