vue2+3基础

vue快速上手

什么是vue

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

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

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

优点:大大提升开发效率

缺点:需要理解记忆规则

vue实例

初始化渲染:

核心四步

1.准备容器

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

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

4.指定配置项

el 指定挂载点

data 提供数据

学习时使用开发版本

引入开发版本的包

.<div id="app"> {{msg}}

{{count}}

</div>

可以在里面加标签

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

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="对象/数组"

对象.<div class = "box" :class="{类名1:布尔值,类名2:布尔值}"></div>

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

数组.<div class="box" :class="['类名1','类名2','类名3']"></div>

操作style语法: style = "样式对象"

.<div class = "box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>

对于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里面的命令,可以改动它的名字

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

组件化开发

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

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

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

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

<template></template>提供结构

vue2里面只能有一个根结构

<script></script>提供行为

<style></style>提供样式

普通组件的注册使用:

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

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

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

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

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

1.创建.vue文件

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

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

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

scoped样式冲突

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

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

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

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

data(){

return{

count :999

}

}

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

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

组件关系分类;

父子关系:

props和$emit

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

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

---

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

类型校验:props: {

校验的属性名: 类型

},

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

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

默认值:deafult

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

prop&data 单向数据流

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

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

非父子关系:

provide & inject跨层级共享数据

eventbus 事件总线

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

utils -> utils/EventBus.js

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

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

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

v-model原理

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

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

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

sync修饰符

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

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

-ref和$refs获取dom插件 ,或组件实例

查找范围 -> 当前组件内(更准确稳定)

Vue异步更新和$nextTick

因为Vue的异步更新,使用dom的属性被改动时候不会第一时间就显示出来,所以我们再对这些改动的属性进行操作的时候是不会成立的

$nextTick:等dom更新后,才会触发此方法体里的函数体

this.$nextTick(( ) = > { 函数体 })

自定义指令

自己定义的指令,可以封装一些dom操作,扩展额外功能

el就是我们的对象,再注册绑定完后,inserted就会绑定el标签(我们的对象),我们就可以对el标签进行扩展功能

使用的时候再标签联盟加上 <v-指令名> 就可以实现扩展的功能

但是我们再页面中更新数据的时候,页面显示的数据不会一起改变,我们就得利用update函数去进行页面显示元素的改变

插槽

让组件内部的一些结构支持自定义

在slot标签内放置东西,可以作为默认值

具名插槽:多处结构想要我们去定制,多个slot使用name属性区分名字

v-slot:插槽名 可以简化为 #插槽名

定义slot插槽的同时,可以传值,给插槽绑定上数据产生一个新的对象赖接收这些数据,将来使用插件的时候可以使用

路由入门

单页面应用:所以功能在一个html的页面上

最大的原因是按需更新,按需更新首先得明确:访问路径和组件的对于关系

Vue里面的路由:组件和路径的映射关系

VueRouter介绍

作用:修改地址栏路径时,切换显示匹配的插件

vue ,vue router ,vuex 233,344

router-view标签是用来定义选择组件位置的

建立组件往views文件夹里面建

页面相关组件放在views文件里面,复用的组件放在components里面

路由进阶

路由模块抽离封装处理:拆分模块,利于维护

创建一个router文件夹,里面创建一个index.js文件,把相关代码全部放在index.js文件里面,在main.js里面导入这个文件就可以了

vue-router 提供了一个全局组件 router-link(取代a标签)能高亮和跳转,里面有两个参数 router-link-exact-active 和router-link-active

router-link-exact-active 精确匹配,比如说to="/my" 就只能匹配到/my这个路径

router-link-active 模糊匹配,to="/my" 也可以把/my下面的路径一起匹配到

两个太长了可以在router创建的时候写在里面 linkActiveClass:"类名1",linkExactActiveClass:"类名2"

router-link to="/路径值" 与a标签的区别在于 路径值前面不需要再加#

跳转传参

查询参数传参 适合传多个参数

to="/path?参数名=值"

多个值可以通过&来连接或者说写完整格式

path:{参数名1=值1,参数名2=值2}

使用$route.query.参数名来调用

动态路由传参 传单个参数比较方便

首先得配置动态路由:在路由处修改path:"/path/:'参数名'"(这样必须得传参数,如果想不传参数匹配的话可以加个可选符号?)

配置导航链接 to="/path/参数值"

通过$route.params.参数名 来接收值

重定向:url默认的是/路径,为匹配到组件的时候,会出现空白,为了解决这个问题,我们提出重定向

匹配到path后,强制跳转path路径{path:匹配路径,redirect:重定向到的路径}

404:当路径找不到的时候,给一个提示的页面

配在路由的最后面,path:"*"(任意路径)-前面不匹配就只能匹配到最后这个

模式设置

默认是hash路由,带有#,我们可以动态给他改成history路由,路径上就没有#

1 path路径通过this.$router.push('路径路由') 进行跳转

this.$router.push({

path:'/路径',

query:{

参数名1:'参数值1',

}

})

通过$.route.query.参数名 获取参数

2 name命名路由跳转(适合path长的路径)

{name:'路由名',path:'/path/xxx',component:xxx},

通过$.route.params.参数名 获取参数

this.$router.push({

name:'/路由名字',

params:{

参数名1:'参数值1',

}

})

一级路由嵌套二级路由

通过children配置项,可以配置嵌套子路由

在children配置规则,在一级路由处配置出口也就是在一级路由处也写一个router-view标签来作为二级路由的出口

