mustache {{}} 模板语法

1. 可以用变量、表达式、函数、三元运算符

2. 不可以用：var 赋值语句 if 条件语句

基本指令

v-once

v-text

v-html

v-pre

v-cloak

常用指令

v-bind

1. 绑定属性

1. 绑定class、style

1. 绑定对象

v-on

1. 绑定函数

1. 绑定表达式

1. 绑定多个事件

1. 传递函数参数

1. 修饰符

• 阻止冒泡 .stop

• 键盘监听

• v-on 其他修饰符

内置指令 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/built-in-directives.html#v-on

条件渲染指令

1. v-if、v-else、v-else-if

1. v-show

列表渲染指令

数组更新检测

列表渲染 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/essentials/list.html#array-change-detection

:key

1. vnode 是虚拟节点，本质是一个对象。主要是为了做跨平台 template-vnode-dom

2. 虚拟dom，就是vnode tree

3. diff

• 如果不用key，尽可能的修改和复用相同类型的元素。（根据数组的最小值，进行遍历依次patch比较，如果一样就复用。如果不一样比较类型。如果类型一样就替换，如果类型不一样就创建。最后发现有剩余就删掉。如果有增加就新建）

• 如果使用key，会基于key的变化进行排列组合，并且会移除、销毁key不存在的元素。（先前面循环，在从后面循环，然后有增加就增加、有没有的key就移除，如果是乱序就根据key移动位置）

computed

1. 有缓存，不会每次都进行计算。method每次都会进行计算。计算属性会根据依赖变化重新计算

2. 可以用function，也可以用对象，对象需要写入 getter，setter

watch

• data函数里面的数据，监听需要一些进行 javascript逻辑处理的时候使用。

• 如果是界面上的变化，本身响应式就可以实现。

• watch 也可以侦听 props

状态选项 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/options-state.html#watch

组件实例 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/component-instance.html#watch

表单

v-model

组件

全局注册组件

局部注册组件

父传子

1. 字符串数组

1. 对象

• type 为 js类型就可以

• 类型中如果是对象或者函数，默认值需要用函数返回（不然会造成引用地址一致，导致多个组件共用同一个引用地址）

• vue推荐属性传递时，使用短横 而不是 驼峰

Props | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/props.html

1. Attributes 继承

透传 Attributes | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/attrs.html

子传父

爷孙通讯

组合选项 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/options-composition.html#provide

兄弟通讯

插槽

插槽 Slots | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/slots.html

1. 基本使用

2. 具名插槽

3. 动态插槽

4. 作用域插槽

动态组件

组件基础 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components

keep-alive

KeepAlive | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/built-ins/keep-alive.html#keepalive

异步组件

为了做代码分包，使用异步组件，一般与 路由 结合使用

1. 使用

2. 结合suspense

异步组件 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/async.html

元素实例

组件实例 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/component-instance.html

1. $refs 获取对象实例

2. $parent 获取父组件实例

3. $root 获取根组件实例

4. $el 获取当前组件的根组件实例

生命周期

生命周期选项 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/options-lifecycle.html

组件 v-model

1. 组件中使用

组件 v-model | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/v-model.html

1. 组件绑定多个

组件 v-model | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/components/v-model.html#multiple-v-model-bindings

动画过渡

Transition | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/built-ins/transition.html

动画技巧 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/extras/animation.html

Animate.css | A cross-browser library of CSS animations.

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

https://animate.style/

TransitionGroup | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/guide/built-ins/transition-group.html

mixins

1. 是一个对象，里面写重复逻辑

2. 混入规则
1. 如果重复key，优先使用本组件
2. 相同生命周期都会调用，优先混入组件

组合选项 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/options-composition.html#mixins

extends

组合选项 | Vue.js

Vue.js - 渐进式的 JavaScript 框架

https://cn.vuejs.org/api/options-composition.html#extends