Vue3教程：零基础快速上手入门指南

Vue3简介

Vue3 是 Vue.js 的最新版本，引入了一系列性能优化和新特性的更新，相较于 Vue2，其对响应式系统进行了重构，提高了渲染性能，并新增了 Composition API 与 Options API 两种组件创建方法，以及诸多改进。选择 Vue3 的理由主要在于其性能优化和模块化设计，使其更加适合构建大型应用。

安装与环境配置

安装Vue CLI

在启动Vue3项目之前，请确保您的开发环境已安装 Node.js。使用 npm 或 yarn 进行全局安装 Vue CLI：

npm install -g @vue/cli

创建Vue3项目

借助 vue create 命令创建新的Vue3项目，选择适合的模板（如 vue3、vue3-ts 等），并提供必要的选项：

vue create my-project --template vue3

接着，在项目目录中安装依赖：

cd my-project
npm install

配置开发环境

确保 my-project 文件夹内 .editorconfig、.gitignore 和 .eslintrc.js 文件已正确配置，以确保代码风格一致性，并遵循最佳实践。

运行项目

使用 npm run serve 或 yarn serve 命令启动开发服务器：

npm run serve

这将预览页面在浏览器中打开，便于在 src 目录下编写代码。

.vue文件与组件基础

创建Vue3组件

在 src/components 目录下创建 .vue 文件，如 MyComponent.vue：

<template>
  <div>
    <h1>欢迎使用 Vue3</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue3 很强大！'
    };
  }
};
</script>

使用组件

在 src/App.vue 中引入并使用新创建的组件：

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

数据绑定与响应式系统

响应式原理

Vue3 的数据响应式系统基于虚拟DOM和差异算法，实现了高效的数据绑定和渲染更新。

使用数据属性

在组件内部，使用 data 属性定义响应式数据：

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

模板数据绑定

模板中利用双花括号 {{ }} 绑定数据：

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

对于事件绑定，采用 @click 处理用户操作。

模板语法与组件间通信

使用插槽

组件可包含默认内容或通过 v-slot 插槽传递自定义内容：

<template>
  <div>
    <child-component v-slot="{ slot }">
      {{ slot }}
    </child-component>
  </div>
</template>

组件间通信

Vue3 支持 props、emits 和 ref 等机制实现组件间通信。

子组件向父组件传递数据

通过父组件向子组件传递 props：

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello, Vue3!'
    };
  }
};
</script>

父组件接收子组件数据

子组件使用 emit 向父组件传递数据：

<template>
  <div>
    <button @click="sendData">发送数据</button>
    <p>{{ parentMessage }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const parentMessage = ref('');
    const sendData = () => {
      const message = '数据已发送';
      parentMessage.value = message;
      // 实际输出或用于其他操作
    };
    return { parentMessage, sendData };
  }
};
</script>

实战案例与项目构建

实战项目概览

构建一个简易新闻应用，展示新闻标题、摘要和发布日期。用户可点击标题查看详细新闻内容。

项目结构

my-news-app/
  ├── src/
    ├── components/
    │   ├── NewsCard.vue
    │   ├── NewsList.vue
    │   └── NewsDetail.vue
    ├── App.vue
    └── main.js
  ├── public/
    ├── index.html
    └── favicon.ico
  ├── package.json
  └── README.md

实现步骤

1. 新闻列表组件 (NewsList.vue)：展示新闻标题、摘要和发布日期，使用循环显示多条新闻。

2. 新闻卡片组件 (NewsCard.vue)：包含新闻标题点击事件，跳转到新闻详情页面。

3. 新闻详情组件 (NewsDetail.vue)：显示新闻详情，包括标题、内容和发布日期。

4. 应用主文件 (App.vue)：配置组件和路由。

5. 主逻辑 (main.js)：初始化Vue实例，配置路由监听。

示例代码

新闻列表组件 (NewsList.vue)

<template>
  <div>
    <news-card v-for="news in newsList" :key="news.id" :news="news" />
  </div>
</template>

<script>
import NewsCard from './NewsCard.vue';

export default {
  components: {
    NewsCard
  },
  data() {
    return {
      newsList: [
        { id: 1, title: '新闻标题 1', summary: '新闻摘要 1', date: '2023-01-01' },
        { id: 2, title: '新闻标题 2', summary: '新闻摘要 2', date: '2023-01-02' },
        // 更多新闻...
      ]
    };
  }
};
</script>

新闻卡片组件 (NewsCard.vue)

<template>
  <div @click="navigateToNewsDetail($event)">
    <h2>{{ news.title }}</h2>
    <p>{{ news.summary }}</p>
    <small>{{ news.date }}</small>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      required: true
    }
  },
  methods: {
    navigateToNewsDetail(event) {
      // 路由跳转逻辑, 示例：$router.push(`/news/${news.id}`) 或使用 `@click` 事件处理程序
    }
  }
};
</script>

新闻详情组件 (NewsDetail.vue)

<template>
  <div>
    <h2>{{ news.title }}</h2>
    <p>{{ news.content }}</p>
    <small>{{ news.date }}</small>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      required: true
    }
  }
};
</script>

通过以上实战案例的构建，您将掌握从构建组件到应用集成的完整流程，包括数据绑定、组件间通信以及基本的事件处理，从而为构建更复杂的应用奠定坚实基础。