首页  思维导图  详情

Vue全家桶

2022-11-07 09:25:46   1  举报





AI智能生成

为你推荐

查看更多



Vue

主要整理了Vue2.x和V3.x(还在更新中)、Vue Router的3.x和4.x版本、VueX的3.x和4.x版本、AXIOS的基本使用、ElementUI的基本使用(还在更新中)

Vue.js

Vuex

vue cli

Vue Router

ElementUI

作者其他创作

大纲/内容

什么是Vue

https://v2.cn.vuejs.org/

官网

cdn

npm install vue

nodejs

vue-cli

下载安装

引入vue依赖

选择器或 dom 元素

Vue实例挂载的元素

data: { key: value }

对象写法

当前 Vue 实例

data(vm) { return { key: value } }

data: function(vm) { return { key: value } }

函数写法

注意：以 _ 或 $ 开头的属性将不会被组件实例代理，因为它们可能和 Vue 的内置属性、API 方法冲突。你必须以 this.$data._property 的方式访问它们。

data

创建Vue实例

delimiters

模板语法

Vue.version

查看Vue的版本

属性名写错

常见错误

Vue.config 是一个对象，包含 Vue 的全局配置

Vue.config.silent = true

false，会显示警告和报错信息

true，不会显示

Vue日志开关

vue.js devtool

Firfox

vue devtool

Edge

vue开发者工具

开发版本

生产版本

开发版本有启动日志

开发版本默认为true，生产版本默认为false，需要手动开启

Vue.config.devtools = true

开发版本与生产版本的区别

入门示例

https://vue-js.com/learn-vue/

学习资料

概述

textContent

替换整个标签的内容

v-text

innerHTML

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的

在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style> 元素，手动设置类似 BEM 的作用域策略。

v-html

控制元素的显示与隐藏，就算隐藏元素还是在页面上，当元素会频繁切换时推荐使用

boolean

本质上是通过style=\"display: none;\"

v-show

里面所有{{}}语法只渲染一次

不用赋值的指令

该元素生成的 VNode 的 isStatic 属性为 true

v-once

不使用解析处理 mustache 语法

v-pre

需要结合样式使用

处理页面加载时，数据变量无法解析的问题

浏览器开发者工具

v-cloak

不符合条件的元素不会在页面上存在

v-else-if

v-else

一定要清楚与v-show之间的区别

v-if

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示

数值可是数字也可以是字符串

item in 数组或对象或数值

使用

只有在v-if不影响数据总数时，推荐使用，否则建议使用计算属性先过滤数据

注意：不推荐同时使用 v-if 和 v-for，因为当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

不加key，因为虚拟DOM的比较实现导致，部分元素的状态无法对应

加key，且保存证在该for循环中是值唯一，就可以解决，而且在页面更新之不会改变

key

https://zhuanlan.zhihu.com/p/225105999

参考资料

diff算法

通过console.dir()打印一个dom元素查看

真实DOM

就是Vue定义了一个类，用来描述DOM节点

VNode

什么是虚拟DOM

v-for

将事件与methods中的函数(方法)进行绑定

事件名没有 on

v-on:事件名

v-on=\

简写

实现综合练习中的删除功能

练习

v-on

注意不需要写this

v-bind:属性=\"属性名称\"

Vue实例中的属性

v-bind:属性=\"'值'\"

字符串

v-bind:属性=\"数字\"

数字

v-bind:属性=\"true或false\"

注意没有（:属性）

v-bind=\"{}\"

对象的 key 作为属性名，value 作为属性值

对象

v-bind:属性=\"[]\"

数组

普通值

v-bind:属性 = \"vue实例属性名\"

Vue中属性

单向绑定，给标签动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

覆盖

value

组合，将两个属性中的值拼接在一起

注意：遇到使用-分隔的样式名称时，使用引号包裹即可

class

组合，重名时以v-bind中的为主

注意：遇到使用-分隔的样式名称时，使用驼峰式命名

style

与标签属性一起使用

简写(:)

https://v2.cn.vuejs.org/v2/guide/class-and-style.html

完成页码切换功能，在控制中修改变量的值

样式处理

attribute 是 dom 元素在文档中作为 html 标签拥有的属性；

property 是 dom 元素在 js 中作为对象拥有的属性。

作为一个 DOM property 绑定而不是作为 attribute 绑定。

.prop

(2.1.0+) 将 kebab-case attribute 名转换为 camelCase。

.camel

