Vue3

1. Vue是渐进式JS框架，那么什么是渐进式框架呢？

表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目。

2. CDN引入

CDN是内容分发网络，content delivery network 或者 content distribution network
程序打包成静态资源，静态资源部署到服务器里面。用户访问服务器。

服务器距离用户越近，用户访问的速度就越快。越远，访问的速度就
越慢。但是购买很多台服务器，分别放到世界各地是很难实现的。
但是我们可以使用CDN的服务器。通过内容分发网络，找到最靠近每个用户的服务器
从这个服务器里面，给用户派发资源。CDN的服务器是由好多台服务器分发在各个地点的。
这些服务器叫做边缘节点。
比如北京的用户想访问，它会去找离自己最近的CDN服务器，没有的话，
就回去它的父节点去找。就回去源站里面找，然后下载到父节点，然后从父节点下载到边缘节点。
然后边缘节点就有资源了，下一次有别的用户像访问的话，就会直接访问的到了。

总结：
它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器
更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；

3.template

const app = Vue.createApp(对象)
app.amout("#app")
这个对象里面有个属性是template，里面写html标签，他会替换掉#app里面的innterHTML
直接写在creatApp里面不太好看，我们有一下两种解决办法
（1.）使用script标签，并且标记它的类型为 x-template；

<script type="x-template" id="my-app">
  <div>
    <h2>{{counter}}</h2>
  </div>
</script>

  <script>
   const app = Vue.createApp({
     template:"#my-app",
     data(){
       return {
         counter: 100
       }
     }
   })
   app.mount("#app")

（2.）使用template

<template id="my-app">
  <div>
    <h2>{{counter}}</h2>
  </div>
</template>

  <script>
   const app = Vue.createApp({
     template:"#my-app",
     data(){
       return {
         counter: 100
       }
     }
   })
   app.mount("#app")

template标签是不会被浏览器渲染到页面上，但是可以被js读取处理掉

4. data属性

在vue2中，可以传入一个对象（虽然官方推荐的是一个函数）
在vue3中，比如传入一个函数，否则就会直接在浏览器中报错

5.methods属性

我们可以使用this关键字在methods里面的方法中直接访问到data中返回的对象的属性
并且不能使用箭头函数。