【Vue】组件化编程

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

模块

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

组件

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

模块化

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

组件化

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

Vue中使用组件的三大步骤：

        一、定义组件（创建组件）
        二、注册组件
        三、使用组件（写组件标签）

一、如何顶一个组件？

        使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有区别;
        区别如下：
            1.el不要写，为什么？ ———— 最终所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
            2.data必须写成函数，为什么？ ———— 避免组件被服用时，数据存在引用关系。
        备注： 使用template可以配置组件结构。

二、如何注册组件？

            1.局部组件： 靠new Vue的时候传入components选项
            2.全局组件： 靠Vue.component('组件名',组件)

三、编写组件标签：

        <school></school>  

脚手架文件结构：

node_modules
public
    favicon.ico: 页签图标
    index.html: 主页面

src
    assets: 存放静态资源
        logo.png
    component: 存放组件
        HelloWorld.vue
    App.vue: 汇总所有组件
    main.js: 入口文件
.gitignore: git版本管制忽略的配置
babel.config.js: bable的配置文件
package.json: 应用包配置文件
README.md: 应用描述文件
package-lock.json: 包版本控制文件

关于不同版本的Vue：

• 1.vue.js与vue.runtime.xxx.js的区别：
  （1）.vue.js是完成版的Vue，包含：核心功能+模板解析器。
  （2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

• 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
  render函数接收到的createElement函数去指定具体内容。

vue.config.js 配置文件

vue inspect > output.js可以查看Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/

ref属性

1.被用来给元素或子组件注册引用信息（id的代替者）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：
    打标识：<h1 ref="xxx">......</h1> 或 <School ref="xxx"></School>
    获取：this.$refs.xxx

配置项props

功能：让组件接收外部传过来的数据
    (1).传递数据：
            <Demo name="xxx"/>
    (2).接收数据：
            第一种方式（只接收）：
              props:['name']

            第二种方式（限制类型）：
              props:{
                name:Number
              }

            第三种方式（限制类型、限制必要性、指定默认值）：
              props:{
                name:{
                    type:String, //类型
                    required:true, //必要性
                    default:'老王' //默认性
                }
              }
备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

功能：可以把多个组件公用的配置提取成一个混入对象
使用方式：
    第一步定义混合，例如：
        {
            data(){....},
            methods:{....}
            ....
        }
    第二步使用混入，例如：
        （1）.全局：Vue.mixin(xxx)
        （2）.局部混入：mixin:['xxx']