官方地址：Vue.js

入门

  • Vue 3 简介
  • Vue 3 安装与设置
    • 使用 CDN
    • 使用 Vue CLI
    • 使用 Vite

基础概念

  • 模板语法
    • 插值
    • 指令 (如 v-bind, v-if, v-for)
  • 计算属性与侦听器
    • 计算属性
    • 侦听器
  • 绑定属性与样式
    • 绑定 HTML 属性
    • 绑定 class 和 style

Vue 组件

  • 创建与注册组件
  • 父子组件通信
    • Props
    • 自定义事件与 $emit
  • 插槽
    • 默认插槽
    • 具名插槽
    • 作用域插槽
  • 动态组件与异步组件

Vue 组合式 API (Composition API)

  • setup 函数
  • 响应式数据
    • reactive
    • ref
    • computed
    • watch
  • 生命周期钩子
    • onMounted
    • onUpdated
    • onUnmounted
  • 依赖注入与消费
    • provide/inject
  • 自定义组合式函数

路由 (Vue Router)

  • 安装与配置 Vue Router
  • 创建路由
  • 动态路由与嵌套路由
  • 路由守卫
    • 全局守卫
    • 路由独享守卫
    • 组件内守卫
  • 路由元信息与滚动行为

状态管理 (Pinia)

  • 安装与配置 Pinia
  • 创建和使用 Store
  • 状态、Getter 与 Actions
  • 模块化 Store

过渡与动画

  • 过渡类名
  • CSS 过渡与动画
  • 使用第三方动画库
  • 过渡组件

表单处理

  • 表单输入绑定
  • 表单验证
    • 自定义验证
    • 使用第三方验证库 (如 Vuelidate, VeeValidate)

Vue 指令

  • 内置指令
    • v-model
    • v-show
    • v-if
    • v-for
  • 自定义指令

插件与扩展

  • 创建插件
  • 使用插件
    • Vuex
    • Vue Router
    • Vuetify
    • Element Plus

服务端渲染 (SSR)

  • Nuxt.js 简介
  • 安装与配置 Nuxt.js
  • 路由与页面
  • 状态管理
  • 插件与模块

测试

  • 单元测试
    • 使用 Jest
  • 端到端测试
    • 使用 Cypress

性能优化

  • 异步组件与懒加载
  • 动态导入
  • 虚拟滚动与懒加载列表
  • 代码分割

高级主题

  • TypeScript 与 Vue 3
  • 自定义渲染器
  • Vue 3 与 Web Components

官方 API

  • Vue 实例 (Vue Instance)
  • 响应式 API
    • reactive
    • ref
    • computed
    • watch
  • 生命周期钩子
    • onBeforeMount
    • onMounted
    • onBeforeUpdate
    • onUpdated
    • onBeforeUnmount
    • onUnmounted
  • 组合式 API
    • setup
    • provide/inject
  • 全局 API
    • createApp
    • nextTick
    • defineComponent
    • defineAsyncComponent
  • 内置组件
    • Teleport
    • Suspense
    • KeepAlive
  • 指令
    • v-model
    • v-bind
    • v-if
    • v-else
    • v-for
    • v-show
    • v-pre
    • v-cloak
    • v-on
    • v-html
    • v-text