Vue3 基础语法

关键要点

• Vue3 基础语法包括创建实例、模板语法、事件处理、计算属性和组件等核心概念。
• 它支持 Options API 和 Composition API 两种风格，适合不同复杂度的开发需求。
• 单文件组件（.vue 文件）结合了 JavaScript、HTML 和 CSS，方便组件开发。

创建 Vue 实例

Vue3 使用 Vue.createApp() 创建实例，并通过 mount 方法挂载到 DOM 元素。例如：

Vue.createApp(HelloVueApp).mount('#hello-vue')

这允许你将 Vue 应用绑定到页面上的特定元素。

模板语法

Vue3 的模板语法基于 HTML，包含：

• 文本插值：使用 {{ }} 显示数据，如 {{ message }}。
• 指令：如 v-bind（简写 :href="url"）、v-if（条件渲染）、v-for（循环渲染）、v-model（双向绑定）和 v-on（事件绑定，简写 @click="greet"）。

事件处理与组件

事件处理通过 v-on 或 @ 绑定 DOM 事件，例如 <button @click="greet">Greet</button>。组件是可复用的独立单元，可通过 app.component() 定义，如：

app.component('my-component', { template: '<div>A custom component!</div>' })

组件支持通过 Props 传递数据，并使用 $emit 进行父子组件通信。

API 风格

• Options API：适合简单场景，使用 data、methods 等选项。例如：

  export default {
    data() { return { count: 0 } },
    methods: { increment() { this.count++ } },
    mounted() { console.log(`The initial count is ${this.count}.`) }
  }

• Composition API：更灵活，适合复杂应用，使用导入的 API 函数，如：

  import { ref, onMounted } from 'vue'
  const count = ref(0)
  function increment() { count.value++ }
  onMounted(() => { console.log(`The initial count is ${count.value}.`) })

---

详细报告

Vue3 是一个渐进式 JavaScript 框架，专注于构建用户界面，其设计基于组件化和响应式数据的理念。以下是 Vue3 基础语法的详细讲解，涵盖核心概念和实践示例，适合初学者深入了解。

Vue3 的核心特点

Vue3 延续了 Vue.js 的易用性，提供了更现代化的开发体验。其基础语法包括实例创建、模板语法、事件处理、计算属性和组件等关键部分。Vue3 还引入了两种 API 风格：Options API 和 Composition API，分别适用于不同开发场景。此外，单文件组件（SFC）是 Vue3 的重要特性，允许开发者将 JavaScript、HTML 和 CSS 封装在一个 .vue 文件中，便于代码组织和维护。

创建 Vue 实例

Vue3 的起点是创建应用实例，使用 Vue.createApp() 方法生成实例，并通过 mount 方法将其挂载到 DOM 元素。例如：

<div id="hello-vue">{{ message }}</div>
<script>
  const HelloVueApp = {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
  Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

这个例子展示了如何将 Vue 应用绑定到页面上的 #hello-vue 元素，显示动态数据。更多示例可参考 Vue3 基础语法 | 菜鸟教程。

模板语法

Vue3 的模板语法基于 HTML，允许开发者声明式地绑定 DOM 到底层数据。核心包括：

• 文本插值：使用 {{ }} 插值表达式显示数据，例如 {{ message }}。
• 指令：Vue3 提供了多种指令，用于实现动态行为：
• v-bind：绑定属性，简写为 :，如 :href="url"。
• v-if、v-else、v-else-if：实现条件渲染。
• v-for：用于循环渲染列表，例如 <li v-for="item in items">{{ item }}</li>。
• v-model：实现表单输入的双向绑定，例如 <input v-model="message">。
• v-on：绑定事件监听器，简写为 @，如 @click="greet"。

这些指令使得模板代码简洁直观，易于理解和维护。例如，v-model 常用于表单元素，自动同步输入值和数据状态。

事件处理

事件处理是 Vue3 交互的重要部分，通过 v-on 指令（或 @ 简写）绑定 DOM 事件。例如：

<button @click="greet">Greet</button>

对应的 JavaScript 代码定义在 methods 选项中：

methods: {
  greet() {
    alert('Hello!')
  }
}

这允许用户通过点击按钮触发自定义逻辑。事件处理支持事件修饰符（如 .prevent）和按键修饰符（如 .enter），增强了灵活性。

计算属性

计算属性用于定义依赖其他数据的派生状态，其结果会被缓存，只有当依赖项变化时才会重新计算。例如：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}

