JavaScript

Vue 3初学者指南

Vue.js

2021年5月26日

分享<按钮aria-label="Share Sitepoint on facebook" data-network="facebook" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black">

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

我们将介绍如何:

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

我们将首先使用CLI创建一个框架应用程序。

使用Vue CLI创建应用

Vue命令行界面允许我们从头创建和配置新的Vue项目。也就是说，CLI代替我们自己添加包和配置。

让我们安装Vue命令行界面。

安装Vue CLI

本教程假设您的计算机上没有安装Vue CLI。执行如下命令安装:

npmI -g @vue/cli

或者，你也可以使用Yarn安装它，如下所示:

纱全球<跨度class="token function">添加@vue / cli

运行上述任何命令后，安装开始，将花费几秒钟或几分钟的时间。安装完成后，您可以使用以下命令创建项目:

Vue创建你的项目名称

的`vue创建`命令

一旦我们运行vue创建指挥官，我们会被提示一些问题。这些问题的目的是配置项目以满足我们的需求。

图1:Vue CLI欢迎屏幕

上面的图1显示了运行时的欢迎屏幕Vue创建你的项目名称．然后我们必须在三个不同的选项中做出选择:

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

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

图2:使用Vue CLI配置Vue项目

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

<李>添加单元和端到端测试到我们的项目<李>为项目选择筛选器/格式化器<李>添加Vuex、TypeScript、Router等选项

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

图3:在Vue CLI中选择Vue版本

最后，我们需要根据我们在第一步中选择的特性回答更多的问题，如图2所示。

在进一步讨论之前，我想确保我们的想法是一致的:

运行Vue创建ve3 -fundamentals在你的终端。<李>选择“手动选择功能”。<李>取消所有功能，除了巴别塔．对于本教程，我们不需要任何额外的特性。<李>选择Vue版本3。<李>当它询问你在哪里放置Babel的配置时，选择“在专用配置文件中”，等等。<李>不要为将来的项目保存预设。

在遵循以上步骤之后，项目结构应该如下图4所示。

图4:我们的Vue 3项目结构

以上就是项目配置的全部内容!现在我们已经准备好学习Vue了!

如果您想查看关于CLI的更全面的文章，请查看这个Vue CLI文章．

准备申请

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

现在去App.vue的所有引用存档并删除HelloWorld从文件中。另外，删除带有Vue标志的图像。最后，修改导出默认值{}代码块。

的完整代码App.vue下图:

<模板<跨度class="token punctuation">><跨度class="token tag"><h1<跨度class="token punctuation">>｛｛标题｝｝<跨度class="token tag">h1<跨度class="token punctuation">><跨度class="token tag">模板<跨度class="token punctuation">><跨度class="token tag"><脚本<跨度class="token punctuation">><跨度class="token script">出口<跨度class="token keyword module">默认的<跨度class="token punctuation">｛<跨度class="token function">数据<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">返回<跨度class="token punctuation">｛标题<跨度class="token operator">：<跨度class="token string">“My To Do App”<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token tag">脚本<跨度class="token punctuation">>

建立一个标题属性并在模板中显示它。

列表呈现

我们将介绍的第一个概念是如何在Vue应用程序中呈现列表。然而，在此之前，我们需要一个列表。

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

<脚本<跨度class="token operator">><跨度class="token keyword module">出口<跨度class="token keyword module">默认的<跨度class="token punctuation">｛<跨度class="token function">数据<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">返回<跨度class="token punctuation">｛标题<跨度class="token operator">：<跨度class="token string">“My To Do App”<跨度class="token punctuation">，任务<跨度class="token operator">：<跨度class="token punctuation">［<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">1<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“学习Vue JS”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">2<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“构建Vue应用程序”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">3.<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">写一篇关于Vue JS的文章<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">］<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token operator"><<跨度class="token operator">/脚本<跨度class="token operator">>

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

一个ID

一个名字

完场

下一步是循环数组并在页面上呈现它。在Vue中，我们可以使用v代表指令。的v代表Directive的形式是任务中的任务，其中任务表示数组中的单个项，而任务表示数组。

