• 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 数据 父组件向子组件单向传递数据
  • 组件事件 defineEmits() 定义事件 emit()触发事件
  • attribute 透传 自动添加到根元素的 attribute 中
  • 依赖注入 provide() 提供数据,inject() 接收数据
  • 插槽 slot 传递模板片段
  • 异步组件 defineAsyncComponent()
  • vue 组件复用
  • 组合式函数 封装和复用有状态逻辑
  • 自定义指令 对底层 DOM 访问
  • 插件 app.use()
  • vue 内置组件
  • Transition 过度 css 属性 transition、animation、transform
  • TransitionGroup 过渡组
  • 动画技巧
  • KeepAlive 缓存组件
  • Teleport 传送模板
  • Suspense 异步依赖
  • TypeScript
  • TypeScript 总览
  • TypeScript 与组合式 API
  • TypeScript 与选项式 API
  • vue 进阶主题
  • 使用 Vue 的多种方式
  • Vue 与 Web Components
  • 组合式 API FAQ
  • 渲染机制 虚拟 DOM
  • 渲染函数 & JSX h()、render()
  • 响应性语法糖
  • 单文件组合(SFC)
  • 单文件组件 扩展名为 .vue 的单个文件,增加重复使用
  • SFC 语法规范
  • SFC 工具链
  • <script setup>
  • <style> 特性 CSS 功能
  • vue 规模化
  • 路由 vue-router
  • 状态管理 pinia
  • 服务端渲染(SSR)
  • 安全
  • 性能优化
  • 无障碍访问
  • 开发测试
  • vue 风格指南
  • 风格指南
  • 优先级 A 的规则:必要的 (规避错误)
  • 优先级 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 )
  • $data 组件实例的数据对象
  • $props 组件接收到的 props 对象
  • $options 组件实例的初始化选项
  • $parent 父实例
  • $root 根组件实例
  • $slots 被插槽分发的内容
  • $refs 持有注册过 ref attribute 的所有 DOM 元素和组件实例
  • $attrs 包含了父作用域中不作为组件 props 或自定义事件
  • $watch 侦听组件实例上
  • $emit 触发当前实例上的事件
  • $forceUpdate 迫使组件实例重新渲染
  • $nextTick 将回调延迟到下次 DOM 更新循环之后执行
  • 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(状态管理)
  • 什么是 Pinia
  • Pinia 入门安装
  • defineStore
  • state
  • getters
  • actions
  • Plugins(插件)
  • 在组件之外使用 Store
  • 在非 setup 中使用 Pinia
  • 组合 Store
  • 组合式函数
  • Pinia 与 服务器端渲染(SSR)
  • 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
  • vuex 与 组合式 API
  • vuex API
  • axios 网络请求库
  • Axios 是什么
  • axios 用例 get请求、post请求、多个并发请求
  • axios API axios()请求
  • axios 实例 axios.create()创建实例
  • 请求配置 axios(config)
  • 响应结构 axios 响应信息
  • 默认配置
  • 拦截器
  • 错误处理 catch(function (error)) 处理错误信息
  • 取消请求 axios.CancelToken
  • 请求体编码 qs 库
  • vue3 项目实战
  • 在 centOS 上安装 vscode + eslint + prettier
  • 在 centOS 上安装 npm、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
  • Markdown 语法教程
  • oauth2.0认证(token认证)
  • 跨域资源共享 CORS
  • laravel9 安装配置
  • laravel9 + vue3 后端配置跨域资源共享(CORS)
  • laravel9 + vue3 后端使用 passport 来生成验证 token
  • laravel9 + vue3 前端使用 axios 获取携带 token 访问令牌
  • axios 发送数据请求的方式