children:[

{

path:

component:一级路由名称

}

]

首页渲染请求: 先安装axios 再看接口文档,确认你请求方式,请求地址,请求参数

created中发送请求,获取v数据,存起来,最后进行页面渲染即可

组件缓存 keep-alive 是vue的内置组件,当它包裹组件时,会缓存不活动的组件实例,在组件切换的时候保留在内存里面,防止重复渲染dom

keep-alive的三个属性

include:组件名数组 只有匹配的组件会缓存

exclude: 组件名数组 任何匹配的组件都不会缓存

max: 最多可以匹配多少组件实例

还附带了两个生命周期钩子 actived 和 deactived

在切换的时候,如果是在这个页面就是active 如果跳转到了别的页面就是reactived

vue3

前提:安装了16.0版本以上的node.js

创建一个vue应用 npm init vue@latest

vue2和vue3的一些区别:

vue3通过vite进行底层的运行,更快,更稳定

package.json 项目包文件核心依赖项变成了Vue3.x和vite

main.js 入口文件createApp函数创建应用实例

app.vue 根组件 SFC单文件组件 script - template -style

index.html 但也入口 提供id为app的挂载点

setup(){}是启动在beforeCreate前面的,使用setup获取不到this但是setup最后得用return返回里面的函数和数据,如果数据很多,一个个返回 的话就很麻烦,使用我们就会把setup写在<script setup> 标签里面

就会自动帮我们return数据,就不需要手动去return了

reactive():接收对象类型数据的参数传入并返回一个响应式的对象

1.在vue包里面导入reactive函数

2,在<script setup>中执行reactive函数并传入类型为对象的初始值,并使用变量去接收返回值

const state = reactive(对象类型数据)

ref() 推荐

接收对象类型数据的参数和简单数据类型的参数传入并返回一个响应式的对象

1.在vue包里面导入refe函数

2,在<script setup>中执行ref函数并传入类型为对象的初始值,并使用变量去接收返回值

const state = ref(数据)

本质就是ref在原有的数据类型外面包了一层对象,再借助reactive实现的响应式 访问数据的内容得通过.value去获取

再template中就不需要使用.value它自动帮我们扒了它外面的那层对象

computed计算属性函数

1,导入computed函数

2,执行函数 再回调参数中return 基于响应式数据做计算的值,通过变量接收

const a = computed( () => { return 计算后的值 } )

watch函数

监听一个或多个数据的变化

只监听一个值的话就直接watch({ 值,(newValue,oldValue) => })

监听多个数据的值watch({[监听对象数组] (newArr,oldArr)=>...})

immediate再监听器创建时就立即触发回调

默认是浅层监视,只能监视到数据的值的变化,对于复杂数据类型得到的只是地址值不会变化,使用不能监听到复杂数据类型的变化,这时候我们就得使用deep去深度监听,就能监听到复杂数据类型内部的值的变化

但是如果我们只需要对复杂数据类型里面某个值进行监听

watch( ( )=> 监听对象 ( )=> 回调执行结果)

生命周期API

父子通信API

由于写了setup不能直接配置props选项,使用借助于"编译器宏"函数接收子组件传递的数据

传递动态的值就得在 子组件里面通过 :键="值" 的方式去得到一个动态的数据

模板引用

通过ref标识去获取真实的dom对象或者组件实例对象

最后通过.value获取到dom绑定的元素(必须渲染完后才能实现)

默认情况下setup语法糖组件内部的属性和方法是不开放给父组件访问的

通过defineExpose编译宏定义指定哪些属性和方法允许访问

defineExpose{给外界的元素}

provide和inject

顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

顶层组件通过provide函数提供数据,底层组件通过inject函数获取数据

传入的是响应式的数据的话provide的第二个参数得写成ref对象

也可以传递方法,通过方法来对顶层数据的修改和传参

defineOptions

3.3以上的版本才可以使用

比如说name这些属性,我们不能写在又setup修饰的script标签里面,如果要使用的话,就得重新再写一个script标签,通过defineOption可以用来定义Options API的选项 props,emits,expose,slots等有自己的宏函数的除外

defineModel

快速实现双向绑定

老版本的v-model写法

新版本的defineModel写法

先在vite.config.js里面加配置

在vue里面添加对象vue({srcipt:{defineModel:true}})

什么是pinia

是vue最新的状态管理工具,是vuex的替代品

手动添加pinia到vue项目

先创建一个vue3项目 npm create vue@latest

安装pinia npm install pinia 或者 yarn add pinia

接着在main.js里面 import {createApp} from 'vue'

import{createPinia} from 'pinia'

import App from'./App.vue'

const pinia = createPinia()

const app = createApp(app)

app.use(pinia)

app.mount('#app')

Pinia的基本方法

action的异步实现,和正常的写法无异,但是不能去解构,解构完不去进行处理就会丢失响应式,可以通过先导入storeToRefs,再把解构的数据放在storeToRefs里面就能避免丢失响应式

const {count,msg } = storeToRefs(countStore)

state

actions

getters

pinia持久化插件

先进行安装pinia依赖

npm i pinia-plugin-persistedstate

将插件添加到 pinia 实例上

import { createPinia } from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia() pinia.use(piniaPluginPersistedstate)

写在main.js里面

修改完后,在我们进行改动的时候会往我们本地去存储数据,在我们调试的时候会优先去本地找数据

也可以在里面把persist改成{persist:{key:"变量名"}}

通过变量名作为对象去存储数据