目录
工程化开发
工程化开发模式:基于构建工具的环境中开发Vue。
Vue CLI是官方提供的一个全局命令工具。可以快速创建一个开发Vue项目的标准化基础架子。
使用步骤:
- 全局安装:yarn global add @vue/cli 或 npm i @vue/cli -g
- 查看vue版本:vue --version
- 创建项目架子:vue create project-name(项目名)
- 启动项目: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>
普通组件的注册使用
局部注册
:只能在注册的组件内使用
- 创建.vue文件
- 在使用的组件内导入并注册
在src文件夹下创建components文件夹放入组件,组件命名需遵循大驼峰命名法,否则会报错。
全局注册
:所有组件内都能使用
- 创建.vue文件
- 在main.js中进行全局注册
还是在components文件夹下面创建vue文件:
然后再main.js中注册:
最后在其他vue文件中使用:
组件三大组成部分说明
template
只能有一个根元素
style
全局样式(默认):会影响所有的组件,很容易造成多个组件之间的问题
局部样式:scoped下样式,只作用于当前组件
原理:
- 给当前组件模版的所有元素,都会被添加一个自定义属性data-v-hash值,区分不同组件
- css选择器后面,被自动处理,添加上的属性选择器
示例:
在修改后若样式消失,可以关闭页面重新打开。。
script
el根为实例独有,data是一个函数,其他配置项一致。
一个组件的data选项必须是一个函数。保证每个组件实例,维护独立的一份数据对象。每次创建新的组件实例,都会执行一次data函数,得到一个对象。
示例:
data函数执行了3次,每个组件实例,维护独立的对象。
组件通信
组件通信指组件之间的数据传递。组件的数据时独立的,无法直接访问其他组件的数据。
组件之间的关系:
- 父子关系
- 非父子关系
父子关系
- 父组件通过props将数据传递给子组件
- 子组件利用$emit通知父组件修改更新
prpo
定义:组件上注册的一些自定义属性
作用:向子组件传递任意数量、任意类型的数据
父传子示例:
子传父示例:
prpos校验
作用: 为组件的prop指定验证要求,不符合要求,控制台就会有错误提示。
语法:
- 类型校验
- 非空校验
- 默认值
- 自定义校验
类型校验
props:{
校验的属性名 : 类型 //Number String Bollean
},
示例:传入一个String值,校验是否为Number
其他校验
为了要进行更细致的校验,可以将属性名写成一个更完整的对象
prop与data、单向数据流
共同点:都可以给组件提供数据。
区别:
- data的数据是自己的,随便改
- prop的数据是外部的,不能直接改,要遵循单向数据流
示例1.由自己提供数据:
示例2.接收prop传过来的数据,不能直接改:
产生报错,原因是
尝试修改外部的数据。可以添加对应的函数:
报错消失,接下来添加对应的逻辑,遵循谁的数据谁负责原则: