vue 中文手册

vue 基础

vue 介绍渐进式 JavaScript 框架

vue 安装使用 npm init vue@latest

vue 应用实例 createApp() 创建应用实例

模板语法基于 HTML

响应式基础 reative()、ref()

深入响应式系统代理 Proxy 和访问器属性 getter/setter

计算属性 computed()

侦听器 watch()、watchEffect()

样式绑定增强型 :class 和 :style

条件渲染 v-if v-show

列表渲染 v-for

事件处理 v-on 监听 DOM 事件

表单输入绑定 v-model 双向数据绑定

生命周期钩子 onBeforeMount()、onMounted()、 onBeforeUpdate()、 onUpdated()

模板引用 ref ref 属性

vue 组件

组件基础 defineProps()、defineEmits()

组件注册 app.component() 注册全局组件，components 选项注册局部组件。

props 数据父组件向子组件单向传递数据

组件事件 emit() 触发事件

attribute 透传自动添加到根元素的 attribute 中

依赖注入 provide() 提供数据，inject() 接收数据

插槽 slot 传递模板片段

异步组件 defineAsyncComponent()

组件 v-model 双向绑定

vue 组件复用

组合式函数封装和复用有状态逻辑

自定义指令对底层 DOM 访问

插件 app.use()

vue 内置组件

Transition 过度 css 属性 transition、animation、transform

渲染机制虚拟 DOM

渲染函数 & JSX h()、render()

响应性语法糖

单文件组合（SFC）

单文件组件扩展名为 .vue 的单个文件，增加重复使用

SFC 语法规范

vue 规模化

路由 vue-router

状态管理 pinia

优先级 B 的规则：强烈推荐 (增强代码可读性)

优先级 C 的规则：推荐 (将选择和认知成本最小化)

优先级 D 的规则：谨慎使用 (潜在风险)

vue 应用实例 API

createApp() 创建一个应用程序实例

createSSRApp() 在 SSR Hydration 模式下创建应用程序实例

app.mount() 挂载

app.unmount() 卸载

app.use() 安装插件

app.component() 全局组件

app.provide() 提供

app.directive() 自定义指令

app.version 版本

app.config 应用程序配置

vue 全局统用 API

nextTick() 等待 DOM 更新后执行

defineComponent() 类型推断

defineAsyncComponent() 定义在渲染时延迟加载的异步组件

defineCustomElement() 自定义元素

vue 响应式 API

setup()

ref() 返回响应式 ref 对象

reactive() 响应式代理

computed() 计算属性

readonly() 只读属性

watch() 侦听器

watchEffect() 效应侦听器

isRef() 检查 ref 对象

unref() 返回值

toRef() 同步响应式

toRefs() 转换为普通对象

isProxy() 检查代理

isReactive() 检测代理

isReadonly() 检测只读

shallowRef() 浅层响应式 ref()

shallowReactive() 浅版本的reactive()

shallowReadonly() 浅层 readonly

triggerRef() 强制触发与 ref 关联的 effect 效应

customRef() 自定义 ref

toRaw() 返回原始代理对象

markRaw() 标记原始对象

effectScope() effect 作用域

getCurrentScope() 返回当前活跃的 effect 作用域

onScopeDispose() 当前 effect 上，注册回调

vue 生命周期钩子 API

onBeforeMount() 挂载组件之前调用

onMounted() 组件挂载后调用

onBeforeUpdate() 组件更新之前调用

onUpdated() 更新 DOM 后调用

onBeforeUnmount() 卸载之前调用

onUnmounted() 卸载组件后调用

onErrorCaptured() 捕获后代组件错误时调用

onRenderTracked() 渲染跟踪到响应性依赖时调用

onRenderTriggered() 响应式依赖触发渲染时调用

onActivated() 启动 KeepAlive 时调用

onDeactivated() 删除 KeepAlive 后调用

onServerPrefetch() 服务器上呈现组件实例之前调用

vue 内置指令 API

v-text 更新元素的文本内容

v-html 更新元素的innerHTML

v-pre 显示原始 Mustache 标签

v-cloak 设置样式

v-slot 插槽

v-show 切换元素的隐现

v-on 绑定事件监听器

v-bind 动态绑定

v-model 双向绑定

v-for 渲染元素或模板块

v-once 只渲染元素和组件一次

v-is 检测动态组件

v-if 条件渲染

v-else 动态条件渲染 else块

v-else-if 表示 v-if 的else if 块

vue 特殊属性 API

is 使用动态组件

key key属性

ref ref 被用来给元素或子组件注册引用信息

vue 内置组件 API

<component> 渲染动态组件

<transition> 渲染过度效果

<transition-group> 多列表过渡

<keep-alive> 会缓存不活动的组件实例

<slot> 内容分发插槽

<teleport> 封装组件

