• 使用Vue脚手架

    Vue组件化编程

    模块

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

    为什么： js 文件很多很复杂

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

    模块化

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

    组件

    传统方式编写应用存在的问题：依赖关系混乱，不好维护，代码复用率不高

    组件是实现应用中局部功能代码和资源的集合

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

    组件化

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

    Vue中使用组件的三大步骤

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

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

    const school = Vue.extend(options) 可简写为：const school = options

    区别如下：

    el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

    data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

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

    二、注册组件

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

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

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

    第一种写法：

    第二种写法：

    备注：不使用脚手架时，会导致后续组件不能渲染。

    几个注意点：

    关于组件名:

    一个单词组成：

    第一种写法(首字母小写)：school

    第二种写法(首字母大写)：School

    多个单词组成：

    第一种写法(kebab-case命名)：my-school

    第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

    备注：

    (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

    关于VueComponent

    组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

    我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

    特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

    关于this指向

    (1).组件配置中：

    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

    (2).new Vue(options)配置中：

    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

    VueComponent的实例对象，我把它简称为vc（也可称之为：组件实例对象）。

    Vue的实例对象，大家都简称为vm。

    1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

    2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。（这个关系能让我们更好的理解全局总线）

    Vue脚手架

    脚手架文件结构

    ├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

    初始化脚手架

    全局安装脚手架@vue/cli

    指令：npm install -g @vue/cl

    切换到想到创建项目的目录，然后使用命令创建项目（dir命令：指定要列出的驱动、目录、文件）

    指令：vue create xxxx（xxxx为项目名称）

    启动项目（项目书写完，启动项目查看效果）

    指令：npm run serve

    关于不同版本的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函数去指定具体内容。

    1. new Vue({
    2.     // 将App组件放入容器中
    3.     render: h => h(App),
    4. }).$mount('#app')

    vue.config.js配置文件

    1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。

    2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：Vue CLI

    例：

    文件名报错，在config配置中关闭文件名校验

    报错的原因可能是：Vue推荐文件名为多英文名，而我们使用了单英文

    练习时建议将其关闭

    1.   //关闭eslint校验
    2.  
    3.   lintOnSave: false

    ref属性

    1. 被用来给元素或子组件注册引用信息（id的替代者）

    2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

    3. 使用方式：

      1. 打标识：

        1.     <h1 v-text="msg" ref="title">h1>
        2.     <button @click="showDOM">点我输出上方DOM元素button>

      2. 获取：

        1.   methods:{
        2.     showDOM(){
        3.       console.log(this.$refs.title);
        4.     }
        5.   }

    props配置项

    1. 功能：让组件接收外部传过来的数据（父对子传递数据）

    2. 传递数据：

          <Student name="张痔疮" sex="男" :age="18">Student>

    3. 接收数据：

      1. 第一种方式（只接收）：

        props:['name','age','sex']

      2. 第二种方式（限制类型）：

        1.  props:{
        2.    name:String,
        3.    age:Number,
        4.    sex:String
        5.   }

      3. 第三种方式（限制类型、限制必要性、指定默认值）：

        1. props:{
        2.     name:{
        3.     type:String, //类型
        4.     required:true, //必要性
        5.     default:'老王' //默认值
        6.     }
        7. }

      备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

    mixin(混入)

    1. 功能：可以把多个组件共用的配置提取成一个混入对象

    2. 使用方式：

      第一步定义混合（建议在src目录下新建一个文件夹，方便多处使用）

      1. export const mixin = {
      2.     methods: {
      3.         showName() {
      4.             alert(this.name)
      5.         }
      6.     }
      7. }

      第二步使用混入：

            是用时先将文件引入到想使用的组件中

    import {mixin} from '../mixing' 

    引入方式是ES6的模块化语法的按需导入

    局部混入：mixins:['xxx']

    全局混入：Vue.mixin(xxx) ​

    插件

    1. 功能：用于增强Vue

    2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

    3. 定义插件：

      1. 对象.install = function (Vue, options) {
      2.     // 1. 添加全局过滤器
      3.     Vue.filter(....)
      4. ​
      5.     // 2. 添加全局指令
      6.     Vue.directive(....)
      7. ​
      8.     // 3. 配置全局混入(合)
      9.     Vue.mixin(....)
      10. ​
      11.     // 4. 添加实例方法
      12.     Vue.prototype.$myMethod = function () {...}
      13.     Vue.prototype.$myProperty = xxxx
      14. }

    4. 使用插件：Vue.use()

    scoped样式

    1. 作用：让样式在局部生效，防止冲突。

    2. 写法：