(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

.sync

修饰符

结合oninput事件实现双向绑定

v-bind

将Vue中属性绑定到标签属性上

将标签中的值回馈到Vue中对应的属性

概念

基于oninput和v-bind实现

是一个语法糖，快捷方便的语法的统称

双向绑定

默认针对的标签的value属性

v-model绑定的变量只能是true或false

checkbox

v-model绑定的变量值由value决定

radio

其它都差不多

input

textarea

select

主要配合表单元素使用

去掉左右空格

.trim

转换为数字

如果输入的不是数字，就删除

.number

失去焦点时才会更新变量值

.lazy

修饰符可以一起使用

v-model

常用指令

本质上的是函数方法，但使用时是属性方式，不要写小括号

如果一个方法的返回值需要被多个地方使用，那么可以考虑计算属性，因为计算属性具有缓存效果

计算属性是在data之后执行的，即可以使用data中的变量

计算属性，本身有一个参数，即Vue实例本身

计算属性不要使用箭头函数

当计算属性依赖的属性值发生变化时，那么计算属性也会跟着变化

支持get和set函数，默认只有get方法，所以计算属性默认无法修改值

计算属性的返回值是对象或数组时，修改其属性或元素时，是无法实现响应式，此时需要使用$forceUpdate()强制更新页面

实现输入内容自动搜索，即不需要点击搜索按钮

computed

计算属性

不应该使用箭头函数来定义 watcher 函数

能够观察属性值的变化

适合监听单一的属性值

val

oldVal

适合监听对象或数组等类型的值

handler函数

true

默认

false

deep

以初始值立即执行一次

handler函数在Vue实例创建时执行

默认值

immediate

依次执行数组中的回调函数

数组写法

原始数据类型

示例

watch

当监听对象时，val和oldVal指向同一个地址

浅复制

深复制

使用计算属性

监听计算属性

解决办法

val和oldVal指向不同一个地址

原始数据类型数组

val和oldVal指向同一个地址

对象数组

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

不同类型的值

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

参数说明

同时监听多个属性，其值是由多个属性组成的

返回一个取消观察函数，用来停止触发回调

$watch

页面有四个checkbox，第一个是全选，后面三个如果全不选中，则第一个也会选中

监听属性

双花括号插值

v-bind 表达式

注意：v-model不能使用

可被用于一些常见的文本格式化

定义过滤函数，可以写在Vue实例或组件配置选项中

第一个参数默认就是需要处理的变量值，不需要写

传参

filters

注册全局过滤器

Vue.filter

过滤器

全称：model-view-ModelView

数据模型，对应 data 中的数据

视图模板

视图模型(ViewModel) ： Vue 实例对象

示意图

什么是MVVM

函数写法，调用时要带上小括号

在Vue中方法，不要使用箭头函数，会引起this指向问题，但是在方法内可以使用箭头函数来定义嵌套函数

如果方法的结果是在页面上显示，且当方法中依赖的属性值发生变化时，那么方法也会重新执行

methods

简写：@

只支持JS的表达式

内联代码

vm指的是Vue实例

事件参数对象，event

vm.$event

如果没有参数，那么methods中的方法第一个参数就是$event

如果有参数，那么通过$event来传递事件对象

如何传参

注意methods中是方法的定义，不一定都跟事件有关

Vue实例

普通写法

window

箭头函数写法

普通函数

箭头函数

嵌套函数写法

methods中的this指向

绑定methods中的方法

事件绑定

preventDefault(): void：用于取消事件的默认行为。只有 cancelable 为 true 才可以调用这个方法

.prevent

stopPropagation(): void：用于立即阻止事件流在 DOM 结构中传播，取消后续的事件冒泡

.stop

事件捕获，从外往里进行

.capture

只当在 event.target 是当前元素自身时触发处理函数

.self

事件将只会触发一次

.once

滚动事件的默认行为 (即滚动行为) 将会立即触发

告诉浏览器开发者不想阻止事件的默认行为

与.prevent冲突

在移动端比较有用

.passive

v-on:click.prevent.self 会阻止所有的点击

v-on:click.self.prevent 只会阻止对元素自身的点击

使用修饰符时，顺序很重要

修饰符可以串联使用

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

2.1.0

修饰符允许你控制由精确的系统修饰符组合触发的事件

比如绑定ctrl事件后，需要限制只按了Ctrl才能触发该事件

.exact

2.5.0

keyup

.middle

2.2.0

鼠标事件

注意，添加了键盘事件的元素，只有获取焦点时才能触发

键盘事件

完善上面的分页练习，实现点击哪个页码就选中哪个

实现搜索按钮点击才进行搜索的功能

方法事件

就是一个对象从创建到销毁这一个过程

hook

本质上就是回调函数，让开发人员自定义在Vue实例创建时，做什么事情

钩子函数

mount

将程序与页面结合的一个过程，在Vue中就是将DOM元素处理成虚拟DOM

挂载

Vue实例创建完毕之前，做初始化工作做完之后

data、methods等和el均未初始化，值为undefined

beforeCreate

Vue实例创建完毕，此时可以使用data定义的属性和methods方法了，el还未初始化

一般ajax请求，会在created中使用

created

当Vue实例与页面元素挂载之前，获取页面元素中的内容，指定了$el中的值。但此时el并没有渲染进数据，el的值为“虚拟”的元素节点

但还没有处理虚拟DOM，即_vnode是null值

beforeMount

Vue实例与页面元素挂载完成

处理完了虚拟DOM，所以_vnode是有值

mounted

数据变化时，更新页面之前

beforeUpdate

数据变化时，更新页面之后

updated

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

客户端渲染，在浏览器中可以直接执行

服务端渲染，只能在NodeJS开发的服务中渲染，然后生成html发送给客户端

该钩子在服务器端渲染期间不被调用。

activated

deactivated

Vue实例销毁之前，可以通过vm.$destroy()方法触发

beforeDestroy

Vue实例销毁之后

destroyed

八个方法

this关键字，都是指向Vue实例本身

钩子函数不要使用箭头函数定义，但里面可以使用箭头函数

钩子与data属性的使用

钩子与$el属性的使用

Vue实例的生命周期

普通组件的生命周期

函数组件是没有生命周期的

生命周期

将Vue实例挂载到指定的元素上

创建一个Vue实例，也可以当作组件来使用

Vue.extend()

vm.$mount(元素选择器)

el：指定后使用el中的元素

template：替换掉el中的元素

Vue

只能使用template

Vue.extend

组件

template

纯粹使用JS来编写页面

创建一个VNode对象

标签名称，字符串

内联样式对象

样式对象

事件对象

不支持修饰符

标签基础属性

attrs

属性对象，创建的标签的属性

render(createElement)了解即可

指定Vue实例挂载页面元素

渲染结果，render的话语权最大、再就是template、最后才是el

只在开发者环境下工作

当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。

将一个模板字符串编译成 render 函数

Vue.compile

template > ast > render function > 执行 render function > VNode > 最后生成真实DOM

抽象语法树，将 html 代码编译成一个对象结构

https://astexplorer.net/

ast

当 render 执行后就会将 ast 转换成 VNode

执行顺序

渲染(挂载)相关

Vue 实例使用的根 DOM 元素。

$el

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组

https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0

保存标签上的ref属性值

相当于html中的id

通过$refs.ref值来获取DOM元素

key就是ref中的值

value就是dom元素对象

所以$refs是一个key:value

使用ref完成全选和全不选功能

$refs(掌握)

就是data中的内容

this.属性名与this.$data.属性名是一样的

$data

创建Vue对象是传的那个option对象

$options

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

$forceUpdate()

与组件相关

$props

实例属性

使用索引在数组中添加元素

修改数组的长度

添加对象属性

删除对象属性

使用delete关键字时，无法实现响应式

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

该回调是在updated这个生命周期函数执行之后，再执行

Vue是如何更新DOM的机制是异步更新

Vue.nextTick

全局方法

vm.$set

vm.$delete

vm.$nextTick()

实例方法

响应式API

其它基础api

效果图

需求说明

纯前端JS完成

使用前后端的方式完成

综合练习

组件是将一个功能相关的HTML、CSS、JS代码提取到一起，然后通过简单的方式来使用

最大的好处是提高代码的复用性

组件的缺点，父组件的状态更新，导致子组件有可能也会更新

是不同的组件一起使用，有父子组件、兄弟组件两种关系

组件树

只有注册过的组件才可以使用

组件名称

使用kebab-case形式，在模板中使用时名称保持不变

使用驼峰式(camelCase)，在模板中使用时要改成kebab-case，注意不是下划线

name

Vue实例挂载的页面元素上使用

组件的template模板中使用

使用范围最大

全局注册组件

组件配置对象

Vue对象或组件的components属性注册

在Vue实例中的注册，只能其挂载的页面元素中使用

在某个组件中注册，就只能在这个组件的template中使用

只能在注册的地方使用

局部注册组件

解决循环依赖问题，A组件依赖B组件，而B组件又依赖A组件

异步注册

组件名称，没有则为AnonymousComponent

没有写时，以注册组件时写的name为组件名称

组件内容，即html代码的字符串

只支持单根节点

不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。

当组件在使用时可以通过 inline-template 来指定模板，这样更加灵活

x-template 需要定义在 Vue 所属的 DOM 元素外。

替代方案

render

支持驼峰式命名

在组件使用时，必须使用kebab-case风格的名称

props

注意是一个函数，不能是一个对象

data()

称为函数式组件

使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。

定义普通组件时，不要使用

functional

当v-model在组件上使用时，使用，如果不用则默认需要props中有一个value属性

model

针对props没有属性，就会保存到$attrs中

inheritAttrs

options

也称为普通组件或者有状态组件

普通组件也有生命周期等其它高级属性

组件也可以使用Vue.extend定义

后缀是.vue，在后面学习

单文件组件

提取一个组件

非函数组件

也称为无状态组件

状态主要指的是数据

由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件

函数式组件结构比较简单，代码结构更清晰

特点

函数组件

定义

当一个组件在另一个组件的 template 中出现了，那么这两个组件就形成父子关系，与注册无关

父子关系

那多个组件在同一个 template 使用了，不会出谁包含谁的情况，那么就是兄弟组件

兄弟关系

组件的关系

在子组件中的 props选项中定义接收的参数

在子组件使用的地方通过属性=值的方式传值。如，<组件标签 propsName='值' :propsName='值或变量'></组件标签>

步骤

传原始数据类型

该组件如果多次使用，那么会导致所有使用的地方都更新

即实现数据共享

如果只是为了实现单个组件与父组件之间通信，就不能使用

可以实现子传父，不推荐

传引用数据类型

说明props比data先处理

在组件中data可以使用props中的值

在子组件中是不推荐修改props的值

props中的名称不要与data中的属性名重复，否则以props为主

注意

各类型都支持

数字类型

\"10\"

\"'10'\"

也可以使用Vue中属性

v-bind:props中key

只能当字符串处理

不能v-bind

在使用组件时，可以通过组件标签上写上对应props中的属性名就可以给组件传值了

三个值必须是数字类型

size默认值是10

num默认值是1

可以传count和size及num三个值

实现点击页面码切换

当分页大小改变时，num重置为1

封装一个分页组件

data数组的数据，传什么数据显示什么

点击菜单，实现浏览器地址变化

当刷新页面时，菜单栏选中保持在刷新之前的菜单项

封装一个菜单组件

value写法，有如下三种

属性类型

String

Number

Boolean

Array

Object

Date

Function

Symbol

type

如果类型不对，则显示警告

如：name: String

一个类型

里面的元素只能是type中一个

使用数组

多个类型

能够实现各种验证

必传属性，不传给出警告

required

非函数写法

default

参数

自定义验证函数，返回boolean值

validator

key:value

props 验证规则

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。

vm.$props

直接当成html标签的属性来处理

如果不希望直接当成html标签属性来处理，那么就使用下面的方法

当传一个属性，但该属性不在组件的props属性列表中，会如何

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上

组件上的属性没有在props中定义过，则会当html标签的属性，可以到$attrs中寻找

组件上的属性，如果不存在于props中，则不会当作html标签，可以到$attrs中寻找

inheritAttrs写在子组件上

如果props中没有属性，则会保存到$attrs中

$attrs

inheritAttrs与$attrs

组件上的事件监听，是一个键值对

例如，<组件名 @MyEvent='事件函数' />

可以通过 this.$listeners.MyEvent 获取到绑定的事件函数

vm.$listeners

父传子

对象类型

数组类型

注意，是传地址，那么如果该对象在父组件中改了，会响应到子组件中

引用数据类型

使用逗号分隔即可

如何传多个值

payload

事件名称，不要使用驼峰式命名，使用kebab-case

myEvent

在组件上使用v-on:myEvent='父组件中的处理方法'监听，同时payload会当作参数传递过来

当size和num变化时，父组件如何获取这两个属性的值

数组对象，表格显示的数据

list

表格的标题数组

titles

封装一个表格组件

使用组件的方式完成综合练习中表格与分页组件

子传父

创建阶段

父组件中的数据在子组件中使用了。如果没有使用，就各玩各的

更新阶段

销毁阶段

父子组件的生命周期执行顺序

父组件中的数据变化对象子组件的影响

父子传值

当父组件中的数据在子组件中使用了，那么修改父组件中的数据，就会引起子组件更新

依赖父组件

在B组件中引入bus，然后通过bus.$on('自定义事件')接收payload

与$on类似，但监听的事件只触发一次

$once()

取消事件监听

- 如果没有提供参数，则移除所有的事件监听器；- 如果只提供了事件，则移除该事件所有的监听器；- 如果同时提供了事件与回调，则只移除这个回调的监听器。

其它实例与事件相关的实例方法

不用管层级关系。本质上就是发布与订阅模式

创建另一个Vue实例，名称为bus

兄弟传值

Provide/Inject实现了有层级关系的跨组件的通信。但数据并不是响应式的。不支持兄弟组件或没有层级关系组件传值

provide中的内容会被Vue统一放到\"_provided\"属性中

写在父组件或者Vue实例上，列举提供的属性键值对。

不具备响应式

如果使用data中引用数据类型属性，可以实现响应式

如果是普通值，则无法实现响应式

函数

provide

在组件通过this.inject中的key即可使用

inject中的属性必须在provide中出现过

写在接收值的子组件上，列举接收的属性名，inject中的属性会被处理当前组件的属性

inject: ['foo']

2.5.0+

inject: { key: value }

inject 名称在组件中使用的名称

字符串，provide 中的 key

provide 中的 key

from

默认值，如果没有那么使用了provide中不存在的属性就会发出警告

是一个对象

使用注入的值作为props的默认值

使用注入的值作为data的默认值

inject

provide / inject

注意：provide可以使用以上四个配置项中的数据

同一个组件属性配置执行顺序

跨组件传值

传值

当组件中的视图的部分内容无法确定时，可以使用插槽的方式，将组件中需要显示的部分内容由组件使用时来确定

写在注册组件的template中

在不确定的视图部分，使用slot标签占位

在使用组件时，默认会将组件标签之间的内容替换掉slot标签

如果有多个slot标签，那么多个都会被替换掉

如果slot标签中有内容，那么插槽没有被替换时会被保留

slot标签

写在组件使用的地方

替换插槽中的内容，也可以使用template，在非具名插槽可以不使用

template标签

普通插槽

有template标签包裹，但没有指定替换的名称

没有template标签包裹的内容

匿名插槽替换

可以通过slot标签的name属性，给插槽起名，也称为具名插槽

在具名插槽中，必须使用

替换指定的插槽

简写：#插槽名称

v-slot:插槽名称

替换匿名插槽的内容

让其它没有template或template没有指定名称的内容无效

v-slot:default

v-slot指令

dynamicSlotName是Vue实例的一个变量

v-slot:[dynamicSlotName]

动态具名插槽

具名插槽

父组件或Vue实例中的

想使用子组件中的变量

在使用组件时，替换插槽中的内容的部分，使用的变量是父组件还是子组件中

将子组件中的值传到替换插槽部分的标签中来使用

只能传字符串

在子组件中的slot标签上写上属性名=\"属性值\"

v-bind:XXX=\"子组件中的变量或普通值\"

如何让插槽能够传值

XXX就是插槽传出的属性名称

在组件模板的slot标签中通过v-bind:XXX=\"子组件内部的属性名\"，绑定插槽传出的属性值

简写：#插槽名称=\"scope\"

在使用组件时，通过template标签中的v-slot:插槽名称=\"slotProps\"来接收插槽中的参数

非独占插槽

独占插槽，即有且只有一个插槽

在组件标签上使用v-slot:default=\"slotProps\"，也可以缩写为v-slot=\"slotProps\"

独占插槽

实例api

插槽传值(作用域插槽)

自 2.6.0 起被废弃

在template中使用，指定替换的插槽

slot=\"插槽名称\"

slot

也称谓作用域插槽

插槽传值

接收插槽上的值

slot-scope=\"slotProps\"

slot-scope

旧语法

是组件插槽集，是组件所有默认插槽、具名插槽的集合，不包含作用域插槽

保存替换匿名插槽中的虚拟DOM

default作为key

保存替换具名插槽中的虚拟DOM

具名插槽名称作为key

vm.$slots

用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

看下console.log(this.$scopedSlots.header())的效果

比slots保存的内容多，推荐使用

vm.$scopedSlots

插槽相关api

是否开启全选功能，即第一列的复选框是否显示

open_select_all

表格组件自带全选功能

使用插槽完善表格组件

插槽

v-model默认将值绑定到元素的value属性上，所以必须保证该组件上有value属性

将v-model绑定到自定义事件和自定义属性上

绑定的属性名称

prop: string

绑定的事件名称

event: string

v-model在组件上的使用

代表组件名称的变量

v-bind:is

当组件切换时，查看组件的生命周期

component标签

缓存组件的状态

字符串或正则表达式。只有名称匹配的组件会被缓存。

include

字符串或正则表达式。任何名称匹配的组件都不会被缓存。

exclude

数字类型。最多可以缓存多少组件实例。如果超出了，先进的就被挤出去

max

keep-alive标签

https://v2.cn.vuejs.org/v2/guide/transitions.html

https://v2.cn.vuejs.org/v2/api/#transition

transition标签

transition-group

过渡效果

动态组件

异步组件

组件接收的外部属性

data 只保存props中没有的传值

这个不是 data 选项

注入的内容

injections

属性相关

事件绑定的函数

listeners

data.on

事件相关

子元素数组

children

子元素相关

是一个函数，所以执行才能看到内容

默认插槽中的内容

具名插槽中的名称

slots

是一个对象，其中的属性都是函数

实参值就会传给 scopeSlot

default(实参值)

具体插槽也是一样

scopedSlots

插槽相关

context

与普通组件的区别

函数式组件

https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6

递归组件

可以在子组件中通过$root获取Vue实例并修改它的变量，也是响应式

根组件，一般都是Vue实例

https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E6%A0%B9%E5%AE%9E%E4%BE%8B

vm.$root

可以修改组件上的变量，也是响应式

父组件

https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E7%88%B6%E7%BA%A7%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B

vm.$parent

子组件数组，就是该组件使用了多个子组件

vm.$children

其它API

与前面说的继承有点类似

可以将一些公共代码提取到一个对象，然后通过混入方式增强这个组件或Vue实例的配置

值对象，只能混入一个

全局混入

使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

Vue.mixin

局部混入，只影响当前组件

值是对象数组

只影响Vue实例

整合在一起，依次执行Vue.mixin中的->mixins中的->实例或组件本身的方法

生命周期方法

只有一个有效，优先级依次是实例或组件的methods->mixins中的->Vue.mixin中的

方法

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先，然后是mixins中的，最后是Vue.mixin中的

替换

合并

属性

合并规则

Vue.config.optionMergeStrategies

console.log(Vue.config.optionMergeStrategies);

合并策略对象

自定义

自定义选项合并策略

只影响组件

mixins

混入

与类的继承相似，主要继承一个组件中的内容

挂载到指定的el上

注册为全局组件

注册为局部组件

返回一个Vue实例

创建实例时传递 props。主要作用是方便测试。

propsData

配套属性

继承一个对象，与混入有些类似

执行顺序Vue.mixin->Vue.extend->extends->mixins

extends

继承

指令部分说明

全局注册

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

指令名，不包括 v- 前缀。

指令的完整名称

rawName

指令的绑定值

指令绑定的前一个值

oldValue

字符串形式的指令表达式。例如 v-my-directive=\"1 + 1\" 中，表达式为 \"1 + 1\"。

expression

传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 \"foo\"。

arg

modifiers

binding

Vue 编译生成的虚拟节点。

vnode

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

oldVnode

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

所在组件的 VNode 更新时调用

指令所在组件的 VNode 及其子 VNode 全部更新后调用。

只调用一次，指令与元素解绑时调用。

防抖（debounce）: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

提交表单，防止重复提交

节流（throttle）: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

电梯门10秒关一次，当每一次点击开门按钮时，那么就会重新计时，就是防抖

电梯门10秒关一次，每过10电梯就会自动关门，在10秒内按开门按钮也不会有效，那么就是节流

升降机，就是垂直电梯

自定义一个防抖和节流指令

图片懒加载指令

Vue.directive

局部注册

directives

自定义指令

Vue2.X

https://cli.vuejs.org/zh/

npm install -g @vue/cli

下载

5.0.8

版本

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

vue create my-project

启动创建项目的UI界面

进入项目管理页面，如果没有自动，按上图操作

创建项目

指定项目的创建路径

点击创建按钮

填写项目名称

选择预设

选择功能

配置项

点击创建项目，是否需要保存预设

项目管理

运行项目

vue ui

https://www.pudn.com/news/629ad87c6c497022d7142cf1.html

https://blog.csdn.net/mantou_riji/article/details/125953249

相关概念

什么是响应式

本质上就是对一个对象上的属性的赋值和获取值的行为进行拦截，并添加额外功能需要的代码。比如 Vue2 就在属性赋值和获取值时分别添加触发更新代码和收集依赖的代码

进入时扫场所码

出来时扫场所码

在防疫时期如何，知道每个人是否进入到一个场所时间和出去的时间？

举例

理解数据劫持

o：定义属性的对象

PropertyKey = string | number | symbol;

p：指定属性的名称

属性值，默认为undefined

不可与get和set函数共存

value?: any;

值是否可以被修改，默认为false

writable?: boolean;

表示属性是否可以通过 delete 删除或重新定义，是否可以修改它的特性。定义之后就无法更改

默认值为false

true：可以删除或重新定义

false：不可以

configurable?: boolean;

表示属性是否可以通过 for-in 循环返回。

true：可以遍历

false：不可以遍历

enumerable?: boolean;

PropertyDescriptor

获取值时调用，通过 return 返回指定的值，不要直接返回操作的对象属性值，不然会爆栈

错误提示

错误演示代码

防止爆栈错误

get()

值修改时调用，val参数为赋的新值

set(val)

attributes：指定属性的特性描述器

使用 defineProperty 方法不能重复定义同一个属性，否则报错

定义一个对象obj，里面有一个属性name，name的显示在一个span标签中，当在开发者工具中的控制台修改了name的值时，span变化的值自动修改

数据劫持实现

完成对一个对象数据劫持，即在获取值和赋值时都能打印一句段信息

数组对象，则需要修改数组对象原型上的方法，进行重新定义。如\"push\

添加属性或修改属性的值的响应式

通过索引赋值

Vue.set

删除对象属性的响应式

Vue.delete

缺点

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

被代理的对象，必填

target

行为对象，定义对象操作的行为。必填

handlers

创建实例

创建一个可撤销的Proxy对象

获取代理对象

proxy 属性

撤销代理

revoke()

Proxy 静态方法

拦截对象属性的读取，比如 proxy.foo 和 proxy['foo'] 。

拦截对象属性的设置，比如 proxy.foo = v 或 proxy['foo'] = v ，返回一个布尔值。

拦截 propKey in proxy 的操作，返回一个布尔值

拦截 delete proxy[propKey] 的操作，返回一个布尔值。

拦截 Object.getOwnPropertyNames(proxy) 、 Object.getOwnPropertySymbols(proxy) 、 Object.keys(proxy) 、 for...in 循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。

ownKeys?(target: T): ArrayLike<string | symbol>;

拦截 Object.getPrototypeOf(proxy) ，返回一个对象。

getPrototypeOf?(target: T): object | null;

拦截 Object.isExtensible(proxy) ，返回一个布尔值。

isExtensible?(target: T): boolean;

拦截 Object.preventExtensions(proxy) ，返回一个布尔值。

preventExtensions?(target: T): boolean;

拦截 Proxy 实例作为构造函数调用的操作，比如 new proxy(...args) 。

ProxyHandler

handlers 常用行为

Proxy

Reflect 对象与Proxy 对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect不可以构造对象，只需要使用其中的静态方法即可

Reflect对象的方法与 Proxy对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的方法。

现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。

将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。

修改某些 Object 方法的返回结果，让其变得更合理。

将某些 Object 命令式操作变成函数行为。

目标对象，如果不是对象则报错

属性名称

this 指向

receiver

传入的新值

删除对象指定的属性

判断对象是否拥有指定的属性

获取对象上的属性名称

Reflect.ownKeys(target)

定义属性

调用构造函数

必须是一个函数或类

Reflect.isExtensible(target)

Reflect.preventExtensions(target)

获取对象原型

Reflect.getPrototypeOf(target)

设置对象原型

调用函数，相当于apply方法

静态方法

Reflect

本质上就是getter和setter

class RefImpl

只能使用对象作为key，且当key指向的对象没有其它引用时，就会被垃圾回收。有利于及时回收内存

delete(key: K): boolean;

get(key: K): V | undefined;

has(key: K): boolean;

常用方法

WeakMap

Map

Set

正则表达式

前置知识

目前只考虑对象数据，数组、Map、Set等类型的数据后面再考虑

返回一个 Proxy 代理对象

收集依赖，由代理对象的 get 函数触发

let targetMap = new WeakMap()

每个对象的依赖，存放在全局变量 targetMap 中

每个对象的属性依赖，存放在 Map 中

let depSet = new Set()

属性依赖集合，是一个 Set 集合，每一项都是更新页面的回调函数

track

触发更新，由代理对象的 set 函数触发

当对象数据发生变化时，找出对应的属性依赖集合，遍历执行回调函数

trigger

触发数据对象的 get 方法，添加更新操作的回调函数

effect

对象数据的响应式

将指定的 dom 元素的模板编译成虚拟 DOM

目前只考虑处理 {{}} 的模板

compile(dom)

虚拟 DOM 结构

真实 DOM 对象

ele

父虚拟 DOM 对象

parent

属性表达式，从 {{}} 中解析得到

子虚拟 DOM 数组

创建一个文本节点的虚拟 DOM

createTextVnode

创建一个元素节点的虚拟 DOM

createVNode

递归完成 VNode 虚拟树的渲染，并找出有副作用的节点

调用 mount 函数，并处理有副作用的节点，调用 effect 添加数据更新的回调

render(vnode)

模板编译及渲染

手写一个简易版本的Vue3

响应式原理

是一个包含 Vue 各种方法的对象

以 SSR 激活模式创建一个应用实例。用法与 createApp() 完全相同。

SSR 是 Server-Side Rendering，即服务端渲染的英文缩写。支持 SEO

https://cn.vuejs.org/guide/scaling-up/ssr.html

createSSRApp(options)

打印当前使用的 Vue 版本

version

与Vue2一样，DOM 更新后执行的回调函数，支持 Promise

nextTick

在定义 Vue 组件时提供类型推导的辅助函数。

defineComponent(options)

定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。

返回一个 Promise 的函数

也支持动态导入

loader

defineAsyncComponent(loader或options)

这个方法和 defineComponent 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器。

defineCustomElement(options)

将应用实例挂载在一个容器元素中。

mount(selector或dom)

卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。

unmount()

只输入name参数，那么将获取已经注册该名称的全局组件

帕斯卡命名，所有单词首字母大写

PascalCase

驼峰式命名，首字母小写，后面单词首字母大写

camelCase

短横拼写法，多个单词之间使用-分隔

kebab-case

也可以是被引入进来的 .vue 文件，称为单文件组件

component

提供一个值，可以在应用中的所有后代组件中注入使用。

如果只传递一个名字，则会返回用该名字注册的指令 (如果存在的话)。

directive(name: string): Directive | undefined

注册一个全局指令；

directive

Vue实例方法

与 Vue2 写法一样

状态选项

选项式API

与React写法类似

组合式API

API

Vue3.X

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

- 嵌套的路由/视图表- 模块化的、基于组件的路由配置- 路由参数、查询、通配符- 基于 Vue.js 过渡系统的视图过渡效果- 细粒度的导航控制- 带有自动激活的 CSS class 的链接- HTML5 历史模式或 hash 模式，在 IE9 中自动降级- 自定义的滚动条行为

与Vue2.X配合使用

https://v3.router.vuejs.org/zh/

3.X

与Vue3.X配合使用

https://router.vuejs.org/zh/

4.X

https://unpkg.com/vue-router/dist/vue-router.js

CDN

npm install vue-router@3

NPM

引入 Vue 和 VueRouter

Vue.use(VueRouter);

加载 VueRouter 插件

单组件文件，后缀名.vue

在Router配置中注册即可

组件对象

定义组件

路由的路径，必填

path:参数名称

带参数的路径

会匹配所有路径

'*'

会匹配以 `/user-` 开头的任意路径

'/user-*'

如果有多个路径匹配到了，那么以第一个为准

path: string

路由对象的组件

路由懒加载

component?: Component

命名路由，可以通过名称来跳转到该组件

name?: string

RouteConfig数组类型

定义路由配置对象 routes

创建 VueRouter 实例，然后传 `routes` 配置

router 实例。

$router

当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它

获取参数传递

监听

$route

Vue实现的router配置，Vue实例将添加两个属性

将 VueRouter 实例配置到Vue实例中

组件是一个 functional 组件，渲染路径匹配到的视图组件可以配合 <transition> 和 <keep-alive> 使用

配合路由配置中的components使用，与其中的name属性对应

当一个页面有多个router-view标签时使用

router-view标签

https://v3.router.vuejs.org/zh/api/#router-link

与$router中的push()对应

去到的组件路径

根路径

设置第一次加载的组件

绝对路径

/组件path

相对路径，不推荐使用

组件path

必填

path/:参数名称

参数值保存到$route.params中

restful传值

path: string

只能和name一起使用

参数不会暴露在地址栏中，与post类似，页面刷新数据丢失

path: '/abc/:id/ddd/:name'

动态路由匹配

params: Object

参数会显示在地址上，与get参数一样，页面刷新数据不丢失

支持path和name两个

query: Object

路由名称，与RouteConfig中的name对应

只有name，那么params就会生效，不与path冲突

name: string

路由对象

to: string | Location（掌握）

与$router中的replace()对应

是否替换视图，导航后不会留下 history 记录。

replace: boolean（掌握）

注意，路径不能使用/开头

与相对路径类似，将上一个路径与当前路径拼接在一起

例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

append: boolean

router-link标签渲染后的标签名

默认是a标签

tag: string

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置

默认值: \"router-link-active\"

active-class: string

使用精确地址匹配

exact: boolean

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

默认值: 'click'

event: click

router-link标签

在页面模板(template)中使用

redirect

routeConfig

重定向和别名

当不需要使用router-link标签时，使用

与router-link一样

$router.push(location).then(onComplete).catch(onAbort)

替换页面，不会产生历史记录

$router.replace(location).then(onComplete).catch(onAbort)

去到历史记录中的n位置的路径

$router.go(n)

上一个

$router.back()

下一个

$router.forward()

编程式导航

即一个路由中的组件中还有 router-view

配置子路由

children: routeConfig数组

对应的就是routes

顶级路由

对应的就是routes中的对象的children

二级路由

嵌套路由

当一个页面有多个 router-view 标签时，可以通过 name 来区分

指定路由名称

默认名称为 default

router-view

router-view 中的 name 值

默认为 default

对应的组件，也支持懒加载

components: { key: value }

命名路由

字符串，对应当前路由的路径，总是解析为绝对路径，如 \"/foo/bar\"。

$route.path：string

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象

$route.params：Object

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象

$route.query：Object

当前路由的名称，如果有的话。(查看命名路由)

$route.name

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.hash：string

完成解析后的 URL，包含查询参数和 hash 的完整路径。

$route.fullPath：string

一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)

$route.matched：Array<RouteRecord>

如果存在重定向，即为重定向来源的路由的名字

$route.redirectedFrom

当前路由对象

参数显示在地址上，相当于get传参，刷新数据不丢失，支持path和name

query: {}

router-link

push({ query: {} })

replace({ query: {} })

query传值

也称为动态路由匹配，相当于 post 传值，只能和name一起使用。注意，V3路由配置中的:username可以不写，如果不写刷新页面会导致数据丢失，在V4版本则必须要写

params: {}

push({ params: {} })

replace({ params: {} })

params传值

配置传递给组件props属性的参数

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给组件

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

函数模式

props?: boolean | Object | Function

路由组件传值

路由传值

支持任意类型的数据

没有特殊含义，由使用者决定

路由元信息

已废弃：使用 router.addRoute() 代替

router.addRoutes(routes: Array<RouteConfig>)

动态添加一个路由配置

router.addRoute(route: RouteConfig): () => void

添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

一定是父路由的名称，不是path

如果父路由有children，且其中有一个path: '/'，那么父路由就不能写name了，而应该写在children中

parentName

子路由添加成功后，parent属性不是undefined

获取所有活跃的路由记录列表。

router.getRoutes(): RouteRecord[]

注意：动态路由，需要解决刷新页面空白的问题。原因是刷新页面会导致数据丢失，那么需要重新添加回来

