vue2+3基础

vue2+3

vue快速上手

什么是vue

vue是一个用于构建用户界面的渐进式框架

vue核心包开发:局部模块改造

vue核心包+vue插件 工程化开发:整站开发

优点:大大提升开发效率

缺点:需要理解记忆规则

vue实例

初始化渲染:

核心四步

1.准备容器

2.引包 开发版本的包/生产版本的包

3.创建vue实例 new vue(){}

4.指定配置项

​ el 指定挂载点

​ data 提供数据

学习时使用开发版本

引入开发版本的包

.

{{msg}}

​ {{count}}

可以在里面加标签

const app = new Vue({

el: '#app',

​ data:{

​ msg:‘hello vue’

​ count:666

​ }

methods{}

})

插值表达式

作用:利用表达式进行插值,渲染到页面中

{{表达式}}

使用的数据必须存在,支持表达式而非if那些语句,不能再标签属性里面使用{{}}插值

响应式特性

数据变化,对应的视图自动更新

在vue开发时可以在console里面进行修改

访问数据: 实例.属性名

开发者工具:装插件调试vue应用

vue指令

指令: 带有v-前缀 的 特殊 标签属性

如 v-html=“src” 动态地去改变innerhtml

解析标签使用vue指令

v-show

控制元素显示隐藏

v-show = “表达式” true显示,false隐藏

切换css里面的display:none

在频繁切换显示隐藏的场景

v-if

控制元素显示隐藏(条件渲染) true显示,false隐藏

控制元素的创建和移除

要么显示,要么隐藏,步频繁切换的场景

v-else

v-else-if

辅助v-if进行判断渲染,一定得贴近v-if

v-on

注册事件 = 添加监听 + 处理逻辑

v-on : 事件名 = “内联语句”

v-on: 事件名= “methods中的函数名”

v-on: 可以写成@

this指向当前的实例

v-on 调用传参

@click=“fn(参数1,参数2)”

v-bind 动态设置html的标签属性

v-bind:属性名=“表达式”

v-bind:src 可以省略成 :src v-bind可以省略

v-for 基于数据循环,多次渲染整个元素

v-for=“(item,index) in 数组” item 每一项 index索引,index和括号都可以省略

v-for中的key=“唯一标识”

给列表项添加唯一标识,便于vue进行列表项的正确排序复用

v-for=“”:key=“item.id”

没有加key v-for就会默认原地修改元素(就地复用)

key只能是字符串或者数字,且值必须要有唯一性

v-model 给表单元素使用,双向数据绑定,可以快速获取或设置表单元素内容

视图变化->数据更新 … 数据更新->视图变化

v-model=‘变量’

列表.filter(item => item.id !== id) 保留所有不等于id的项

列表.unshift({}) 往列表最前面进行添加,对于想要把id属性也加在前面的需求,我们可以在id变量那边变成 id: +new Date(),就可以把新建的id放在最前面

获取输入内容 this.todiName.trim() ===‘’

来对输入内容进行判断,trim去首位空格

指令修饰符:通过.指明一些指令的后缀,不同的修饰符后缀封装了不同的处理操作

key.enter监听回车事件

v-bind对于样式控制的增强

操作class 语法 : class=“对象/数组”

对象.

布尔值为true代表有这个类,否则就是没有这个类

数组.

操作style语法: style = “样式对象”

.

对于background-color这种在里面我们不能直接写入,所有我们得加上单引号变成’background-color’=pink这种写法,或者说使用小驼峰写法backgroundColor这样就可以了

比如说我们设置进度条百分比,我们可以用过设置一个变量perscent+"%"来设置百分比

v-model应用于其它表单元素

对于单选框来说,加上name属性,可以实现分组,->同一组会相互排斥,比如说一个人的性别,给单选框加上value属性,可以给后台提交数据

计算属性,基于现有的数据,计算出来的新属性,以来数据变化,自动重新计算

语法: 声明在computed 配置项中,一个计算属性对应一个函数

computed: {

​ 计算属性名(){

​ 求值逻辑

​ return 结果

​ }

}

reduce方法求和

let total = this.list.reduce{(计算参数) => 计算方法,起始值}

computed 封装一段对于数据的处理,求得一个结果,有缓存特性可以提升性能:计算属性会对计算出来的结果缓存,再次使用直接读取缓存,依赖项变化了,会自动重新计算

methods使用几次就会调用几次,而computed只会调用一次

计算属性的完整写法

computed: {

​ 计算属性名: {

​ get(){

​ 一段代码逻辑(计算逻辑)

​ return 结果

​ },

​ set(修改的值){

​ 一段代码逻辑(修改逻辑)

​ }

​ }

}

简写的只能进行获取,不能进行设置

字符串通过slice函数切割

watch 监视器:监视数据变化,执行业务逻辑或异步操作

简单写法:简单类型数据,直接监视

watch: {

​ 监视对象(newValue,oldValue){

​ 该方法会在我们数据变化时执行

​ }

}

如果要监视对象里面的子属性,就把方法名改为 ‘对象.属性’

完整写法 添加额外配置项

deep: true,深度监视

