简介

为什么学习 Vue?

• 简单易用。
• 它能够处理简单和复杂的项目。
• 其日益普及和开源社区的支持。
• 在普通 JavaScript 中，我们需要编写 HOW HTML 和 JavaScript 连接，但在 Vue 中，我们只需要确保存在 IS 连接，然后让 Vue 处理其余的事情 。
• 它通过基于模板的语法、双向数据绑定和集中状态管理实现更高效的开发流程。

如果其中一些要点难以理解，请不要担心，在教程结束时您会理解的。

选项 API

在 Vue 中编写代码有两种不同的方式:选项 API 和组合 API。

选项 API 和组合 API 的基本概念是相同的，因此在学习其中一个 API 后，您可以轻松切换到另一个。

选项 API 是本教程中编写的内容，因为它被认为对初学者更友好，具有更易于识别的结构。

查看本教程末尾的此页面，了解有关选项 API 和组合 API 之间差异的更多信息。

我的第一个网页

我们现在将学习如何通过 5 个基本步骤创建我们的第一个 Vue 网页:

1. 从基本的 HTML 文件开始。
2. 添加带有 id="app" 的
   标签，以便 Vue 进行连接。
3. 通过添加带有 Vue 链接的

   ---

   第 4 步:添加 Vue 实例

   现在我们需要添加 Vue 代码。

   这称为Vue实例，可以包含数据和方法以及其他东西，但现在它只包含一条消息。

   在此

   ---

   第 5 步:使用文本插值显示"消息"

   最后，我们可以使用文本插值，一种带有双大括号{{ }}的Vue语法作为数据的占位符。

   {{ message }}

   浏览器将与 Vue 实例内"message"属性中存储的文本交换 {{ message }}。

   这是我们的第一个 Vue 页面:

   示例:我的第一个 Vue 页面！

   使用下面的"亲自尝试"按钮测试此代码。

      
       {{ message }}  
       »

   ---

   文本插值

   文本插值是指从 Vue 实例中获取文本以显示在网页上。

   浏览器接收到包含此代码的页面:

   {{ message }}

   然后浏览器在 Vue 实例的 'message' 属性中找到文本，并将 Vue 代码翻译成这样:

   Hello World!

   ---

   文本插值中的 JavaScript

   简单的JavaScript表达式也可以写在双花括号{{ }}内。

   示例

   使用 JavaScript 语法向 div 元素内的消息添加随机数:

     {{ message }}
     {{'Random number: ' + Math.ceil(Math.random()*6) }}
   »

   ---

   开始使用

   本教程将教您 Vue 的基础知识。

   您需要具备 HTML、CSS 和 JavaScript 方面的基本经验才能学习本教程。

   单击"下一步"按钮继续本教程。

   ---

   Vue 练习

   通过练习测试自己

   练习题:

   使用文本插值来显示"message"数据属性值。

   ---