动态路由

全局前置钩子，导航执行之前

目标Route

起点Route

放行函数

放行

next()

中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址

next(false)

跳转到指定位置

(2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调

next(error)

全局解析守卫，路径匹配成功后

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

全局后置钩子，导航执行之后

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

全局守卫

名称与上面三个一致，只是写在RouteConfig中，只影响一个路由对象

独享守卫

写在组件配置对象中，只影响当前组件

组件中的守卫

beforeEach

beforeEnter

beforeRouteEnter

beforeResolve

afterEach

守卫顺序

导航守卫

hash

history

mode

router

切换路由模式

其它api

基础使用

每个路由的详细配置

通配符

参数保存在route.params中

指定一个导入组件

懒加载可以提高项目的加载速度

函数，实现懒加载

可以配合to中params传值

name?: string

命名视图组件，可以为一个路径配置多个组件

当一个页面有多个router-view标签时，可以通过name来指定显示的组件

在router-view标签通过name属性来指定使用的组件

name默认值default

components?: { [name: string]: Component }

重定向到另一个路径

重定向的地址

string

path

query

params

Location

redirect?: string | Location | Function

给path路径起一个别名

alias?: string | Array<string>

元数据或元信息，没有特殊的作用

any：表示可以是任何数据类型

meta?: any

2.6.0+

匹配规则是否大小写敏感？(默认值：false)

caseSensitive?: boolean

编译正则的选项

说明

pathToRegexpOptions?: Object（了解）

children?: Array<RouteConfig>

RouteConfig

routes：Array<RouteConfig>

配置路由模式

默认值: \"hash\" (浏览器环境) | \"abstract\" (Node.js 环境)

使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式

abstract

mode：string

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 \"/app/\"

默认值: \"/\"

只有当mode为history时才有效

base：string（了解）

全局配置 <router-link> 默认的激活的 class

linkActiveClass：string（了解）

全局配置 <router-link> 默认的精确激活的 class。

默认值: \"router-link-exact-active\"

linkExactActiveClass：string（了解）

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

滚动行为

https://v3.router.vuejs.org/zh/guide/advanced/scroll-behavior.html

savedPosition

滚动到指定位置

在浏览器的地址中使用path#id

页面上需要有元素有这个id

滚动到锚点

平滑滚动

提供自定义查询字符串的解析/反解析函数。覆盖默认行为。

?a=xxx&b=yyy对象与字符串互相转换

parseQuery / stringifyQuery：Function（了解）

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。在 IE9 中，设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用，因为一个 hash 模式的 URL 并不支持服务端渲染

默认值: true

fallback：boolean（了解）

在Vue中通过this.$router获取VueRouter对象

配置了 router 的 Vue 根实例

router.app

路由使用的模式

router.mode

当前路由对应的路由信息对象

在Vue中通过this.$route获取当前的Route对象

router.currentRoute

以路由对象的格式展示初始路由地址，即路由开始的地方。可用在导航守卫中以区分初始导航

router.START_LOCATION

实例属性$router

router.push(location).then(onComplete).catch(onAbort)

router.replace(location).then(onComplete).catch(onAbort)

router.go(n)

router.back()

router.forward()

返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类，不是实例)。通常在服务端渲染的数据预加载时使用

