Vue (9) — 模块与组件、非单文件组件、单文件组件

目录

一、模块与组件

 1.模块

        (1).什么是模块

        (2).为什么使用模块

        (3).模块的作用

  2.组件

        (1).什么是组件

        (2).为什么要使用组件

        (3).组件的作用

        (4).传统方式与组件方式编写应用的比较

  3.模块化

  4.组件化

二、非单文件组件

  1.定义

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

        (一)、定义组件（创建组件）

        (二)、注册组件

        (三)、使用组件（写组件标签）

  3.几个注意点

        (一).关于组件名

        (二).关于组件标签

        (三).一个简写方式

  4.组件的嵌套 

  5.关于VueComponent

  6.一个重要的内置关系

三、单文件组件

---

一、模块与组件

 1.模块

        (1).什么是模块

                模块是向外提供特定功能放入 js 程序，一般就是一个 js 文件

        (2).为什么使用模块

                因为 js 文件很多很复杂

        (3).模块的作用

                复用 js，简化 js 的编写，提高 js 的运行效率

  2.组件

        (1).什么是组件

                用来实现局部（特定）功能效果的代码集合(html / css / js / image......)

        (2).为什么要使用组件

                因为一个界面的功能很复杂

        (3).组件的作用

                复用代码，简化项目编码，提高运行效率

        (4).传统方式与组件方式编写应用的比较

  3.模块化

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

  4.组件化

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

二、非单文件组件

  1.定义

        一个文件中包含有n个组件

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

        (一)、定义组件（创建组件）

                使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的那个 options 几乎一样，但也有点区别

            区别如下：

              1. el 不要写，因为最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器

              2. data 必须写成函数，避免组件被复用时，数据存在引用关系

            备注：使用 template 可以配置组件结构

        (二)、注册组件

                1.局部注册：靠new Vue的时候传入components选项

                2.全局注册：靠Vue.component('组件名',组件)