Vue 3的初学者指南在这篇文章中，你将学习Vue.js的基本原理。尽管本文使用的是Vue 3，但这些基础知识也适用于旧

在这篇文章中，你将学习Vue.js的基本原理。尽管本文使用的是Vue 3，但这些基础知识也适用于旧的Vue版本。

我们将介绍如何:

用Vue CLI创建一个Vue应用程序
渲染列表
使用条件渲染
使用动态CSS
处理用户输入和事件
使用方法和计算属性
使用HTML属性绑定

我们将从使用CLI创建一个骨架应用程序开始。

用Vue CLI创建应用程序

Vue的命令行界面允许我们从头开始创建和配置新的Vue项目。也就是说，CLI不需要我们自己添加包和配置，而是为我们做这些。

让我们来安装Vue命令行接口。

安装Vue CLI

本教程假设你的机器上没有安装Vue CLI。要安装它，请运行以下命令:

npm i -g @vue/cli

另外，你也可以用Yarn来安装它，方法如下:

yarn global add @vue/cli

一旦你运行了上述任何一条命令，安装就开始了，这需要几秒钟或几分钟的时间。一旦安装完成，你就可以用下面的命令创建项目:

vue create your-project-name

`vue create` 命令

一旦我们运行了vue create 命令，我们会被提示一些问题。这些问题的目的是为了配置项目以满足我们的需要:

上面的图1显示了我们运行vue create your-project-name 时得到的欢迎屏幕。然后我们要在三个不同的选项中进行选择:

创建一个默认的Vue 2项目
创建一个默认的Vue 3项目
手动选择功能

前两个选项将为我们安装一个默认的Vue项目。然而，我们并不想要一个默认的项目。在本教程中，我们将为我们的项目手动选择功能。一旦我们选择了第三个选项，我们就会得到一系列的问题。

上图2说明了我们选择第三个选项--手动选择功能时看到的情况。我们可以选择我们项目中需要的功能，例如:

为我们的项目添加单元和E2E测试
为项目选择一个linter/formatter
添加选项，如Vuex、TypeScript、Router等。

之后，我们会被提示为我们的项目选择一个Vue版本。对于本教程，我建议选择Vue 3，如下图所示:

最后，我们需要根据第一步选择的功能来回答更多的问题，如前面图2所示。

在进一步讨论之前，我想确保我们在同一个页面上:

在你的终端中运行vue create vue3-fundamentals 。
选择 "手动选择特征"。
取消所有的功能，除了Babel。对于本教程，我们不需要任何额外的功能。
选择Vue版本3。
当它问你把Babel的配置放在哪里时，选择 "在专门的配置文件中"，以此类推。
不要为将来的项目保存预设。

按照上述步骤操作后，项目结构应该如下图4的样子:

项目的配置就这样了!现在我们准备好工作，学习Vue了!

如果你想看关于CLI的更全面的文章，请查看这篇Vue CLI文章。

准备应用程序

有一些东西我们在应用程序中是不需要的。首先，去src >components ，删除HelloWorld.vue 组件。

现在进入App.vue 文件，从该文件中删除所有对HelloWorld 的引用。同时，删除带有Vue标志的图片。最后，修改export default {} 的代码块。

请看下面的App.vue 的完整代码:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: 'My To Do App'
    }
  }
}
</script>

设置一个title 属性并在模板中显示。

列表渲染

我们要讲的第一个概念是如何在Vue应用程序中渲染列表。然而，在这之前，我们需要一个列表。

打开文件App.vue ，添加以下数组:

<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  }
}
</script>

在上面的代码片段中，我们添加了一个对象的数组。每个对象代表一个单独的任务，每个任务包含以下内容:

一个ID：我们可以通过其独特的ID来识别每个任务
一个名称：它描述了该任务的内容
完成字段：它代表这个人是否完成了任务

下一步是对数组进行循环，并在页面上进行渲染。在Vue中，我们可以用v-for 指令在列表上循环。v-for 指令的形式是：task in tasks ，其中每个task 代表数组中的一个单独的项目，而tasks 代表数组。

