Vue 简介
Vue 是一个 **JavaScript 框架**。它可以通过一个 <script> 标签添加到 HTML 页面中。
Vue 使用 **指令** 扩展 HTML 属性，并使用 **表达式** 将数据绑定到 HTML。
Vue 是一个 JavaScript 框架
Vue 是一个用 JavaScript 编写的 前端 JavaScript 框架。
与 Vue 类似的框架还有 React 和 Angular，但 Vue 更轻量级，更易于入门。
Vue 以 JavaScript 文件的形式分发，可以通过 script 标签添加到网页中
<script
src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
为什么学习 Vue？
- 它简单易用。
- 它能够处理简单和复杂的项目。
- 它日益增长的流行度和开源社区支持。
- 在普通的 JavaScript 中，我们需要编写 **如何** 连接 HTML 和 JavaScript，但在 Vue 中，我们只需要确保 **有** 连接，剩下的交给 Vue 处理。
- 它允许使用基于模板的语法、双向数据绑定和集中式状态管理，从而提高开发效率。
如果其中一些点难以理解，不用担心，在完成本教程后你会明白的。
选项 API
在 Vue 中有两种不同的方法来编写代码：选项 API 和组合式 API。
选项 API 和组合式 API 的底层概念是相同的，因此学习完一个之后，就可以轻松地切换到另一个。
本教程中使用的是选项 API，因为它被认为更适合初学者，结构更易于识别。
在本教程结束后，可以参考 这个页面，了解有关选项 API 和组合式 API 之间的区别。
我的第一个页面
现在我们将学习如何用 5 个基本步骤创建第一个 Vue 网页。
- 从一个基本的 HTML 文件开始。
- 添加一个带有
id="app"的 <div> 标签，以便 Vue 连接。 - 通过添加一个带有指向 Vue 链接的 <script> 标签，告诉浏览器如何处理 Vue 代码。
- 添加一个带有 Vue 实例的 <script> 标签。
- 将 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
<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 实例**，它可以包含数据、方法和其他东西，但现在它只包含一条消息。
在这个 <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：使用文本插值显示 'message'
最后，我们可以使用 **文本插值**，Vue 中使用双大括号 <code class="w3-codespan">{{ }}> 作为数据占位符的语法。
<div id="app"> {{ message }} </div>
浏览器将用 Vue 实例中 'message' 属性存储的文本替换 <code class="w3-codespan">{{ message }}>。
这是我们第一个 Vue 页面
示例：我的第一个 Vue 页面！
使用下面的“尝试一下”按钮测试这段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>我的第一个 Vue 页面</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 的基本经验才能学习本教程。
点击“下一步”按钮继续本教程。
