Vue3 作为目前主流的前端框架之一，相比 Vue2 在性能、API 设计和类型支持上都有显著提升。本文将围绕 Vue3 的核心基础语法展开，带大家快速上手 Vue3 开发，适合零基础或从 Vue2 迁移的开发者。

一、准备工作：创建 Vue3 项目

在学习语法前，我们先搭建一个 Vue3 项目。目前主流的创建方式有两种：Vue CLI 和 Vite（推荐，启动速度更快）。

  1. 用 Vite 创建项目（推荐）​
    Vite 是 Vue 作者推出的构建工具，支持快速热更新，步骤如下：
# 1. 安装Node.js（需v14.18+版本，可通过node -v查看）
# 2. 创建项目
npm create vite@latest vue3-demo -- --template vue
# 3. 进入项目目录
cd vue3-demo
# 4. 安装依赖
npm install
# 5. 启动项目
npm run dev

启动后访问 http://localhost:5173，即可看到 Vue3 默认页面。

  1. 项目目录结构（核心文件）
vue3-demo/
├─ src/
│  ├─ components/  # 组件文件夹
│  ├─ App.vue      # 根组件
│  └─ main.js      # 入口文件
└─ index.html      # 入口HTML

二、核心语法：从模板到逻辑

Vue3 的语法分为「模板语法」（视图层）和「逻辑语法」（脚本层），下面逐一讲解。​

1. 模板语法：构建视图​

模板语法是 Vue 特有的 HTML 扩展，用于将数据绑定到 DOM，核心包括文本插值和指令。​

（1）文本插值：{{变量}}​

最基础的数据绑定方式，用于渲染响应式变量的值：

<!-- App.vue 模板部分,相当于html -->
<template>
  <h1>{{ message }}</h1>
  <p>{{ 1 + 1 }}</p> <!-- 支持简单表达式 -->
  <p>{{ isShow ? '显示内容' : '隐藏内容' }}</p> <!-- 三元表达式 -->
</template>

<script setup>
// 脚本部分：定义响应式变量，相当于js
const message = 'Hello Vue3!'
const isShow = true
</script>

注意：模板中只能写简单表达式（如加减、三元），不能写复杂逻辑（如 for 循环、if 语句块）。

（2）指令：v-xxx 系列​

指令是模板中的特殊属性，以 v- 开头，用于实现 DOM 操作逻辑。常用指令如下：示例：综合使用指令​

  • v-bind 绑定属性（简写 :），重点掌握 class 和 style 的动态绑定。
  • v-if 与 v-show 用于条件渲染，注意两者的性能差异。
  • v-for 循环渲染列表，必须添加 key 且避免用 index。
  • v-on 绑定事件（简写 @），灵活使用事件修饰符。
  • v-model 实现双向绑定，适用于表单和自定义组件​
<template>​
  <!-- 1. v-bind：绑定图片属性 -->​
  <img :src="imgUrl" :alt="imgAlt" width="200">​
​
  <!-- 2. v-if：条件显示 -->​
  <div v-if="isLogin">欢迎回来，{{ username }}</div>​
  <div v-else>请<a @click="toLogin">登录</a></div>​
​
  <!-- 3. v-for：循环渲染列表 -->​
  <ul>​
    <li v-for="(fruit, index) in fruits" :key="index">​
      {{ index + 1 }}. {{ fruit }}​
    </li>​
  </ul>​
​
  <!-- 4. v-on：绑定点击事件 -->​
  <button @click="addFruit">添加水果</button>​
</template>​
​
<script setup>​
// 定义变量​
const imgUrl = 'https://v3.vuejs.org/logo.png'​
const imgAlt = 'Vue3 Logo'​
const isLogin = true​
const username = 'Vue开发者'​
const fruits = ['苹果', '香蕉', '橙子']​
​
// 定义事件方法​
const toLogin = () => {​
  alert('跳转到登录页')​
}​
​
const addFruit = () => {​
  fruits.push('葡萄') // 后续会讲响应式更新，此处暂用简单写法​
}​
</script>​

