第 1 部分：Vue 入门

您将在本文中了解 vue 基础知识以及它们的工作原理，如果您在理解此处解释的任何概念时遇到困难，请参阅文档。本文仅基于 Vue 2，因为大多数代码库仍然是 Vue 2 代码库。但是，我打算在本系列中添加一个额外内容，解释如何将 Vue 2 应用程序迁移到 Vue 3 应用程序。

什么是 vue js 以及为什么要使用它？

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在逐步采用，这意味着开发人员可以将其集成到现有项目中或将其用于新项目。Vue.js 以简单、易用和灵活着称。

反应性是 Vue.js 的主要优势之一；它允许对数据所做的更改自动更新用户界面。因此，开发人员可以创建更复杂和动态的应用程序，而不必担心手动更新 DOM。

此外，Vue.js 具有易于管理的学习曲线，使其成为所有经验水平的开发人员的绝佳选择。它还拥有一个规模庞大且充满活力的社区，可提供多种服务和帮助。

设置你的开发环境？

首先，您的 PC 上是否安装了 Vue？（个人计算机）如果是，那太好了！如果还没有，请不要惊慌。这是vue 文档中关于如何安装 vue js 的指南。

创建你的第一个 VueJS 应用程序

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">//There's no need to add the square bracket.</span>
<span style="color:var(--syntax-name-color)">vue</span> <span style="color:var(--syntax-name-color)">create</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-declaration-color)">of</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">project</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span>

在您的终端上运行上面的代码，系统会提示您几个问题，询问您更喜欢哪种方法来创建应用程序。我建议您使用手动安装，以便更好地选择需要什么和不需要什么。
完成上述步骤后，您应该创建项目。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">cd</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-declaration-color)">of</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">project</span><span style="color:var(--syntax-text-color)">]</span>
</code></span></span>

CD 进入项目并在您喜欢的 IDE 中打开它。
惊人的！您已经创建了第一个 Vue 应用程序。

了解组件及其在 Vue.js 中的作用

组件背后的想法是为应用程序创建模块化和可重用的功能。如果你不明白，这里打个比方。
以拥有超过 10,000 本书但没有任何适当组织的学校图书馆为例。从您选择的作者那里得到一本书将是累人和乏味的。

这就是细分的用武之地。图书馆中的细分目录是一种将图书馆的馆藏组织成更小、更易于管理的组的方法。从本质上讲，它涉及根据一组特定的标准将图书馆的馆藏分解成更小的部分或类别。这可以通过将搜索范围缩小到特定部分来帮助用户更轻松地找到他们正在寻找的书籍。
现在将您的细分市场作为一个组成部分；这用于将大型应用程序分解为模块化或更小的部分。这将帮助您有效地管理您的应用程序。现在您已经了解了组件的含义，让我们看看为它创建一个示例。

要使用 Vue CLI 创建组件，您可以按照以下步骤操作：

• 导航到src/components项目目录中的文件夹。
• 为您的组件创建一个新的 .vue 文件，例如 MyComponent.vue。
• 在 MyComponent.vue 文件中，使用 Vue 单文件组件语法为您的组件定义模板、脚本和样式。

例如，一个简单的 MyComponent.vue 文件可能如下所示：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
   <span style="color:var(--syntax-error-color)"><div></span>
      <span style="color:var(--syntax-error-color)"><h1></span>{{ name }}<span style="color:var(--syntax-error-color)"></h1></span>
      <span style="color:var(--syntax-error-color)"><p></span>{{ email }}<span style="color:var(--syntax-error-color)"></p></span>
   <span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>

<span style="color:var(--syntax-error-color)"><script></span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">MyComponent</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Makanju Emmanuel</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">makurseme@gmail.com</span><span style="color:var(--syntax-string-color)">'</span>
      <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"></script></span>

<span style="color:var(--syntax-error-color)"><style </span><span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">/* styles g*/</span>
<span style="color:var(--syntax-error-color)"></style></span>
</code></span></span>

• 保存文件并将新组件导入到src/view/HomeView.vue您选择的任何组件中。 

就是这样！你现在知道如何创建一个新的 Vue 组件了。

Vue.js 中组件的作用是使创建可重用和模块化代码变得容易。通过将复杂的 UI 分解成更小的组件，开发人员可以更好地组织他们的代码并使其更易于维护。组件可以跨应用程序的不同部分使用，从而可以轻松地重用代码并节省时间。

通过道具和事件发射器传递数据

在使用组件时，最常见的事情是它们之间的通信，即可能是父子通信或子父子通信。
 
Props 是一种将数据从父组件传递到子组件的方法。父组件可以将数据绑定到子组件的 props，然后子组件可以使用它来呈现其模板。

要通过 props 传递数据，您可以按照以下步骤操作：

• 为此，我们将扩展我们的 HomeView.vue 页面。让我们把它作为我们的父组件，在这个视图文件中定义要传递给子组件的数据作为属性。
• 使用 v-bind 指令或简写将数据绑定到子组件的“MyComponentVue”道具：

例如：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
  <span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"home"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><MyComponentVue</span> <span style="color:var(--syntax-name-color)">:my-prop=</span><span style="color:var(--syntax-string-color)">"parentData"</span><span style="color:var(--syntax-error-color)">/></span>
  <span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>

