vue 思维导图模板_ProcessOn思维导图、流程图

指令

内容渲染指令

v-text

指令的缺点：会覆盖元素内部原有的内容！

插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！(插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中)

v-html

可以把带有标签的字符串，渲染成真正的 HTML 内容

属性绑定指令

v-bind(缩写 :property)

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令,与 v-model不同，v-bind是单向绑定，视图修改数据不会影响data数据源

事件绑定指令

v-on（简写：@）

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event  被覆盖的问题

事件修饰符

.prevent

阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）

.stop

阻止事件冒泡

.capture

以捕获模式触发当前的事件处理函数

.once

绑定的事件只触发1次

.self

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

双向绑定指令

v-model

用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

指令修饰符

.number

自动将用户的输入值转为数值类型

<input v-model.number="age" />

.trim

自动过滤用户输入的首尾空白字符

<input v-model.trim="msg" />

.lazy

在“change”时而非“input”时更新

<input v-model.lazy="msg" />

条件渲染指令

v-if

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

v-show

v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；

v-else

v-else-if

列表渲染指令

v-for

用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使 用 item in items 形式的特殊语法

使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种 默认的性能优化策略，会导致有状态的列表无法被正确更新。 为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的 key 属性

注意事项

key 的值只能是字符串或数字类型

key 的值必须具有唯一性（即：key 的值不能重复）

建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱

过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方

插值表达式

v-bind 属性绑定

私有过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

全局过滤器

watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作

immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使 用 immediate 选项。

deep

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器

watch擅长处理的场景：一个数据影响多个数据

computed

计算属性指的是通过一系列运算之后，最终得到一个属性值

特点

虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

computed擅长处理的场景：一个数据受多个数据影响(如：商品总价计算)，同时计算属性本质上就是一个属性，不需要再 data 中存在，且 computed 数据会被缓存

Vue 组件

template

组件的模板结构

注意

每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

template 中只能包含唯一的根节点

script

组件的 JavaScript 行为

style

组件的样式

PS:每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

全局组件注册

组件之间数据共享

父组件向子组件共享数据使用自定义事件

props

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

子组件向父组件共享数据使用自定义事件

兄弟组件之间的数据共享

生命周期

创建阶段

此阶段所有方法只执行一次

beforeCreate

该阶段无法访问 data数据源和 props 中的数据，也无法访问 methods 中的方法

created

data、props、methods 都已经创建好，处于可用状态，但模板结构尚未创建，在这个阶段发起 ajax 请求页面数据，但不能操作 DOM

beforeMount

准备将内存中编译好的 HTML 结构渲染到浏览器上，此时浏览器还并没有 DOM 结构

mounted

已经把内存中的 DOM 结构渲染到了浏览器中，此时 DOM结构已经存在，如果要操作 DOM，最早只能在这个阶段执行

运行阶段

此阶段可执行 1次或多次

beforeUpdate

准备根据变化后最新的数据重新渲染模板

updated

已经更新模板数据

销毁阶段

此阶段只能执行一次

beforeDestroy

此时将要销毁组件

destoryed

已经销毁组件

父子组件生命周期

父组件 beforecreate

父组件 created

父组件 beforeMount

子组件 beforecreate

子组件 created

子组件 beforeMount

父组件 mounted

子组件 mounted

父组件 beforeDestroy

子组件 beforeDestroy

子组件 destroyed

父组件 destroyed

ref 引用

概念

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象。

 使用 ref 引用 DOM 元素

使用 ref 引用组件实例

this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

动态组件

概念

动态组件指的是动态切换组件的显示与隐藏。

如何实现动态组件渲染

使用 <keep-alive> 保持状态

include 属性

include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔

keep-alive 对应的生命周期函数

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。

当组件被激活时，会自动触发组件的 activated 生命周期函数。

插槽

概念

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。

自定义指令

私有自定义指令

在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。

在使用自定义指令时，需要加上 v- 前缀

eg: v-color

为自定义指令动态绑定参数值

在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值

通过 binding 获取指令的参数值

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值

update 函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函 数会在每次 DOM 更新时被调用

如果 insert 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，

路由

什么是路由

Hash 地址与组件之间的对应关系

前端路由的工作方式

用户点击了页面上的路由链接

导致了 URL 地址栏中的 Hash 值发生了变化

前端路由监听了到 Hash 地址的变化

前端路由把当前 Hash 地址对应的组件渲染都浏览器中

vue-router

概念

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。

vue-router 的基本用法

在项目中安装 vue-router

npm i vue-router@xxx

在 src 源代码目录下，新建 router/index.js 路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。

声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符

声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

嵌套路由

声明子路由链接和子路由占位符

通过 children 属性声明子路由规则

动态路由匹配

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号（:）来定义路由的参数项。

$route.params 获取路径参数对象

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值，所谓路径参数，即 /param

$route.query 获取查询参数对象

所谓查询参数对象，即路径 ? 后面的键值对

使用 props 接收路由参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。

声明式导航 & 编程式导航

声明式导航

点击链接实现导航

编程式导航

普通网页中调用 location.href 跳转到新页面的方式

this.$router.push('hash 地址')

跳转到指定 hash 地址，并增加一条历史记录

this.$router.replace('hash 地址')

跳转到指定的 hash 地址，并替换掉当前的历史记录

this.$router.go(数值 n)

实现导航历史前进(n>0)、后退(n<0)

$router.go 的简化用法

$router.back()

在历史记录中，后退到上一个页面

$router.forward()

在历史记录中，前进到下一个页面

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?

原因

由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象,

解决方案

1、是给push函数，传入相应的成功的回调与失败的回调

2、重写 push

导航守卫

导航守卫可以控制路由的访问权限

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行 访问权限的控制

全局前置守卫的回调函数中接收 3 个形参

next 函数的 3 种调用方式

直接放行：next()

强制其跳转到登录页面：next('/login')

不允许跳转到后台主页：next(false)