router.getMatchedComponents(location?)

解析目标位置 (格式和 <router-link> 的 to prop 一样)。

该方法把一个回调排队，在路由完成初始导航时调用，这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

错误在一个路由守卫函数中被同步抛出；

错误在一个路由守卫函数中通过调用 next(err) 的方式异步捕获并处理；

渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误

注册一个回调，该回调会在路由导航过程中出错时被调用

router.onError(callback)

实例方法$router

VueRouter(options)

相对路径

to: string | Location

replace: boolean

V3.x

npm install vue-router@4

添加一个导航守卫，在当前位置的组件将要离开时触发。类似于 beforeRouteLeave，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

onBeforeRouteLeave(leaveGuard: NavigationGuard): void

添加一个导航守卫，在当前位置即将更新时触发。类似于 beforeRouteUpdate，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

onBeforeRouteUpdate(updateGuard: NavigationGuard): void

相当于<router-link>

useLink(props: RouterLinkOptions)

import {useRoute} from 'vue-router'

返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。

useRoute(): RouteLocationNormalized

import {useRouter} from 'vue-router'

返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。

useRouter(): Router

V4.x

Vue-Router

Vue整合Axios

npm install --save axios vue-axios --legacy-peer-deps

创建axios/index.js

import './axios'

在main.js中导入