我们可以看到v代表下面代码片段中的指令:

<ul<跨度class="token punctuation">><跨度class="token tag"><李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂任务中的任务<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛task.id｝｝。{{task.name}}<跨度class="token tag">李<跨度class="token punctuation">><跨度class="token tag">ul<跨度class="token punctuation">>

我们可以渲染项或任务使用胡子符号。我们用双花括号来表示小胡子。

目前，它只显示任务的ID和名称。但我们也可以用下面的方式来表示它是否完成:

｛<跨度class="token punctuation">｛任务<跨度class="token punctuation">．<跨度class="token property-access">id<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token punctuation">．<跨度class="token punctuation">｛<跨度class="token punctuation">｛任务<跨度class="token punctuation">．<跨度class="token property-access">的名字<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token operator">-<跨度class="token punctuation">｛<跨度class="token punctuation">｛任务<跨度class="token punctuation">．<跨度class="token property-access">完成了<跨度class="token punctuation">｝<跨度class="token punctuation">｝

但是，我们将在本教程的后面部分将该字段用于其他目的。如果我们保存代码并运行应用程序，我们应该会看到如下内容:

图5:使用v-for指令在Vue中呈现列表

您可以看到，任务呈现在页面上，并且每个任务都有一个ID和名称。

唯一键

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

：关键<跨度class="token operator">＝<跨度class="token string">“task.id”

建议我们使用:关键属性。原因是每个DOM元素都有一个唯一的键。因此，Vue可以跟踪每个节点的标识，以重用和重新排序现有元素。因此，它还提高了应用程序的性能。

通常，我们使用项目的ID:关键属性，如上面的示例所示。

检查这个要点来看看App.vue文件应该查找到这一点。

有条件的呈现

在某些情况下，我们希望基于特定条件在页面上显示某些内容。因此，我们可以使用v指令根据条件呈现一段代码。

只有当提供的表达式返回真值时，才会呈现代码块。例如，在本教程中构建的应用程序中，我们可能需要一个删除任务完成任务后显示的按钮。因此，当我们完成任务时，我们可以删除它。

让我们加入删除任务按钮。去App.vue文件并在无序列表中添加以下代码:

<ul<跨度class="token punctuation">><跨度class="token tag"><李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂任务中的任务<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛任务。id}}。{{task.name}}<跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag">李<跨度class="token punctuation">><跨度class="token tag">ul<跨度class="token punctuation">>

你可以看到新的div与v指令。它的目的是检查任务是否完成。如果任务完成，它会显示删除按钮。如果任务未完成，则隐藏按钮。

去换一下完成了字段上的任何任务任务数组设为true。在此之后，刷新应用程序，我们应该会看到delete按钮。

如果你遵循了所有的步骤，下面是你应该看到的:

图6:Vue条件呈现

的v当我们想要基于条件渲染某些东西时，指令是很方便的。

在继续之前，重要的是要注意我们可以使用v-else-if而且v-else了。例如，我们可以有类似这样的东西:

<ul<跨度class="token punctuation">><跨度class="token tag"><李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂任务中的任务<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛任务。id}}。{{task.name}}<跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag"><div<跨度class="token attr-name">v-else-if<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.edit<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>编辑任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag"><div<跨度class="token attr-name">v-else<跨度class="token punctuation">><跨度class="token tag"><p<跨度class="token punctuation">>没有按钮< / ><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag">李<跨度class="token punctuation">><跨度class="token tag">ul<跨度class="token punctuation">>

您可以看到条件呈现是多么强大。但是，在本教程中，我们只使用v．

检查这个要点来看看App.vue文件应该查找到这一点。

处理用户输入

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