<span style="color:var(--syntax-error-color)"><script></span>
<span style="color:var(--syntax-comment-color)">// @ is an alias to /src</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">MyComponentVue</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@/components/MyComponent.vue</span><span style="color:var(--syntax-string-color)">'</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">HomeView</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">(){</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">parentData</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">You are learning about props in this article</span><span style="color:var(--syntax-string-color)">'</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">components</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">MyComponentVue</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"></script></span>
</code></span></span>

• 在子组件中，定义要从父组件接收数据的道具。 

例如：
src/components/MyComponent

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
   <span style="color:var(--syntax-error-color)"><div></span>
      <span style="color:var(--syntax-error-color)"><h1></span>{{ name }}<span style="color:var(--syntax-error-color)"></h1></span>
      <span style="color:var(--syntax-error-color)"><p></span>{{ email }}<span style="color:var(--syntax-error-color)"></p></span>
      <span style="color:var(--syntax-error-color)"><p></span>{{ myProp }}<span style="color:var(--syntax-error-color)"></p></span>
   <span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>

<span style="color:var(--syntax-error-color)"><script></span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">MyComponent</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">myProp</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Makanju Emmanuel</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">makurseme@gmail.com</span><span style="color:var(--syntax-string-color)">'</span>
      <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"></script></span>

<span style="color:var(--syntax-error-color)"><style </span><span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">/* styles g*/</span>
<span style="color:var(--syntax-error-color)"></style></span>
</code></span></span>

事件发射器是子组件与父组件通信的一种方式。子组件可以发送带有数据的事件，父组件可以侦听和响应该事件。

要通过事件发射器传递数据，您可以按照以下步骤操作：

• 在子组件中，定义要发出的事件以及要随事件传递的数据。

例如：
src/components/MyComponent.vue

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
   <span style="color:var(--syntax-error-color)"><div></span>
      <span style="color:var(--syntax-error-color)"><h1></span>{{ name }}<span style="color:var(--syntax-error-color)"></h1></span>
      <span style="color:var(--syntax-error-color)"><p></span>{{ email }}<span style="color:var(--syntax-error-color)"></p></span>
      <span style="color:var(--syntax-error-color)"><p></span>{{ myProp }}<span style="color:var(--syntax-error-color)"></p></span>
      <span style="color:var(--syntax-error-color)"><button</span> @<span style="color:var(--syntax-name-color)">click=</span><span style="color:var(--syntax-string-color)">"sendMessage"</span><span style="color:var(--syntax-error-color)">></span>Send Message<span style="color:var(--syntax-error-color)"></button></span>
   <span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>

<span style="color:var(--syntax-error-color)"><script></span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">MyComponent</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">myProp</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Makanju Emmanuel</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">makurseme@gmail.com</span><span style="color:var(--syntax-string-color)">'</span>
      <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">methods</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
   <span style="color:var(--syntax-name-color)">sendMessage</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">$emit</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">message-sent</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Hello from child!</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">)</span>
   <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"></script></span>

<span style="color:var(--syntax-error-color)"><style </span><span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">/* styles g*/</span>
<span style="color:var(--syntax-error-color)"></style></span>
</code></span></span>

• 在父组件中，使用 v-on 指令或简写 @ 来监听子组件的事件。 

例如：
src/views/HomeView.vue

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
  <span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"home"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-error-color)"><MyComponentVue</span> @<span style="color:var(--syntax-name-color)">message-sent=</span><span style="color:var(--syntax-string-color)">"handleMessage"</span> <span style="color:var(--syntax-name-color)">:my-prop=</span><span style="color:var(--syntax-string-color)">"parentData"</span><span style="color:var(--syntax-error-color)">/></span>
    <span style="color:var(--syntax-comment-color)"><!-- render emit data --></span>
    <span style="color:var(--syntax-error-color)"><p></span>{{ newMsg }}<span style="color:var(--syntax-error-color)"></p></span>
  <span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>

<span style="color:var(--syntax-error-color)"><script></span>
<span style="color:var(--syntax-comment-color)">// @ is an alias to /src</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">MyComponentVue</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@/components/MyComponent.vue</span><span style="color:var(--syntax-string-color)">'</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">HomeView</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">components</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">MyComponentVue</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">(){</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">parentData</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">You are learning about props in this article</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">newMsg</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">methods</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">handleMessage</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">newMsg</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">message</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"></script></span>
</code></span></span>

• 在父组件的方法中，定义您希望如何处理通过事件传递的数据。

就是这样！您现在知道如何使用 props 和事件发射器在 Vue.js 中的组件之间传递数据。这些技术是在 Vue.js 应用程序中构建可重用和可维护组件的强大工具。

指令

Vue 指令是 Vue 预构建的特殊属性。您可以在 Vue 模板中使用它们来将动态行为应用于 HTML 元素。指令以 v-prefix 为前缀，并为它们所应用的元素提供额外的功能。

下面是一些常用的 Vue 指令 

v-model v-for v-if v-show v-bind  还有更多。

但是，您也可以创建满足您需求的自定义指令，并在平台的多个位置重复使用它们。要了解如何使用表单、列表呈现和条件呈现的基础知识，请访问 vue js 文档。我不会过多地介绍它们，因为它们在文档中可用，但提供了一个链接供您了解我们将在未来使用的所有有用元素。