在模板中，可以直接使用 {{ reversedMessage }} 显示反转后的消息。计算属性适合处理复杂逻辑，保持模板简洁。

组件与通信

组件是 Vue3 的核心构建块，是可复用的独立单元。可以通过 app.component() 全局注册组件，例如：

app.component('my-component', {
  template: '<div>A custom component!</div>'
})

在模板中，使用 <my-component></my-component> 渲染。组件间通信通过 Props 和事件实现：

• Props：父组件向子组件传递数据，例如 <child-component :title="myTitle"></child-component>，子组件通过 props: ['title'] 接收。
• 事件：子组件通过 $emit 触发事件，父组件通过 v-on 监听，例如 $emit('increment') 和 @increment="incrementTotal"。

API 风格对比

Vue3 提供了两种 API 风格，开发者可根据项目需求选择：

• Options API：传统的 API 风格，基于选项对象定义组件逻辑。例如：

  export default {
    data() {
      return { count: 0 }
    },
    methods: {
      increment() {
        this.count++
      }
    },
    mounted() {
      console.log(`The initial count is ${this.count}.`)
    }
  }

适合没有构建工具或简单场景，代码结构清晰，易于初学者上手。

• Composition API：更灵活的 API 风格，使用导入的 API 函数组织逻辑，常与 <script setup> 一起使用。例如：

  import { ref, onMounted } from 'vue'
  const count = ref(0)
  function increment() {
    count.value++
  }
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })

适合构建复杂单页应用，提供更好的逻辑复用和类型支持，推荐与单文件组件结合使用。

单文件组件（SFC）

单文件组件是 Vue3 的推荐实践，文件以 .vue 后缀命名，包含 <script>、<template> 和 <style> 三个部分。例如：

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>
<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button { font-weight: bold; }
</style>

SFC 适合现代前端开发，推荐使用构建工具如 Vite 或 Webpack，更多详情可参考 Vue.js 官方文档（中文）。

学习资源与实践

为了更好地掌握 Vue3 基础语法，推荐以下资源：

• 官方文档提供详细的 API 参考和示例：Vue.js 官方文档（中文）。
• 菜鸟教程提供了系统化的教程，包含实例代码：Vue3 基础语法 | 菜鸟教程。
• w3cschool 也有 Vue3 教程，适合初学者：VUE3 教程_w3cschool。

通过这些资源，开发者可以逐步掌握 Vue3 的基础语法，并结合实际项目实践。

总结

Vue3 基础语法以其简洁和灵活的特点，适合构建现代 Web 应用。无论是通过 Options API 还是 Composition API，开发者都可以根据需求选择合适的开发方式。单文件组件进一步提升了开发效率，推荐初学者从官方文档和教程入手，逐步深入。

以下表格总结了 Vue3 基础语法的核心内容：

功能	描述	示例
创建实例	使用 Vue.createApp() 并挂载到 DOM 元素	Vue.createApp(HelloVueApp).mount('#hello-vue')
文本插值	使用 {{ }} 显示数据	{{ message }}
指令	包括 v-bind、v-if、v-for、v-model、v-on 等	:href="url"、<div v-if="show">Hello</div>
事件处理	通过 @ 绑定事件	<button @click="greet">Greet</button>
计算属性	缓存的派生状态，依赖项变化时重新计算	computed: { reversedMessage() { return this.message.split('').reverse().join('') } }
组件	可复用的独立单元，通过 app.component() 定义	app.component('my-component', { template: '<div>A custom component!</div>' })
Props 和事件	Props 传递数据，事件用于子父通信	<child :title="myTitle"></child>、$emit('increment')
API 风格	Options API 和 Composition API，分别适合简单和复杂场景	Options: data() { return { count: 0 } }、Composition: const count = ref(0)
单文件组件	.vue 文件结合 JavaScript、HTML、CSS	<script>...<template>...<style scoped>...</style>

通过以上内容，开发者可以全面掌握 Vue3 基础语法，并为后续高级开发奠定基础。

关键引文

• Vue.js 官方文档介绍
• Vue3 基础语法教程
• VUE3 教程 w3cschool