脚手架Vue CLI

Vue Cli是Vue官方提供的一个全局命令工具。

好处：

开箱即用，零配置
内置babel等工具
标准化

使用步骤：

全局安装（一次即可）：

yarn global add @vue/cli
//或
npm install @vue/cli -g

查看Vue版本：#vue –version
创建项目架子：#vue create 项目名(不能用中文)

启动项目：

yarn  serve
//或
npm run serve
//找package.json

组件化开发：

组件分类：普通组件和根组件

根组件：整个应用最上层的组件包裹所有普通小组件。

根文件：（单文件组件）的三个组成部分

template：结构（有且只有一个根元素）
script：js逻辑
style：样式（可支持less，需要安装包）

让组件支持less：

style标签添加属性lang=”less”开启less功能
装包：#yarn add less less-loader -D（-D：开发依赖）

普通组件的注册使用：

局部注册：（只能在注册的组件内使用）

1. 创建.vue文件（三个组成部分）

1. 在使用的组件内导入并使用

1. 使用：当成Html标签使用<组件名></组件名>

1. 注意：组件名规范=>大驼峰命名法

import  组件对象  from  '.vue文件路径'

export default {
      comonents:{
            '组件名':组件对象
      }
}

全局注册：（所有组件内都能使用）

1. 创建.vue的文件（三个组成部分）

1. main.js中进行全局注册

import 组件对象 from '.vue文件路径'

Vue.component('组件名',组件对象)

组件的三大组成部分：

样式冲突：scoped

1. 默认情况：写在组件中的样式会作用到全局

1. 全局样式：默认组件中的样式会作用到全局

1. 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

1. scoped原理：
  - - 当前组件内标签都被添加data-v-hash值的属性
  - - css选择器都被添加[data-v-hash]的属性选择器
  - - 最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

data是一个函数:

- 一个组件的data选项必须是一个函数 => 保证每个组件的实例，维护独立的一份数据对象。

- 每次创建新的组件实例，都会执行一次data函数，得到一个新对象

export default{
      data(){
            
      }
}

组件通信：

组件关系分类：父子组件和非父子组件。

组件通信解决方案：

- 父子关系：（props和$emit）
  - - 父组件通过props将数据传递给子组件
  - - 子组件利用$emit通过父组件修改更新

//夫 => 子
//父组件
//...
export  default{
      data(){
            return {
                   myTitle:'内容',
            }
      }
}

<son :Title="myTitle"></son>
//...

//子组件
//...
export  default{
      props:['Title']
}
//...

//子 => 夫（数据更新）
//父组件
//...

<son :Title="myTitle" @ChangeTitle="changeFn"></son>

data(){
      return {
            myTitle:'内容'
      }
},
methods:{
      changeFn(newTitle){
            this.myTitle = newTitle;
      }
}
//...

//子组件
//...

<button @click=update>修改</button>

props:['Title'],
methods{
      update(){
            this.$emit('changeTitle','更新的内容');
      }
}

- 非父子关系：（event、bus事件总线）
  - - 作用：非父子之间进行简易的消息传递
  - - 步骤：
      - 创建一个能访问到的事件总线（空的vue实例）
      - 接收方：监听Bus实例事件
      - 发送方：触发Bus实例的事件

//Bus.js

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

//接收方
create(){
      Bus.$on('sendMsg',msg=>{
            this.msg = msg;
      })
}

//发送方
Bus.$emit('sendMsg','内容');

- 非父子跨层级通信：（provide、inject）
  - - 作用：跨层级共享数据
  - - 步骤：
      - 父组件provide提供数据
      - 子/孙组件inject取值使用

//父组件
export default{
      provide(){
            return{
                  color:this.color,//普通类型（非响应式）
                  userInfo:this.userInfo//复杂类型（响应式）
            }
      }
}

//子组件
export default{
      inject:['color','userInfo'],
      create(){
            console.log(this.color,this.userInfo);
      }
}

props:

- 定义：组件上注册一些自定义的属性

- 作用：向子组件传递数据

- 特点：
  - - 可以传递任意数量的prop
  - - 可以传递任意类型的prop

- props校验：
  - - 作用：为组件的prop指定验证要求，不符合要求，控制台就会报错
  - - 语法：
      - 类型校验：props：{校验属性名：类型}
      - 非空校验
      - 默认值校验
      - 自定义校验

props:{
      校验属性名:{
            type:类型,
            required:true,//是否必填
            default：默认值,
            validator(value){
                  return 是否通过校验（true/false）
            }
      }
}

- props和data、单向数据流
  - - 共同点：都可以给组件提供数据
  - - 区别：
      - data的数据是自己的=>随便修改
      - props的数据是外部的=>不能直接改，要遵循单向数据流
  - - 单向数据流：父级props的数据更新，会向下流动，影响子组件，这个数据流动时单向的。
  - - 口诀：谁的数据谁负责