<h2<跨度class="token punctuation">>添加一个新任务<跨度class="token tag">h2<跨度class="token punctuation">><跨度class="token tag"><div<跨度class="token punctuation">><跨度class="token tag"><输入<跨度class="token attr-name">类型<跨度class="token attr-value">＝<跨度class="token punctuation">＂文本<跨度class="token punctuation">＂<跨度class="token attr-name">v模型<跨度class="token attr-value">＝<跨度class="token punctuation">＂newTask<跨度class="token punctuation">＂<跨度class="token attr-name">占位符<跨度class="token attr-value">＝<跨度class="token punctuation">＂添加一个新任务<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂newTask。长度>0<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><h3<跨度class="token punctuation">>新任务预览<跨度class="token tag">h3<跨度class="token punctuation">><跨度class="token tag"><p<跨度class="token punctuation">>｛｛newTask｝｝<跨度class="token tag">p<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">>

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

在测试代码之前，先添加newTask字段，如下所示:

返回<跨度class="token punctuation">｛标题<跨度class="token operator">：<跨度class="token string">“My To Do App”<跨度class="token punctuation">，newTask<跨度class="token operator">：<跨度class="token string">”<跨度class="token punctuation">，任务<跨度class="token operator">：<跨度class="token punctuation">［<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">1<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“学习Vue JS”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">2<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“构建Vue应用程序”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">3.<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">写一篇关于Vue JS的文章<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">］<跨度class="token punctuation">｝

如果我们运行应用程序并在输入字段中输入任何内容，我们将看到文本出现在输入字段下。

图7:Vue处理用户输入

在上面的代码中，我们添加了

. {{newTask}}

. {{newTask}在HTML代码中，它表示“newTask”字段。因此，每当我们在输入字段中添加任何内容时，它都会被更新并在页面上呈现。它出现在输入字段下。

检查这个要点来看看App.vue文件应该查找到这一点。

方法

在学习如何处理用户事件之前，我们需要了解方法。原因是我们将使用方法来处理这些用户事件。

所有Vue实例都有一个名为方法，在这里我们添加了所有的方法。例如，我们将添加一个按钮，允许我们添加任务。因此，我们将该按钮的逻辑封装在方法中，并将其添加到方法字段。

打开文件Vue.app并在后面添加以下代码数据()：

方法<跨度class="token operator">：<跨度class="token punctuation">｛<跨度class="token function">addTask<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">如果<跨度class="token punctuation">（<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">newTask<跨度class="token punctuation">．<跨度class="token property-access">长度<跨度class="token operator"><<跨度class="token number">1<跨度class="token punctuation">)<跨度class="token keyword control-flow">返回<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">任务<跨度class="token punctuation">．<跨度class="token method function property-access">推<跨度class="token punctuation">（<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">任务<跨度class="token punctuation">．<跨度class="token property-access">长度<跨度class="token operator">+<跨度class="token number">1<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">newTask<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">)<跨度class="token punctuation">；<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">newTask<跨度class="token operator">＝<跨度class="token string">”<跨度class="token punctuation">｝<跨度class="token punctuation">｝

上面的代码只在用户在输入字段中输入内容并清除该字段时才添加任务。这是为了防止在任务列表中输入空字符串。

现在，我们可以用addTask ()方法，就像在任何其他应用程序中一样。我们调用该方法，该方法将运行，这正是下一步的内容。

请注意:应用程序将有两个以上的方法:

<李>删除任务<李>完成任务(切换任务的开启和关闭)

但是，出于可读性考虑，我将它们从上面的代码片段中排除，但是您将在要点中看到它们。你可以看到这个要点的完整代码App.vue到目前为止。

处理用户事件

现在您知道了方法是关于什么的，现在是时候学习如何处理用户事件了。例如，当用户单击添加任务按钮?

我们可以向该按钮添加一个事件监听器。在Vue中，我们可以使用v指令。当触发用户单击按钮等事件时，应用程序将运行指定的方法。

让我们看看它的实际情况。去App.vue文件并在输入字段下添加一个按钮。我们应该有以下代码:

