手册

Vue教程

简介指令 v-bind v-if 条件语句 v-show v-for 循环语句事件 v-on 方法事件修饰符表单 v-model CSS 绑定 Computed 计算属性观察者模板

Vue参考

内置属性组件实例

首页大前端 Vue.js Vue 教程

简介

阅读24189

更新时间2025-08-22

指令

为什么学习 Vue?

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

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

选项 API

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

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

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

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

我的第一个网页

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

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

下面详细描述了这些步骤，最后在"亲自尝试"示例中提供了完整代码。

第 1 步:HTML 页面

从一个简单的 HTML 页面开始:

<!DOCTYPE html> <html lang="en"> <head> <title>我的第一个 Vue 页面</title> </head> <body> </body> </html>

第 2 步:添加 <div>

Vue 需要页面上的 HTML 元素才能连接。

在 <body> 标签内放入 <div> 标签并为其指定 id:

第 3 步:添加 Vue 链接

为了帮助我们的浏览器解释我们的 Vue 代码，请添加这个 <script> 标签:

第 4 步:添加 Vue 实例

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

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

在此 <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 步:使用文本插值显示"消息"

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

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

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

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

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

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

<!DOCTYPE html> <html lang="en"> <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> »

文本插值

文本插值是指从 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> »

开始使用

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

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

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

Vue 练习

通过练习测试自己

练习题:

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

<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>

指令