前言
Vue 是一个框架，也是一个生态，其功能覆盖了大部分前端开发常见的需求。本文详细讲解了 Vue 的基本概念和使用方法。
一、Vue简介
①定义
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
② 核心特性
- 响应式数据绑定：Vue 的数据对象会与视图自动绑定，当数据发生变化时，视图将自动更新。
- 组件化：将应用程序拆分成独立的、可复用的组件，有助于提高代码的复用性和可维护性。
- 虚拟 DOM：通过虚拟 DOM 的实现，Vue 提供了高效的 DOM 更新和渲染性能。
二、el:挂载点
el 是 Vue 实例的一个重要选项，用于指定 Vue 实例挂载的位置。挂载点可以是 HTML 元素的选择器（ID、类名等），Vue 将控制该元素及其子元素的内容。
【示例】
代码语言：html复制<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 Vue! "
}
})
</script>这段代码中，我们将 el 设置为 '#app'，则 Vue 实例将控制 ID 为 app 的元素。在该元素内，Vue 使用数据对象中的数据渲染视图。在 Vue 实例中，只有挂载点内的元素会受到 Vue 的影响，其他部分的 DOM 将不会被 Vue 管理。
三、data：数据对象
data 是 Vue 实例的一个选项，用于定义实例的响应式数据。data 对象中的属性可以在模板中使用 {{ }} 语法进行数据绑定，也可以在 JavaScript 代码中进行访问和修改。任何对 data 中数据的修改都会自动更新 DOM。
【示例】
代码语言：html复制<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 Vue! "
}
})
</script>在这个例子中，页面中的<h1>标签会显示数据对象中 message 属性的值。当我们更改 data 中的 message 值时，视图会自动反映这一变化，体现了 Vue 的响应式特性。
四、第一个Vue程序
①导入开发版本的Vue.js
在使用 Vue.js 之前，我们需要通过 CDN 或本地文件导入 Vue 的 JavaScript 库。开发版本通常包含友好的错误提示和调试工具。
代码语言：html复制<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>②创建Vue实例对象
代码语言：html复制<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 Vue! "
}
})
</script>在这里，我们创建了一个新的 Vue 实例，并将其挂载到 ID 为 app 的 DOM 元素上。同时，我们定义了一个数据对象，其中有一个 message 属性，初始值为“你好 Vue!”。
③使用简洁的模板语法把数据渲染到页面上
在 Vue.js 中，插入语法 {{ }} 被称为“插值表达式”。它用于将数据绑定到 HTML 模板中的内容，从而动态地更新视图。
<div id="app">
<h1>{{ message }}</h1>
</div>使用双大括号 {{ message }}，我们能够在页面中显示 data 对象中的 message 值。当 message 的值发生变化时，视图会自动更新。
【示例】
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue基础</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:" 你好 Vue! "
}
})
</script>
</body>
</html>运行结果：
【注意事项】
注意点①：实例与容器是一一对应的关系
代码语言：html复制<body>
<div class="app">
<h1>{{ message }}</h1>
</div>
<div class="app">
<h1>{{ message }}</h1>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:".app",
data:{
message:" 你好 Vue! "
}
})
</script>
</body>运行结果：
【分析】
在这个示例中，有两个 div 元素具有相同的类名 class="app"。Vue 会找到页面上的所有 .app 元素，但只会与第一个匹配的元素进行绑定。因此只有第一个 div 元素会被 Vue 初始化，并且这个实例会将 data 中的 message 绑定到这个 h1 标签中。第二个 div 元素将不会被这个 Vue 实例控制，其中的 {{ message }} 不会被替换，仍然会在页面上显示为原始的字符串。
注意点②：不能挂载在 <html> 或 <body>******上**
<body id="body">
{{ message }}
<h2 id="app">
{{ message }}
<span> {{ message }} </span>
</h2>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#body",
data:{
message:" 你好 Vue! "
}
})
</script>
</body>
</html>运行结果：
【分析】
<html> 标签是整个 HTML 文档的根元素，<body>标签是页面内容的主要部分，将 Vue 或其他框架的实例挂载到<html> 或 <body>
上，会干扰页面的整体渲染循环和生命周期管理。