引入

this.$http

this.axios

在Vue的使用方式

baseURL

timeout

headers

axios.create(options)

请求拦截

响应拦截

封装

Axios

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

所谓的状态管理，就是数据的管理

VueX是什么

https://v3.vuex.vuejs.org/zh/

配合Vue2.x版本

https://vuex.vuejs.org/zh/

配合Vue3.x版本

支持响应式

解决了不同组件的传值问题

抽取多个组件的共同数据，并方便管理

能方便的通过异步修改数据

优势

刷新页面后，数据会丢失

通过storage来解决

也可以保存到服务器上，每次从服务重新获取

npm install vuex@3 --save

store/index.js

npm安装

创建项目时，选择VueX

Vuex 依赖 Promise (opens new window)。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise

引入Vue和VueX

将VueX以插件的形式在Vue中使用

Vue.use(Vuex)

key-value

state：Object | Function

里面都是函数，且函数的第一个参数是state对象，后面的参数是自定义传值参数

payload可以不写

mutations：Object | Function

创建Vuex.Store实例store

导出store对象

创建store/index.js

配置完成后，在Vue中可以通过this.$store来获取store对象

将store实例配置到Vue实例中

原理讲解

VueX中保存的数据，以key-value的形式保存在state中

如果你传入返回一个对象的函数，其返回的对象会被用作根 state。这在你想要重用 state 对象，尤其是对于重用 module 来说非常有用

