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 来处理其余的事情。
- 它提供了更高效的开发流程，具有基于模板的语法、双向数据绑定和集中的状态管理。
如果其中一些要点难以理解，不用担心，你将在本教程结束时理解它们。
Options API
Vue 中有两种不同的编写代码的方式：Options API 和 Composition API。
Options API 和 Composition API 的底层概念是相同的，所以学习完一种后，你可以轻松切换到另一种。
本教程使用的是 Options API，因为它被认为更适合初学者，结构更易于识别。
在本教程结束时，请查看 此页面，了解 Options API 和 Composition 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 语法，作为数据的占位符。
<div id="app"> {{ message }} </div>
浏览器会将 {{ message }} 替换为 Vue 实例中存储的 '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>
{{'随机数：' + 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 经验才能跟上本教程。
点击“下一页”按钮继续本教程。
