Vue 简介

Vue 是一个JavaScript 框架。可以使用 <script> 标记将其添加到 HTML 页面。

Vue 扩展了 HTML 属性指令，并将数据绑定到 HTML表达式。

Vue 是一个 JavaScript 框架

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

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

Vue 作为 JavaScript 文件分发，可以使用 script 标签添加到网页中：

为什么要学习Vue？

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

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

选项 API

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

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

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

看一眼这一页阅读本教程末尾的部分，了解有关选项 API 和组合 API 之间差异的更多信息。

我的第一页

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

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

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

第 1 步：HTML 页面

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>

</body>
</html>

第 2 步：添加 <div>

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

放一个<div>标签里面的<body>标记并给它一个 id：

第 3 步：添加 Vue 的链接

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

第四步：添加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>

浏览器将交换{{ message }}文本存储在 Vue 实例内的“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遵循本教程。

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

码农教程 - 一技在手,衣食无忧!