我们可以在下面的代码片断中看到v-for 指令的作用:

<ul>
    <li v-for="task in tasks" :key="task.id">
      {{task.id}}. {{ task.name }}
    </li>
</ul>

我们可以使用Mustache符号渲染每个item 或task 。我们通过使用那些双大括号来使用Mustache符号。

目前，它只显示任务的ID和名称。但我们也可以显示它是否完成，如下所示。

{{ task.id }}. {{ task.name }} - {{ task.finished}}

然而，我们将在本教程的后面使用该字段作其他用途。如果我们保存代码并运行该应用程序，我们应该看到如下内容。

你可以看到任务在页面上被呈现出来，每个任务都有一个ID和一个名字。

唯一的键

你可能已经注意到下面这段代码了:

:key="task.id"

建议我们在循环浏览列表时使用:key 属性。原因是这样，每个DOM元素都有一个唯一的键。因此，Vue可以跟踪每个节点的身份，以重复使用和重新排序现有的元素。因此，它也提高了应用程序的性能。

通常情况下，我们使用项目的ID作为:key 属性，就像上面的例子。

查看这个gist，看看App.vue 文件到现在应该是什么样子。

条件性渲染

在某些情况下，我们想根据一个特定的条件在页面上显示一些东西。因此，我们可以使用v-if 指令，根据一个条件来渲染一段代码。

只有当所提供的表达式返回一个真实的值时，该代码块才会被渲染。例如，在我们在本教程中构建的应用程序中，我们可能希望在完成一项任务后显示一个删除任务按钮。这样，我们就可以在完成一个任务后删除它了。

让我们来添加删除任务的按钮。转到App.vue 文件，在无序列表中添加以下代码:

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
    </li>
</ul>

你可以看到新的div ，其中有v-if 指令。它的目的是检查任务是否已经完成。如果任务完成了，它显示删除按钮。如果任务没有完成，该按钮就会被隐藏。

去把task 数组中的任何任务的finished 字段改为true。之后，刷新应用程序，我们应该看到删除按钮。

如果你遵循所有的步骤，这就是你应该看到的。

[caption id="attachment_185492" align="alignnone" width="973"] Figure 6: Vue conditional rendering 图6：Vue条件渲染[/caption]

当我们想根据一个条件来渲染一些东西时，v-if 指令是很方便的。

在继续之前，重要的是要注意，我们也可以使用v-else-if 和v-else 。例如，我们可以有与此类似的东西。

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
        <div v-else-if="task.edit">
            <button>Edit task</button>
        </div>
        <div v-else>
            <p>No button</>
        </div>
    </li>
</ul>

你可以看到条件渲染是多么强大。然而，在本教程中，我们只使用v-if 。

查看这个gist，看看App.vue 文件到这里应该是什么样子。

处理用户输入

下一步是处理用户的输入。首先，到App.vue 文件中，在应用程序的标题下添加以下HTML代码。

<h2>Add a new task</h2>

<div>
   <input type="text"
     v-model="newTask"
     placeholder="Add a new task"
   >
</div>

<div v-if="newTask.length > 0">
   <h3>New task preview</h3>
   <p>{{ newTask }}</p>
</div>

在上面的代码片段中，我们添加了一个文本输入，允许用户添加新任务。另外，你会注意到v-model 指令。v-model 指令使我们能够在输入字段和应用程序状态之间建立双向绑定。(你可以在 "理解Vue 3的新反应性系统"中了解更多关于v-model ）。

在我们试用代码之前，在Vue实例中添加newTask 字段，如下所示。

return {
      title: 'My To Do App',
      newTask: '',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }

如果我们运行应用程序并在输入框中输入任何东西，我们就会看到文本出现在输入框下。

在上面的代码中，我们在HTML代码中添加了<p>{{ newTask }}</p> ，它代表 "newTask "字段。因此，每当我们在输入框中添加任何东西时，它就会被更新并呈现在页面上。它出现在输入字段下面。

Vue 3的初学者指南