<div<跨度class="token punctuation">><跨度class="token tag"><输入<跨度class="token attr-name">类型<跨度class="token attr-value">＝<跨度class="token punctuation">＂文本<跨度class="token punctuation">＂<跨度class="token attr-name">v模型<跨度class="token attr-value">＝<跨度class="token punctuation">＂newTask<跨度class="token punctuation">＂<跨度class="token attr-name">占位符<跨度class="token attr-value">＝<跨度class="token punctuation">＂添加一个新任务<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token attr-name">@click<跨度class="token attr-value">＝<跨度class="token punctuation">＂addTask<跨度class="token punctuation">＂<跨度class="token attr-name">:禁用<跨度class="token attr-value">＝<跨度class="token punctuation">＂newTask。长度<1<跨度class="token punctuation">＂<跨度class="token punctuation">>添加任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂newTask。长度>0<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><h3<跨度class="token punctuation">>新任务预览<跨度class="token tag">h3<跨度class="token punctuation">><跨度class="token tag"><p<跨度class="token punctuation">>｛｛newTask｝｝<跨度class="token tag">p<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">>

观察@click = " addTask "代码。的v指令有一个简写符号，就是@的象征。因此，代替写作v:点击，我们可以把它写成如上所示。

点击添加任务按钮触发该方法addTask ()，添加任务。因此，使用v指令，我们可以监听用户事件，并在它们被触发时调用特定的方法。

图8:禁用按钮

在图8中，您可以看到新创建的按钮。起初，它是禁用的，但一旦我们开始输入，它就工作了!

看到这个要点的完整代码App.vue到目前为止。

计算属性

Vue中另一个方便的特性是计算属性。它们类似于方法，除了它们不应该变异的数据。但是，计算属性对于操纵数据和在应用程序中重用数据非常有用。

对于这个应用程序，我们将添加两个计算属性:

<李>返回所有任务的数量。<李>按相反顺序返回任务数组的函数。为什么?我们需要它在列表顶部显示最新的任务。

因此,在App.vue，将以下代码添加到方法属性:

计算<跨度class="token operator">：<跨度class="token punctuation">｛<跨度class="token function">allTasks<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">返回<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">任务<跨度class="token punctuation">．<跨度class="token property-access">长度<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token function">最新的<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">返回<跨度class="token punctuation">［<跨度class="token spread operator">.．.<跨度class="token keyword">这<跨度class="token punctuation">．<跨度class="token property-access">任务<跨度class="token punctuation">］<跨度class="token punctuation">．<跨度class="token method function property-access">反向<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｝<跨度class="token punctuation">｝

你可能已经注意到最新的()Computed属性返回一个新的反向数组。如前所述，计算属性不应该改变现有数据。

同样，当我们使用计算属性时，使用返回关键字。如果我们不返回东西，它就不会工作!现在我们可以使用新创建的属性了。

在我们的模板中，找到“Add a new task”部分，并在下面添加以下一行:

<跨度<跨度class="token punctuation">>你有{{allTasks}} {{allTasks > 1 ?'tasks': 'task'}}<跨度class="token tag">跨度<跨度class="token punctuation">>

上面一行显示了列表中的所有任务。此外，它还根据任务的数量决定何时使用“任务”或“任务”。

最后，转到循环遍历任务数组并进行更改的代码段任务中的任务来最新任务．现在我们的代码应该是这样的:

<ul<跨度class="token punctuation">><跨度class="token tag"><李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂（任务，索引)在最新<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛index + 1}}。{{task.name}}<跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag">李<跨度class="token punctuation">><跨度class="token tag">ul<跨度class="token punctuation">>

我们现在循环最新的，现在我们也有了一个“index”字段。新字段用于显示任务在列表中的位置。

图9:运行中的计算属性

图9演示了实际的计算属性。您可以看到它显示了任务的总数，并且还按添加的顺序显示了任务。

计算属性与方法

在进一步讨论之前，我想再次强调，它们是相似的，但又不同。我们应该使用方法来改变数据而且使用表示层的计算属性．

改变计算属性中的数据可能导致难以发现的错误。

检查这个要点来看看App.vue文件应该查找到这一点。

属性绑定

方法将HTML属性绑定到Vue数据v-bind指令。也就是说，我们可以为属性使用动态值，而不是硬编码的值。

让我们通过添加标识来使用属性绑定。去Vue.app并添加两个新字段，logoURL而且logoCaption．我们的代码应该如下所示:

数据<跨度class="token punctuation">（<跨度class="token punctuation">)<跨度class="token punctuation">｛<跨度class="token keyword control-flow">返回<跨度class="token punctuation">｛标题<跨度class="token operator">：<跨度class="token string">“My To Do App”<跨度class="token punctuation">，newTask<跨度class="token operator">：<跨度class="token string">”<跨度class="token punctuation">，logoURL<跨度class="token operator">：<跨度class="token string">“https://images.unsplash.com/photo - 1507925921958 - 8 a62f3d1a50d?ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8&ixlib=rb 1.2.1&auto=format&fit=crop&w=1955&q=80”<跨度class="token punctuation">，logoCaption<跨度class="token operator">：<跨度class="token string">“一张凯利·锡科玛在Unsplash上展示便利贴的照片”<跨度class="token punctuation">，任务<跨度class="token operator">：<跨度class="token punctuation">［<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">1<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“学习Vue JS”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">2<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">“构建Vue应用程序”<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">，<跨度class="token punctuation">｛id<跨度class="token operator">：<跨度class="token number">3.<跨度class="token punctuation">，的名字<跨度class="token operator">：<跨度class="token string">写一篇关于Vue JS的文章<跨度class="token punctuation">，完成了<跨度class="token operator">：<跨度class="token boolean">假<跨度class="token punctuation">｝<跨度class="token punctuation">］<跨度class="token punctuation">｝<跨度class="token punctuation">｝<跨度class="token punctuation">，

然后，在同一文件中添加以下HTMLimg元素:

<img<跨度class="token attr-name">: src<跨度class="token attr-value">＝<跨度class="token punctuation">＂logoURL<跨度class="token punctuation">＂<跨度class="token attr-name">: alt<跨度class="token attr-value">＝<跨度class="token punctuation">＂logoCaption<跨度class="token punctuation">＂<跨度class="token attr-name">宽度<跨度class="token attr-value">＝<跨度class="token punctuation">＂200<跨度class="token punctuation">＂<跨度class="token attr-name">高度<跨度class="token attr-value">＝<跨度class="token punctuation">＂200<跨度class="token punctuation">＂<跨度class="token punctuation">/>

的冒号: src而且: alt属性。它们是v-bind．因此，代替写作v-bind: src，我们写它: src．

假设我们在多个地方使用标识，而没有单独的组件。这意味着复制粘贴相同的内容img在多个位置标记。如果我们想改变商标，我们将不得不在许多地方做出改变。但是，通过使用属性绑定，我们只需要在Vue实例中进行一个更改。

下面的图像说明了一个例子-使用img元素。但是，我们也可以将属性绑定与其他HTML元素一起使用。例如，我们可以把它和href元素也是。

图10:Vue中的HTML属性绑定

图10演示了运行中的图像!

检查这个要点来看看App.vue文件应该查找到这一点。

动态的CSS

在Vue中，我们可以使用动态CSS。这意味着是否使用一个类是由数据属性决定的。来自待办事项应用程序的一个示例是添加类加删除线当任务完成时。

去App.vue文件并添加:类属性后的@click属性。请看下面的代码:

<ul<跨度class="token punctuation">><跨度class="token tag"><李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂（任务，索引)在最新<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token attr-name">@click<跨度class="token attr-value">＝<跨度class="token punctuation">＂finishTask(任务)<跨度class="token punctuation">＂<跨度class="token attr-name">:类<跨度class="token attr-value">＝<跨度class="token punctuation">＂｛加删除线：任务。完成了}<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛index + 1}}。{{task.name}}<跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag">李<跨度class="token punctuation">><跨度class="token tag">ul<跨度class="token punctuation">>

还有，在结尾App.vue，添加如下一点CSS:

<风格<跨度class="token punctuation">><跨度class="token style">.strikeout<跨度class="token punctuation">｛<跨度class="token property">文字修饰<跨度class="token punctuation">：线穿过<跨度class="token punctuation">；<跨度class="token punctuation">｝<跨度class="token tag">风格<跨度class="token punctuation">>