重要：v-for 必须加 :key，用于 Vue 识别列表项的唯一性，避免渲染错误（推荐用唯一 ID，而非 index）。

2. 响应式数据：让数据驱动视图​

Vue3 的核心特性是「响应式」—— 当数据变化时，视图会自动更新。Vue3 提供了两种创建响应式数据的 API：ref 和 reactive。​

（1）ref：用于基本类型（数字、字符串、布尔）​

  • 定义：const 变量名 = ref(初始值)​
  • 访问 / 修改：脚本中需加 .value，模板中直接用变量名​

示例：计数器（ref 实现）​
​

<template>​
  <h2>计数器：{{ count }}</h2>​
  <button @click="increase">+1</button>​
  <button @click="decrease">-1</button>​
</template>​
​
<script setup>​
// 1. 导入ref（Vue3需手动导入）​
import { ref } from 'vue'​
​
// 2. 创建响应式变量​
const count = ref(0)​
​
// 3. 定义方法修改数据​
const increase = () => {​
  count.value++ // 脚本中必须加 .value​
}​
​
const decrease = () => {​
  count.value--​
}​
</script>

​

（2）reactive：用于复杂类型（对象、数组）​

  • 定义：const 变量名 = reactive(初始对象/数组)​
  • 访问 / 修改：直接通过属性名操作，无需 .value​

示例：用户信息（reactive 实现）​
​

 <h4>爱好：</h4>​
    <ul>​
      <li v-for="hobby in user.hobbies" :key="hobby">{{ hobby }}</li>​
    </ul>​
    <button @click="addHobby">添加爱好</button>​
  </div>​
</template>​
​
<script setup>​
import { reactive } from 'vue'​
​
// 创建响应式对象​
const user = reactive({​
  name: '张三',​
  age: 20,​
  hobbies: ['篮球', '游戏']​
})​
​
// 修改对象属性​
const updateAge = () => {​
  user.age++ // 直接修改属性，无需 .value​
}​
​
// 修改数组​
const addHobby = () => {​
  user.hobbies.push('阅读') // 数组方法会自动触发响应式​
}​
</script>

​

3. 方法与事件：交互逻辑​

通过 v-on（简写 @）绑定事件，事件处理函数在

（1）事件传参​

如果需要给事件方法传参数，直接在模板中括号内传递：​

<template>​
  <button @click="sayHi('Vue3')">打招呼</button>​
  <button @click="deleteItem(index)">删除第{{ index }}项</button>​
</template>​
​
<script setup>​
const sayHi = (name) => {​
  alert(`Hi, ${name}!`)​
}​
​
const deleteItem = (index) => {​
  console.log(`删除索引：${index}`)​
}​
</script>

​

（2）事件修饰符​

Vue 提供了「事件修饰符」，用于简化常见的事件逻辑（如阻止默认行为、冒泡），常用修饰符：​

  • .prevent：阻止默认行为（如表单提交、a 标签跳转）​
  • .stop：阻止事件冒泡​
  • .once：事件只触发一次​

示例：阻止表单提交​

<template>​
  <!-- 阻止表单默认提交行为 -->​
  <form @submit.prevent="handleSubmit">​
    <input type="text" v-model="inputValue">​
    <button type="submit">提交</button>​
  </form>​
</template>​
​
<script setup>​
import { ref } from 'vue'​
const inputValue = ref('')​
​
const handleSubmit = () => {​
  console.log('提交内容：', inputValue.value)​
}​
</script>

这里的 v-model 是双向绑定指令，会自动同步输入框值和变量，后续会详细讲。​

4. 计算属性与侦听器：处理数据逻辑​

（1）计算属性（computed）​

用于处理依赖响应式数据的复杂计算，具有「缓存特性」—— 只有依赖数据变化时才重新计算，比方法更高效。​

示例：计算购物车总价​

<template>​
  <div>​
    <p>商品1：{{ price1 }}元 × {{ count1 }}件</p>​
    <p>商品2：{{ price2 }}元 × {{ count2 }}件</p>​
    <p>总价：{{ totalPrice }}</p> <!-- 计算属性 -->​
  </div>​
