跳到主要内容

Vue 基础

Vue 是什么​

Vue 是一款用于构建用户界面的 JavaScript 框架。

两个核心功能：

  • 声明式渲染
  • 响应式

三个框架特性：

  • 渐进式：HTML、Web Component、SPA、SSR、SSG、App
  • 单文件组件：SFC
  • API 风格：Options API、Composition API

快速体验​

创建项目​

# 执行以下命令，根据命令选择初始化项目
npm create vue@latest
# 或
pnpm create vue@latest

注：create-vue：Vue 官方的项目脚手架工具

模板语法​

  • 文本插值
  • 原始 HTML
  • Attribute 绑定
  • JavaScript 表达式
  • 指令 Directives

响应式​

  • ref()
  • reactive()

详见：响应式基础 | Vue.js

计算属性​

  • computed()

条件渲染​

  • v-if（可用在 <tempalte>）
  • v-show
  • v-for

列表渲染​

  • v-for（可用在 <tempalte>）

事件处理​

  • v-on（简写 @）
  • 事件修饰符
  • 按键修饰符
  • 鼠标按键修饰符

表单输入绑定​

  • v-model（使用响应式系统 API 初始化值）
  • 修饰符：.lazy, .number, .trim

生命周期​

  • 注册周期钩子：onMounted(), onUpdate(), onUnmounted()

侦听器​

  • watch()
  • watchEffect()
  • onWatcherCleanup()（副作用清理）
  • watchSyncEffect()（同步触发器）

模板引用​

  • ref
  • useTemplateRef()

组件基础​

  • 定义组件：构建：使用单文件组件（SFC）；不构建：JS 对象
  • 使用组件：导入
  • 传递 props：defineProps 宏
  • 监听事件：$emit
  • 通过插槽分配内容：<slot>
  • 动态组件：:is
  • DOM 内模板解析：大小写区分、闭合标签、元素位置限制

资源​

  • 代码：code/vue-start

参考​