快速上手 Vue.js 3：10 分钟入门指南 [补充]

2023-10-17 00:18:20

前言

在上一篇关于 Vue.js 3 的文章《10 分钟带你上手 Vue.js 3》中，我们介绍了如何快速上手 Vue.js 3 的基本知识和实践开发。这篇文章将作为补充，进一步深入探讨 Vue.js 3 的核心概念，提供更详细的示例和指导。

工程搭建和工程结构

在上一篇文章中，我们介绍了使用 Vue CLI 快速搭建 Vue.js 3 项目。Vue CLI 提供了开箱即用的构建工具和模板，大大简化了项目搭建过程。

vue create my-vue3-app
cd my-vue3-app

项目结构如下：

my-vue3-app/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  ├── src/
  │   ├── App.vue
  │   ├── main.js
  ├── .gitignore
  ├── package-lock.json
  ├── package.json
  ├── README.md
  └── vue.config.js

核心概念

数据绑定

数据绑定是 Vue.js 的核心功能之一。它允许我们将数据模型与 HTML 视图关联起来，当数据模型发生变化时，视图也会自动更新。

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

组件通信

组件通信是创建复杂应用程序的关键。Vue.js 提供了多种组件通信方式，包括 props、events 和 slots。

props 用于将数据从父组件传递给子组件。

<template>
  <child-component :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello child!'
    }
  }
}
</script>

events 用于在组件之间传递事件。

<template>
  <child-component @click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
}
</script>

slots 用于将内容从父组件嵌入到子组件中。

<template>
  <parent-component>
    <template v-slot:default>
      Custom content
    </template>
  </parent-component>
</template>

生命周期

组件生命周期由一系列钩子函数组成，允许我们在组件的不同阶段执行特定的逻辑。

钩子函数
beforeCreate	在实例初始化之前调用
created	在实例创建后调用
beforeMount	在组件挂载之前调用
mounted	在组件挂载后调用
beforeUpdate	在组件更新之前调用
updated	在组件更新后调用
beforeDestroy	在组件销毁之前调用
destroyed	在组件销毁后调用