</template>​
​
<script setup>​
import { ref, computed } from 'vue'​
​
// 基础数据​
const price1 = ref(100)​
const count1 = ref(2)​
const price2 = ref(50)​
const count2 = ref(3)​
​
// 计算属性：依赖price和count，自动更新​
const totalPrice = computed(() => {​
  return price1.value * count1.value + price2.value * count2.value​
})​
</script>

（2）侦听器（watch）​

用于监听响应式数据的变化，并执行副作用（如发送请求、打印日志）。​

示例：监听输入框值变化​

<template>​
  <input type="text" v-model="searchText" placeholder="输入搜索内容">​
</template>​
​
<script setup>​
import { ref, watch } from 'vue'​
​
const searchText = ref('')​
​
// 侦听searchText的变化​
watch(searchText, (newVal, oldVal) => {​
  console.log(`旧值：${oldVal}，新值：${newVal}`)​
  // 模拟发送搜索请求（仅示例）​
  if (newVal.length > 2) {​
    // axios.get(`/api/search?key=${newVal}`)​
  }​
})​
</script>

5. 组件基础：拆分页面​

Vue3 支持组件化开发，将页面拆分为多个可复用的组件。下面以「父子组件通信」为例，讲解基础用法。​

（1）创建子组件​

在 src/components 下新建 HelloWorld.vue：​

 <div>​
    <h3>{{ title }}</h3>​
    <p>{{ content }}</p>​
    <button @click="handleClick">向父组件传值</button>​
  </div>​
</template>​
​
<script setup>​
// 1. 接收父组件传递的参数（props）​
const props = defineProps({​
  title: {​
    type: String, // 类型约束​
    required: true // 必传​
  },​
  content: {​
    type: String,​
    default: '默认内容' // 默认值​
  }​
})​


​
// 2. 向父组件发送事件（emit）​
const emit = defineEmits(['sendMsg']) // 声明可触发的事件​
​
const handleClick = () => {​
  // 触发事件并传值​
  emit('sendMsg', '我是子组件的消息')​
}​
</script>

（2）父组件使用子组件​

**在 App.vue 中引入并使用 HelloWorld**:​

<!-- App.vue（父组件） -->​
<template>​
  <div>​
    <h2>父组件</h2>​
    <!-- 使用子组件：传递props + 监听emit事件 -->​
    <HelloWorld ​
      title="欢迎使用Vue3" ​
      content="这是子组件的内容"​
      @sendMsg="getMsgFromChild"​
    />​
    <p>子组件传来的消息：{{ childMsg }}</p>​
  </div>​
</template>​
​
<script setup>​
// 1. 导入子组件​
import HelloWorld from './components/HelloWorld.vue'​
import { ref } from 'vue'​
​
const childMsg = ref('')​
​
// 2. 接收子组件的事件​
const getMsgFromChild = (msg) => {​
  childMsg.value = msg​
}​
</script>​
​

三、总结​

本文讲解了 Vue3 的核心基础语法，包括：​

  1. 项目创建（Vite）​
  2. 模板语法（插值、指令）​
  3. 响应式数据（ref、reactive）​
  4. 方法与事件（传参、修饰符）​
  5. 计算属性与侦听器（computed、watch）​
  6. 组件基础（props、emit）​
    这些是 Vue3 开发的基石，建议大家结合代码示例实际运行调试，加深理解。后续可以进一步学习 Vue3 的进阶特性，如 Composition API、生命周期、Pinia 状态管理等。​
    如果在实践中遇到问题，欢迎在评论区交流～
# javascript # 前端 # 前端框架
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

当AI把用户数据当‘原材料’：初级Python开发者如何‘精加工’创意？—— 老码农的工艺坊

avatar 2048 AI社区

【渗透测试】使用 UV 简化 Python 工具和脚本管理渭鸭揭芽堑# 案例分享 AI使用分享

{文章名}摘要

avatar 2048 AI社区
cover

AI 大模型知识管理平台：让企业知识“活”起来

avatar 2048 AI社区