Vue 介绍

Vue 是一个 JavaScript 框架。它可以添加到带有 <script> 标记的 HTML 页面中。

Vue 使用指令（ Directives ）扩展 HTML 属性，并使用表达式（Expressions ）将数据绑定到 HTML。

Vue 是一个 JavaScript 框架

Vue 是一个用 JavaScript 编写的前端 JavaScript 框架。

与 Vue 类似的框架有 React 和 Angular，但 Vue 更轻，更容易上手。

Vue 以 JavaScript 文件的形式分发，可以添加到带有脚本标记的网页中:

<script src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>

为什么要学习 Vue？

它简单易用。
它能够处理简单和复杂的项目。
它越来越受欢迎，并得到开源社区的支持。
在普通的 JavaScript 中，我们需要编写 HTML 和 JavaScript 是如何交互的，但在 Vue 中，我们只需要确保连接，并让 Vue 来处理其余部分。
它允许使用基于模板的语法、双向数据绑定和集中式状态管理进行更高效的开发过程。

如果其中一些要点很难理解，别担心，你会在教程结束时理解的。

Options API(选择式 API)

在 Vue 中有两种不同的代码编写方法：Options API(选择式 API)和 Composition API(组合式 API)。

Options API(选择式 API)和 Composition API(组合式 API) 的基本概念是相同的，因此在学习其中一个之后，您可以轻松地切换到另一个。

选择式 API 是本教程中编写的内容，因为它被认为更友好，是具有更可识别的结构。

看看本教程结尾的这个这个页面，了解更多关于 Options API(选择式 API)和 Composition API(组合式 API) 的差异。

我的第一个 Vue 页面

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

从一个基本的 HTML 文件开始。
添加一个 id="app" 的 <div> 标签，供 Vue 连接。
通过添加带有 Vue 链接的 <script> 标记，告诉浏览器如何处理 Vue 代码。
添加一个 <script> 标记，其中包含 Vue 实例。
将 Vue 实例连接到 <div id="app"> 标记。

下面详细描述了这些步骤:

步骤 1: HTML 页面

用这个简单 html 页面开始:

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个 vue 页面</title>
</head>
<body>
</body>
</html>

步骤 2: 添加一个 <div> 标签

Vue 需要在您的页面上有一个 HTML 元素才能连接到。

在 <body> 标记中放入一个 <div> 标记，并给它一个 id：

<body>
  <div id="app"></div>
</body>

步骤 3: 给 Vue 添加一个链接

为了帮助我们的浏览器解释 Vue 代码，请添加以下 <script> 标记

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

步骤 4: 添加 Vue 实例

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

这被称为 Vue 实例（Vue instance），可以包含数据、方法和其他内容，但现在它只包含一条消息。

在这个 <script> 标签的最后一行，我们的 Vue 实例连接到 <div id="app"> 标签：

<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    }
  })
 app.mount('#app')
</script>

步骤 5: 使用文本插值（text interpolation）显示 message 消息

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

<div id="app"> {{ message }} </div>

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

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

实例: 我们的第一个 Vue 页面!

点击 "试一试" 按钮测试代码

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue page</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "Hello World!"
        }
      }
    })
   app.mount('#app')
  </script>
</body>
</html>

运行一下

文本插值（Text Interpolation）

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

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

<div id="app"> {{ message }} </div>

然后浏览器在 Vue 实例的 message 属性中找到文本，并将 Vue 代码转化为:

<div id="app">Hello World!</div>

文本插值中的 JavaScript

简单的 JavaScript 代码也可以写在双大括号 {{ }} 中。

实例

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

<div id="app">
  {{ message }} <br>
  {{'Random number: ' + Math.ceil(Math.random()*6) }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    }
  })
 app.mount('#app')
</script>