immediate: true, 初始化立刻执行一次handler方法

watch:{

​ obj: {

​ deep:true,

​ immediate: true,

​ handler(newValue){

​ 操作,obj这个对象里面所有的值都被监视

​ }

​ }

}

every(item=> item.isChecked ===true) 对列表的所有属性进行全选判断

全选返选通过计算属性的完整写法来完成

isAll:{

​ get(){

​ return this.list.every(item.isChecked)

​ }

​ set(value){ value这里拿到的就是全选框的值

​ this.list.forEach(item => item.isChecked = value)

​ }

}

vue的生命周期

一个vue实例从创建到销毁的整个过程

new Vue( ) 创建阶段 挂载阶段 更新阶段 销毁阶段

创建阶段,把我们初始化的数据进行响应化处理

挂载阶段,渲染模板

更新阶段,数据修改,视图更新

销毁阶段,删除实例

在每个阶段系统都提供了两个函数,一个在阶段开始前,一个在阶段结束后,会自动运行

称为生命周期钩子,我们可以在特点阶段运行自己的代码

总共八个函数:beforeCreate,created,beforeMonte,monted,beforeUpdate,updated,beforeDestory,destoryed

工程化开发&脚手架 Vue CLI

基于建构工具的环境开发Vue

Vue CLI是官方提供的全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子

使用步骤:(得先安装node配置环境变量)

1.全局安装(一次):yarn global add @vue/cil 或npm i @vue/cil -g

2.查看Vue的版本: vue --version

3.创建项目架子: vue create project-name(不能用中文名)

4.yarn serve 或 npm run serve (找package.json)

serve是在scripts里面的命令,可以改动它的名字

脚手架目录文件结束&项目运行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O59oR9mW-1692542151534)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820174339538.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojqZaIAC-1692542151535)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820175535583.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06vnWioC-1692542151536)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820175601557.png)]

组件化开发

一个页面可以拆分成一个个组件,每个组件都有着自己独立的样式,结构,行为.

好处:便于维护,利于复用 -> 提升开发效率

根组件:整个应用最上层的组件,包裹所有小组件 App.vue

由结构,行为,样式三部分组成

提供结构

vue2里面只能有一个根结构

提供行为 提供样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VeII1Zj-1692542151536)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820180830087.png)]

普通组件的注册使用:

局部注册:只能在注册的组件内使用

1.创建.vue文件(三个组成部分)

2.在使用的组件内导入并注册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKxTOnZv-1692542151536)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820181135626.png)]

使用时直接当成html标签来使用<组件名>

全局注册:所有组件内都能使用

1.创建.vue文件

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3Pw3qrZ-1692542151537)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820182400324.png)]

选择第一个快速创建三个组成部分

在设置里面找到trigger on tab 就可以实现标签名+tab自动生成标签

scoped样式冲突

样式默认是全局样式,会影响所有组件

给样式加上scoped属性,可以让样式只作用于当前组件

组件的data是一个函数->保证每个组件实例,维护独立的一份数据对象

也就是相同的组件,他们的数据是相互独立的

data(){

​ return{

​ count :999

​ }

}

组件通信:组件和组件之间传递数据

组件的数据是独立的,无法直接访问其他组件的内容

组件关系分类;

父子关系:

props和$emit

父组件通过props将数据传递给子组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x2RjwMgU-1692542151537)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820191720107.png)]

子组件通过$emit通知父组件修改更新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2ghrSPn-1692542151537)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820191708679.png)]

---

props校验,为组件的prop指定验证要求,不符合要求,控制台就会有错误提示

类型校验:props: {

​ 校验的属性名: 类型

},

进行多个校验的时候,就不能只写键值对了,得写成是一个对象,里面多个属性进行校验

非空校验:required: true 是否必填

默认值:deafult

自定义校验: validator(传入的值){判断语句 return boolean}

prop&data 单向数据流

data的数据是自己的,可以随便修改

prop的数据是外部的,不能修改

非父子关系:

provide & inject跨层级共享数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtqibUPj-1692542151537)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820202140454.png)]

eventbus 事件总线

我们得先创建一个都能访问到达事件总线(空的Vuew实例 )

utils -> utils/EventBus.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQtI6Mrb-1692542151538)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820200341526.png)]

通用解决方案:Vuex(适合复杂业务场景)

共享数据,简单的数据类型是不会响应的,复杂的数据类型是响应式的

所有推荐使用复杂数据类型

v-model原理

v-model本质上是一个语法糖,比如说应用在输入框上,就是value属性和input属性的和写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CquH5WY6-1692542151538)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820204717803.png)]

通过 $event获取到当前输入框对象,

表单类组件封装 & v-model 简化代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-it3EySbj-1692542151538)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820205817981.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lu8Slf4A-1692542151539)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820210159234.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vWBLEfq-1692542151539)(C:\Users\念天\AppData\Roaming\Typora\typora-user-images\image-20230820210744335.png)]

sync修饰符

实现子组件和父组件的双向绑定,简化代码

prop属性名可以自定义,而v-model固定为value

-ref和$refs获取dom插件

Vue异步更新和$nextTick