与React齐头并进的Vue框架

一、前端开发的又一伟大框架

大家好！上次我分享了下React的基本认识与使用。今天，我们来聊聊 Vue 3，这样一个超好用的前端框架，看完将会重塑你的代码世界。Vue 3就像前端界的轻量级英雄，以简单易用著称，特别适合刚踏入前端领域的朋友们。Vue 和 React 都是构建网页的好帮手，但各有千秋。走，咱们一起看看 Vue 怎么玩，顺便比划比划它和 React 的不同之处。😎

1、为什么要选 Vue？

想象一下，你在做一个项目，既想快点上手，又想代码优雅，还希望能轻松调试。Vue.js 就是你的理想选择。它把数据绑定和虚拟 DOM 结合得刚刚好，让你既能享受 React 的性能，又能拥有 Angular 的便利。最重要的是，Vue 的 API 简单明了，学习起来就像喝杯茶那样轻松。

2、一键到位的 Vite

当谈到 Vue 和现代前端开发，就不能不提 Vite ，尤其对于那些追求快速开发和即时反馈的开发者来说。Vite 与 Vue 3 的结合，不仅提供了高效的开发体验，还简化了项目启动流程，类似于 Vue CLI 的一键式项目创建能力，让你不用从零开始，直接开干！

安装 Vite

首先，确保你装好了 Node.js 和 npm，然后在命令行敲下：

npm install -g create-vite

这个命令会全局安装 create-vite，这是 Vite 的项目创建工具。

有了 create-vite，创建一个 Vue 3 项目变得非常简单。运行以下命令：

vite create my-vue-app

在出现的选项中选择 Vue 3 模板。Vite 将会帮你生成一个名为 my-vue-app 的项目，其中包含了 Vue 3 的基本配置和脚手架。

进入项目并启动服务器

一旦项目创建完成，进入项目目录，然后，运行开发服务器。

cd my-vue-app
npm run dev

这些命令会启动 Vite 开发服务器，自动打开浏览器并显示你的 Vue 3 应用程序。是不是特简单？

二、探究 Vue 3

通过使用 Vite，我们获得更快的开发速度和更简洁的项目配置。现在来看看都会为我们生成些什么东西，以及它们该如何使用。

1、Vue 3 项目结构

打开你的项目文件夹，你会看到一系列文件夹，那么都有些什么作用呢？

• src: 这里放所有代码，Vue 组件、样式、脚本都在这儿。
• public: 静态文件的存放处，HTML、图片什么的。
• package.json: 记录了项目依赖和命令脚本。

2、Vue 3 是怎么工作的

Vue 3 的核心在于它的组件系统。每一个 Vue 组件都可以看作是一个独立的积木，你可以将它们组合在一起，构建出复杂的应用。在 Vue 3 中，你可以在 <script setup> 标签内使用 Composition API 来组织和管理组件的逻辑，这让代码更加清晰和模块化。

3、挂载点与组件标签

在 Vue 3 中，我们的应用通常会挂载在一个 HTML 元素上，这个元素在 public/index.html 文件中定义。而在组件内部，<template> 标签包含了组件的 HTML 结构，<script> 标签则定义了组件的行为，<style> 标签用于添加组件的样式。

三、第一个 Vue 应用

认识了 Vue 3 ，现在就动手试试搭建自己的第一个案例吧。下面是如何使用 Vue 3 构建一个待办事项列表应用。

1、基本准备

初始化项目后，运行指令来安装 Vue 和 Vite 需要的所有依赖。

npm install

搭建好框架后，启动项目，就开始任务了。

2、编写组件

在 src 目录下创建你的待办事项组件 TodoList.vue。

<template>
  <div class="todo-list">
    <h1>My Todo List</h1>
    <input v-model="newTodo" placeholder="What needs to be done?" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" :checked="todo.done" @change="toggleTodo(index)" />
        {{ todo.text }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

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

const newTodo = ref('');
const todos = ref([
  { text: 'Learn Vue 3 with Vite', done: false },
  { text: 'Practice coding', done: true },
]);

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, done: false });
    newTodo.value = '';
  }
};

const toggleTodo = index => {
  todos.value[index].done = !todos.value[index].done;
};

const removeTodo = index => {
  todos.value.splice(index, 1);
};
</script>

<style scoped>
.todo-list {
  max-width: 400px;
  margin: auto;
  padding: 20px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

<template>部分

• .todo-list 包含一个标题、一个输入框、一个按钮和一个未完成事项的列表。

• <h1> 显示应用标题。

• <input> 绑定到 newTodo 变量，用于输入新的待办事项。

• <button> 用于触发添加新待办事项的逻辑。

• <ul> 列出所有待办事项，每个 <li> 都有：

  • 一个复选框，其状态绑定到每个待办事项的 done 属性，并在改变时调用 toggleTodo 方法。
  • 一个文本显示待办事项的描述。
  • 一个按钮，用于删除当前待办事项。

<script setup>部分

• import { ref } from 'vue'; 引入Vue的ref函数，用于创建响应式的引用。

• const newTodo = ref(''); 创建一个响应式的字符串引用，用于保存输入框的内容。

• const todos = ref([...]); 创建一个响应式的数组引用，保存所有的待办事项数据。

• 方法定义：

  • addTodo() 方法检查输入框内容是否非空，如果非空则向 todos 数组中添加一个新的待办事项，并清空输入框。
  • toggleTodo(index) 方法用于切换特定待办事项的完成状态。
  • removeTodo(index) 方法用于从 todos 数组中移除指定索引的待办事项。

然后稍微加一些样式，不然看不下去。现在，组件也就完成了。

3、更新 main.js

在 src/main.js 中，引入并挂载你的 TodoList 组件：

import { createApp } from 'vue';
import TodoList from './TodoList.vue';

createApp(TodoList).mount('#app');

现在，你应该能在浏览器中看到你的待办事项列表应用了。每次保存文件后，Vite 都会立即刷新页面，你可以快速迭代和测试代码。

四、小结

看到这里，大家应该能够掌握Vue 3的基础知识，理解其优势，并学会如何快速搭建和运行一个简单的Vue应用了。现在开始，我们开启了探索Vue 3强大功能的大门，让我们一起继续加油。🎉