Vue 简介
为什么学习 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:
<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 步:使用文本插值显示"消息"
最后，我们可以使用文本插值，一种带有双大括号{{ }}的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 方面的基本经验才能学习本教程。
单击"下一步"按钮继续本教程。