<Suspense> 编排组件树中的嵌套异步依赖项

vue 依赖注入 API

provide() 提供

inject() 注入

vue 渲染函数 API

h() 创建虚拟节点

mergeProps() 合并 props 对象

cloneVNode() 克隆虚拟节点

isVNode() 检测虚拟节点

resolveComponent() 解析组件

resolveDirective() 解析指令

withDirectives() 向虚拟节点添加自定指令

withModifiers() 给事件处理函数添加修饰符

createRenderer() 自定义渲染器

vue 服务器渲染函数 API

renderToString() 服务器渲染

renderToNodeStream() 渲染节点流

pipeToNodeWritable() 将输入渲染为 Node.js 可读流。

renderToWebStream() 将输入呈现为Web可读流

pipeToWebWritable() 通过管道输出 web 实例

SimpleStream() 输出简单的数据流

useSSRContext() 检测上下文对象

vue TypeScript 工具类 API

PropType<T> 注解 props 类型

ComponentCustomProperties 自定义组件属性

ComponentCustomOptions 自定义组件选项

ComponentCustomProps 自定义组件 props

CSSProperties 用于增加样式属性绑定中的允许值

Pinia 与服务器端渲染 Nuxt.js 框架

Pinia Store 测试

Pinia 热更新

vue router（路由）

vue-router 入门安装 router-view 匹配组件 router-link 创建链接

动态路由 $route.params、$route.query、$route.path、$route.has

嵌套路由 children 选项

编程式的导航 router.push()、router.replace()、router.go()

命名路由路由设置上 name 选项

命名视图 router-view 使用 name 属性

重定向和别名 redirect 重定向，alias 定义别名

路由组件传参将 props 传递给路由组件

不同的历史记录模式 history: createWebHistory()

导航守卫 beforeEach()，beforeResolve()，afterEach()，beforeEnter()，

路由元信息 meta 属性

过渡动效基于 transition 组件，route.meta.transition 动态动画

数据获取 created() 钩子内 watch()，beforeRouteEnter()、beforeRouteUpdate() 守卫

滚动行为 scrollBehavior()

路由懒加载箭头函数返回 import()

导航故障 isNavigationFailure()

扩展 RouterLink RouterLink.props

Vue Router 和组合式 API useRouter()、 useRoute()、 onBeforeRouteUpdate()、onBeforeRouteLeave()

Vue Router API

vuex（状态管理）

vuex 是什么状态管理模式库

vuex 安装 npm install vuex@next --save

vuex 使用示例 store 实例，state 数据是响应式的，mutations修改数据选项

state 子组件通过 $store 访问其数据

getter getter 返回对象或者函数

mutation store.commit 触发同步回调

action 异步提交 mutation，dispatch() 分发

module store分割成模块

项目结构

插件 plugins选项

严格模式 strict: true

表单处理带有 setter 的双向绑定 computed

热重载 webpack中插件

对 Vuex 中的 mutation 和 action 进行单元测试

vuex 与 TypeScript useStore

axios 用例 get请求、post请求、多个并发请求

axios API axios()请求

axios 实例 axios.create()创建实例

请求配置 axios(config)

响应结构 axios 响应信息

默认配置

拦截器

错误处理 catch(function (error)) 处理错误信息

取消请求 axios.CancelToken

请求体编码 qs 库

vue3 目录文件

.d.ts 文件 declare 声明

.env 文件

vue3 项目实战

在 centOS 上安装 vscode + eslint + prettier

在 centOS 上安装 npm、nrm、yarn、pnpm

在 centOS 上安装 express、webpack、rollup

vite + vue3 + ts + vue-router + pinia + axios

vite + vue3 + ts 安装 scss + qs + nprogress

vite + vue3 + ts 安装 element-plus

vite + vue3 + ts 安装 tinymce 富文本编辑器

vite + vue3 + ts 安装 @vitejs/plugin-legacy 兼容旧版浏览器

vite + vue3 + ts 配置 babel 浏览器兼容性插件

vite + vue3 + ts 开发配置

vite + vue3 + ts + SSR 使用 Vite 内置 SSR 功能

vite + vue3 + ts + SSR 使用 vite-ssr 插件

vite + vue3 + ts + SSR 使用 vite-plugin-ssr 框架

vite + vue3 + ts + SSR 使用 ssr 框架

vite + vue3 + ts + SSR 使用 Nuxt 框架

vite + vue3 + ts + SSR 使用 Quasar 框架

vite + vue3 + ts + SSG 使用 VuePress

vite + vue3 + ts + SSG 使用 VitePress

laravel9 + vue3 后端配置跨域资源共享（CORS）

laravel9 + vue3 后端使用 passport 来生成验证 token

laravel9 + vue3 前端使用 axios 获取携带 token 访问令牌

axios 发送数据请求的方式