JavaScript太过繁琐？不够优雅？那就导入Vue3！！
今天，我们介绍Vue3的基本结构和一些基本需要学习的地方，我们不介绍如何导入脚手架，我们通过CDN导入VUE3!
注意！我们本篇基于HTML文件进行Vue3基本结构的学习！
如何通过CDN导入VUE3
我们可以去查看官方文档快速入门 |Vue.js (vuejs.org)中查看如何引入，我这里直接把代码给大家！
html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>为什么使用Vue3
很多人可能会疑问了？我们为什么要使用Vue3呢？
Vue支持我们把html放到js里面写，我们再页面中添加数据就变简单多了！
Vue 3相对于传统JavaScript提供了更高效、更可维护、更现代化的开发体验，通过引入新的特性和优化，使得构建复杂、交互式的前端应用更为容易。
Vue 3的本质可以理解为一种现代化的JavaScript框架，旨在让前端开发更加简单、高效、可维护。它通过提供响应式数据绑定、组件化开发、虚拟DOM等特性，使得开发者能够更自然地关注应用的状态和用户界面，而无需过多关注底层DOM操作。Vue 3的核心理念是通过声明式的方式描述应用的结构和行为，使得代码更直观、可读性更高，同时提供了强大的工具和生态系统，使得构建现代Web应用变得更加容易和愉悦。
Vue3基本架构
html
<div id="app">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const msg = '你好'
const tel = {
template:`<h2>${msg}</h2>`
}
const app = Vue.createApp(tel)
app.mount('#app')
</script>我们可以看到，在这个html页面当中，存在一个类名为app的div容器！
接下来定义了两个script标签，这个是允许的，一个负责导入vue，一个负责编写我们的vue指令！
在我们的vue指令当中，定义一个变量msg，和一个对象tel，在tel对象中，我们使用定义了一个字符串模板，用于生成一个Dom结构，也就是一个html结构！
最重要的就是 下面的const app = Vue.createApp(tel) app.mount('#app')这个语句是必须要加的！
我们通过定义一个app，它实际上就是tel对象的实例对象！
app.mount('#app')则是将vue指令中的代码，挂载到id名为app的html容器当中！
当然，这样写，也还是不够优雅！接下来，我们会将所有的模板以下面的形式进行编写！
html
<div id="app">你好</div>
<template id="tel">
<div>
内容
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template:'#tel',
data:function(){
return {
数据1:数据,
}
},
methods:{
}
}).mount('#app')
// mount 挂载
</script>大家可能会疑问了！阿？这是什么形式？？
其实这样是为了更加的方便，template标签t不是不存在的, 是html5中存在的标签 里面会放一个#document-fragment 这个叫文档碎片。这一点我们知道就好！文档碎片可以说是一个没有意义的标签！
在template标签中，这里负责写我们的html代码！这里的代码会被js当作字符串读走。
在script标签中，时刻记住我们一定要写一个Vue.createApp().mount()进行挂载！
我们直接通过Vue.createApp().mount()进行操作
在createApp()的括号中，加入了一个template:'#tel',意思是引用一个id名为tel的template标签模板，也就是我们上面写的`template``
data是vue中写死的标签，意思是数据源，用于存放各种变量和数据的地方!
methods也是vue中写死的标签，意思是方法/函数，是用于存放函数的地方!
vue3初体验
现在设想一个场景，我们在页面上有一个数字和两个按钮！一个按钮为+,一个按钮为-
点击+,页面上的数字就会+1，点击-号页面上的数字就-1
通过传统的javascript当然可以实现这个效果！不过，我们是不是要通过document.getElementbyId()等等手段获取到页面的元素，再添加点击事件，等等操作，相当繁琐！但是，使用Vue3就不同了！我们不再需要获取页面的Dom结构，而是直接进行操作！相当方便！下面为大家展示！
html
<body>
<div id="app"></div>
<template id="tel">
<div>
<div><h3>数字：{{number}}</h3></div>
<button @click="add">+</button>
<button @click="minus">-</button>
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template:'#tel',
data:function(){
return {
number:1
}
},
methods:{
add:function(){
this.number++;
},
minus:function(){
this.number--;
}
}
}
).mount('#app')
</script>
</body>
大家可以看到，这个效果就简单地被我们实现了！
模板还是固定不变的！
在template中，我们编写的就是html文件！
一个容器里面装了一个数字，和两个按钮！
**{{number}}是什么？**咦？这个东西有点奇怪！其实这个一点都不奇怪，number是我们从vue的数据源data当中拿到的变量！{{}}是在这个位置上挖一个"坑"，用于把我们拿到的数据放进去！
data:在数据源当中 ，我们要在data当中使用一个函数，返回一个对象！这个是固定的格式！在对象中通过key-value 的方式定义我们的数据和变量，这些数据都是可以直接可以拿到我们的template中用的变量！这一下，动态操作是不是就变得更简单啦？
methods方法 ：在data的同级下，我们可以写一个methods用于存放我们的方法和各种函数！并且，在这些方法当中，我们是可以直接通过this.变量名拿到我们数据源中的数据的，例如在这个案例当中！我们就用两个方法add和minus通过this.number获取到了数据源当中的number变量,直接对它进行操作
在button按钮当中，我们也是使用了两个@click="方法名"通过点击事件绑定了add()和minus方法，@click我们会在后续当中介绍到！在@click中直接调用方法名就可以了，不用()执行，它自动就会执行！
到这里如果你还不懂的话，我们就再来看看一个简单的数据源获取：
html
<div id="app"></div>
<template id="tel">
<div>
<div><h1>介绍：{{introduce}}</h1></div>
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template:'#tel',
data:function(){
return {
introduce:'我是Aidan'
}
},
}
).mount('#app')
</script>看看效果:
大家仔细看看，其实就很容易明白了！
今天，我们关于Vue3基本结构的学习就到这里啦！后续，我还会为大家总结一些vue3的基础指令，脚手架的安装，以及如何开始一个vue项目！
今天，就到这里为止啦！后续文章，我还会持续输出，大家可以先点点关注哦~