那么，现在发生了什么?在上面的代码中，我们还添加了一个用户事件-@click = " finishTask(任务)”．这意味着我们可以单击任务来完成它。该方法finishTask(任务)切换的完成了字段为true/false。如果完成了字段设置为true时，则加删除线类被添加。

Vue中的动态CSS

图11说明了单击任务时会发生什么。因此，动态CSS非常适合这样的场景。

需要注意的是，如果要添加多个动态类，可以使用数组表示法。我们可以这样做:

<李<跨度class="token attr-name">v代表<跨度class="token attr-value">＝<跨度class="token punctuation">＂（任务，索引)在最新<跨度class="token punctuation">＂<跨度class="token attr-name">:关键<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.id<跨度class="token punctuation">＂<跨度class="token attr-name">@click<跨度class="token attr-value">＝<跨度class="token punctuation">＂finishTask(任务)<跨度class="token punctuation">＂<跨度class="token attr-name">:类<跨度class="token attr-value">＝<跨度class="token punctuation">＂（任务。完成了吗?<跨度class="token punctuation">＇加删除线<跨度class="token punctuation">＇：<跨度class="token punctuation">＇<跨度class="token punctuation">＇、任务。postponed ?<跨度class="token punctuation">＇text-gray<跨度class="token punctuation">＇：<跨度class="token punctuation">＇<跨度class="token punctuation">＇，<跨度class="token punctuation">＇简单的类<跨度class="token punctuation">＇］<跨度class="token punctuation">＂<跨度class="token punctuation">>｛｛index + 1}}。{{task.name}}<跨度class="token tag"><div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">><跨度class="token tag">李<跨度class="token punctuation">>

因此，通过这种方式，我们可以基于多个条件添加多个动态类。此外，我们可以在数组中添加静态类。看到简单的类以上。

检查这个要点来看看App.vue文件应该查找到这一点。

最后的触动

完成应用程序还剩下两件事:

输入

打开文件App.vue然后求出输入域。找到后，添加以下代码:

<输入类型<跨度class="token operator">＝<跨度class="token string">“文本”v<跨度class="token operator">-模型<跨度class="token operator">＝<跨度class="token string">“newTask”@关键up<跨度class="token punctuation">．<跨度class="token property-access">输入<跨度class="token operator">＝<跨度class="token string">“addTask”占位符<跨度class="token operator">＝<跨度class="token string">“添加新任务”<跨度class="token operator">>

你会注意到@keyup.enter，调用该方法addTask当用户按下输入关键。

其次，在我们的应用程序中找到delete按钮，并添加以下代码:

<div<跨度class="token attr-name">v<跨度class="token attr-value">＝<跨度class="token punctuation">＂task.finished<跨度class="token punctuation">＂<跨度class="token punctuation">><跨度class="token tag"><按钮<跨度class="token attr-name">@click<跨度class="token attr-value">＝<跨度class="token punctuation">＂removeTask（task.id)<跨度class="token punctuation">＂<跨度class="token punctuation">>删除任务<跨度class="token tag">按钮<跨度class="token punctuation">><跨度class="token tag">div<跨度class="token punctuation">>

现在它监听单击事件，每当删除任务按钮被单击，它将触发该方法removeTask．它还传递任务的ID，因此它知道要删除哪个任务。

现在我们可以通过按进入任务输入键，我们还可以删除任务。

检查这个要点来看看App.vue文件应该查找到这一点。

结论

构建第一个应用程序做得很好!从这里，您可以深入了解Vue组件，Vue路由器和其他概念!

你可以在这里找到整个应用程序。final-app.vue“要点。如果您想尝试一下，只需将所有代码复制到您的App.vue文件。

Jump Start Vue.js, 2e＂><noscript>
<img data-gatsby-image-ssr=

使用Vue CLI创建应用

的vue创建命令

准备申请

列表呈现

有条件的呈现

处理用户输入

方法

处理用户事件

计算属性

属性绑定

动态的CSS

最后的触动

结论

的`vue创建`命令