当使用函数时，与组件中的data函数类似

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Function有两个参数

与计算属性一样

this.$store.gettes.XXX

在Vue实例中使用

getters：{ [key: string]: Function }

用来修改state中的数据，无法实现异步操作，只能是同步函数

state

mutation的函数名称

就是参数名称

自定义key

mutation

amout是自定义的参数名称，通过payload.amount获取

this.$store.commit(mutation: Object)

mutations：{ [key: string]: Function }

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation

store上的state

store上的getters

getters

调用mutations中的方法

方法名称

调用store上的mutations

root:true

值

自定义参数名称

commit

调用另一个actions中的方法

dispatch

actions：{ [key: string]: Function }

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

局部的state

mutations

模块上的state

rootState

模块上的getters

rootGetters

调用store上的actions

action

actions

命名空间

对state没有影响

$store.getters['module_a/get_count']

namespaced：boolean

key: Object

modules：Object

核心概念

作用主要是为了方便使用，消除$store.XXX.XXX这类代码

import {mapState} from 'vuex'

其它都是类似的

无参数

快速的将state中的属性转换为Vue中的计算属性

返回一个key-value对象，value都是函数

使用...将对象展开即可

如果与自定义的计算属性一起使用

如果state中的变量名称与组件本身的变量名称有冲突，那么可以使用对象写法

