一、Vue的版本
1. Vue1.x
几乎被淘汰，不再建议学习与使用。
2. Vue2.x
<scriptsrc=" " target="_blank">https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
3. Vue3.x
<scriptsrc=" " target="_blank">https://unpkg.com/vue@next"></script>
vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并废弃了某些 2.x 中的旧功能：
新增的功能例如：组合式 API、多根节点组件、更好的 TypeScript 支持等
废弃的旧功能如下：过滤器、不再支持 $on，$off 和 $once 实例方法等
详细的变更信息，请参考官方文档给出的迁移指南：https://v3.vuejs.org/guide/migration/introduction.html
二、Vue的使用方式
- 传统方式
在html页面中导入vue库。
- 使用架构工具(专业开发)
vue cli(vue脚手架)、vite(新一代的架构工具)。
三、 Vue的使用
- 使用Vue2的基本流程
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
<!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域，即vue2中必须有根元素 -->
<!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<!-- app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 -->
<!-- app容器里的代码被称为【Vue模板】 -->
<!-- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 -->
<div id="app">{{ username }}</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 3. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据，一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
data: {
username: 'zhangsan'
}
})
</script>
2.使用Vue3的基本流程
① 引入Vue库
② 创建视图(view)
③ 创建模型(Model)
④ 创建vue实例，将model挂载到View---实现ViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个Vue应用</title>
<!-- 1.引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 2.创建视图(view)：vue3中根元素是非必须的 -->
<div id="app">
<p>{{ count }}</p>
</div>
<!-- 3.创建模型(Model) -->
<script>
const obj = {
// data函数：模型中的数据
data(){
return {
count:1,
}
},
// methods：模型用的方法
methods:{
}
}
// 4，创建vue实例，将model挂载到View---实现ViewModel
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>注意：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2.多个容器不能对应一个实例，实例只会找到第一个对应的容器；一个容器不能对应多个实例，只有第一个实例能找到对应的容器。所以，容器和实例只能一一对应！！！
3.真实开发中只有一个Vue实例，并且会配合着组件一起使用
4.Vue2组件中的模板结构必须有根标签，Vue3可以没有根标签
