Vue(7)——工程化开发

目录

工程化开发

组件化开发

普通组件的注册使用

局部注册

全局注册

组件三大组成部分说明 

template

style

script

组件通信 

父子关系

prpo

prpos校验

类型校验

其他校验 

prop与data、单向数据流 

---

工程化开发

工程化开发模式：基于构建工具的环境中开发Vue。

Vue CLI是官方提供的一个全局命令工具。可以快速创建一个开发Vue项目的标准化基础架子。

使用步骤：

1. 全局安装:yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看vue版本：vue --version
3. 创建项目架子:vue create project-name(项目名)
4. 启动项目:yarn server 或 npm run serve

其中创建架子时等待的时间比较久...。最后使用npm启动项目。 打开浏览器搜localhost:8080或127.0.0.1:8080。

如果为这个界面则表示启动成功。

通过脚手架创建的目录如下：

组件化开发

组件化开发：一个页面可以拆分一个个组件，每个组件有自己独立的结构，样式，行为。

好处是：便于维护，利于复用，提升开发效率。

组件分类：普通组件，根组件。

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

---

App.vue文件(单文件组件)的三个组成部分：

经过修改

<template>
  <div class="App">
    <div class="box" @click="fn">

    </div>
  </div>
</template>

<script>
export default{
  methods:{
    fn(){
      alert('ok')
    }
  }
}
</script>

<style>
.App{
  width: 300px;
  height: 300px;
  background-color: pink;
  }
  .App .box{
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
</style>

---

普通组件的注册使用

局部注册

：只能在注册的组件内使用

1. 创建.vue文件
2. 在使用的组件内导入并注册 

 在src文件夹下创建components文件夹放入组件，组件命名需遵循大驼峰命名法，否则会报错。

---

全局注册

：所有组件内都能使用

1. 创建.vue文件
2. 在main.js中进行全局注册

还是在components文件夹下面创建vue文件：

然后再main.js中注册：

最后在其他vue文件中使用：

 

组件三大组成部分说明 

template

只能有一个根元素

style

全局样式（默认）：会影响所有的组件，很容易造成多个组件之间的问题

局部样式：scoped下样式，只作用于当前组件

原理：

1. 给当前组件模版的所有元素，都会被添加一个自定义属性data-v-hash值，区分不同组件
2. css选择器后面，被自动处理，添加上的属性选择器

示例：

在修改后若样式消失，可以关闭页面重新打开。。

script

el根为实例独有，data是一个函数，其他配置项一致。

一个组件的data选项必须是一个函数。保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会执行一次data函数，得到一个对象。

示例：

 

data函数执行了3次，每个组件实例，维护独立的对象。 

组件通信 

组件通信指组件之间的数据传递。组件的数据时独立的，无法直接访问其他组件的数据。

组件之间的关系：

1. 父子关系
2. 非父子关系

父子关系

1. 父组件通过props将数据传递给子组件
2. 子组件利用$emit通知父组件修改更新

prpo

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

作用：向子组件传递任意数量、任意类型的数据

---

 父传子示例：

子传父示例：

---

prpos校验

作用: 为组件的prop指定验证要求，不符合要求，控制台就会有错误提示。

语法：

1. 类型校验
2. 非空校验
3. 默认值
4. 自定义校验

类型校验

props:{

  校验的属性名 : 类型    //Number  String Bollean

},

示例：传入一个String值，校验是否为Number 

其他校验 

为了要进行更细致的校验，可以将属性名写成一个更完整的对象

prop与data、单向数据流 

共同点：都可以给组件提供数据。

区别：

1. data的数据是自己的，随便改
2. prop的数据是外部的，不能直接改，要遵循单向数据流

示例1.由自己提供数据：

示例2.接收prop传过来的数据，不能直接改：

产生报错，原因是

尝试修改外部的数据。可以添加对应的函数：

报错消失，接下来添加对应的逻辑，遵循谁的数据谁负责原则：

---