在组件定义计算属性名称

字符串，即store中state的key

mapState({key: value})

mapState

有参数

第一个是state

快速的将getters中的属性转换为Vue中的计算属性

mapGetters({key: value})

mapGetters

快速的将mutations中的属性转换为Vue中的methods

效果一样

mapMutations({key: value})

mapMutations

快速的将actions中的属性转换为Vue中的methods

mapActions({key: value})

mapActions

记住：用mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的。

将方法定义成常量

使用的时候引入常量

如何减少方法写错的机率？

辅助函数

strict: true

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。

严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

尽量少用，特别在生产环境中，只在开发模式中使用

严格模式

不需要直接双向绑定VueX的state变量

可以使用带有setter的计算属性来代替

也可以使用单向绑定及事件监听通过mutations来修改state

https://v3.vuex.vuejs.org/zh/guide/forms.html

v-model使用vuex中的数据

插件

plugins

其它配置

在App.vue中使用浏览器监听+本地存储

npm i --save vuex-persistedstate

https://github.com/robinvdvleuten/vuex-persistedstate#api

官网资料

存储持久状态的键。（默认：vuex）

sessionStorage

localStorage

storage

只保存指定模块的数据。（默认：[]）

paths

以state作为参数的函数，可以在返回值中自定需要持久化的数据

reducer(state)

将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

filter(mutation)

一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

subscriber

将被调用以重新水化先前持久状态的函数。默认使用storage。

将被调用来保持给定状态的函数。默认使用storage。

配置

注意：直接通过state修改无效

推荐使用 vuex-persistedstate 插件

无法保存临时修改的数据

使用actions方法，每刷新页面时，重新请求并保存到store中

vuex数据状态持久化

npm i vuex@4 --save

npm

import { useStore } from 'vuex'

VueX

https://pinia.web3doc.top/

https://pinia.vuejs.org/

npm install pinia

Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：

适合选项式 api

适合组合式 api

创建 store 对象

store

引入函数

示例，这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。

Pinia

状态管理

一套饿了么公司开发的UI组件集

配合Vue2.X使用

https://element.eleme.cn/#/zh-CN

配合Vue3.X使用

https://element-plus.org/zh-CN/#/zh-CN

npm i element-ui -S

<link rel=\"stylesheet\" href=\"https://unpkg.com/element-ui/lib/theme-chalk/index.css\"><script src=\"https://unpkg.com/element-ui/lib/index.js\"></script>

完整引入

按需引入

<el-button type=\"primary\" icon=\"el-icon-search\">搜索</el-button>

icon 图标

V2.x

npm install element-plus --save

<link rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/element-plus/dist/index.css\" />  <script src=\"//cdn.jsdelivr.net/npm/vue@3\"></script>  <script src=\"//cdn.jsdelivr.net/npm/element-plus\"></script>

<link rel=\"stylesheet\" href=\"//unpkg.com/element-plus/dist/index.css\" />  <script src=\"//unpkg.com/vue@3\"></script>  <script src=\"//unpkg.com/element-plus\"></script>

npm install -D unplugin-vue-components unplugin-auto-import

wepack 配置文件

按需导入

npm install @element-plus/icons-vue

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

全部引入

也支持 CDN 引入

结合 el-icon 使用

直接使用 SVG 图标

外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

子元素的排列方向

horizontal

vertical

direction

el-container

顶栏高度

默认值：60px

height

有插槽

el-header

侧边栏宽度

默认值：300px

width

el-aside

el-main

el-footer

容器

通过基础的 24 分栏，迅速简便地创建布局。

组件默认使用 Flex 布局，不需要手动设置 type=\"flex\"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

栅格系统

行

栅格间隔

gutter

flex 布局下的水平排列方式

靠左排列

start

靠右排列

end

水平居中排列

center

元素之间的间隔是元素与边距之间的间隔的两倍

space-around

每个元素的间隔都一样

space-evenly

第一个和最后一个元素会靠边，没有间隔

space-between

justify

flex 布局下的垂直排列方式

顶部排列，默认值

top

垂直居中

middle

底部排列

bottom

align

自定义元素标签

tag

支持插槽

el-row

列

span

offset

push

pull

el-col

import 'element-plus/theme-chalk/display.css'

hidden-xs-only - 当视口在 xs 尺寸时隐藏

hidden-sm-only - 当视口在 sm 尺寸时隐藏

hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏

hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏

hidden-md-only - 当视口在 md 尺寸时隐藏

hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏

hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏

hidden-lg-only - 当视口在 lg 尺寸时隐藏

hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏

hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏

hidden-xl-only - 当视口在 xl 尺寸时隐藏

基于断点的隐藏类

布局

绑定表单数据对象

el-form

在 el-form 中使用

el-form-item

el-input上通过v-model实现即可

数据绑定

el-form添加rules属性

{key: value}

属性名，与表单绑定对象无关，一般写成一致

规则对象数组

错误提示信息

message

触发事件

blur

change

最小长度

min

最大长度

类型

date

自定义校验函数

触发的规则对象

rule

触发的值

回调函数，可以缩写为cb

callback()：通过验证

callback(new Error('自定义错误信息'))：不通过验证

callback

规则对象

rules

el-form-item添加prop='rules中的key'

表单验证

表单

常用组件

ElementUI

Vue全家桶

 收藏

立即使用

Vue全家桶

 收藏

立即使用

NodeJS

 收藏

立即使用

JavaScript

 收藏

立即使用

前端基础

木子立山而

职业：大专

去主页





0 条评论

回复删除



取消

下一页