本节紧接记录3，Vue本质是一个js库，我们直接在页面引入 vue.global.js 文件来学习它的作用，先不考虑构建一个大项目的各种逻辑文件关系，从一个简单页面的例子理解

Hello Vue

直接通过脚本引入Vue库，这里选择字节的CDN网址：
https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js，实例：

  
    
    
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
  
  
  
    

      {{ message }}
    
    <script>
      const HelloVueApp = {
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }
      
      Vue.createApp(HelloVueApp).mount('#hello-vue')
     </script>
  

这个HTML文件就会在网页端显示输出 Hello Vue! 的内容

html部分：

      {{ message }}

这部分构建了一个html页面的内容，具体包含了一个div元素，id为 hello-vue，他就是一个用于挂载 Vue 的实例

怎么理解挂载？

就是Vue代码具体让其生效的地方，Vue代码需要依赖一个具体的html元素来实现其作用，挂载就是让它指定到对应的元素位置然后生效

{{ }} 用于输出对象属性和函数返回值

{{ message }} 就对应了应用实例中 message 变量的值

JavaScript部分：

const HelloVueApp = {
        data() {
          return {message: 'Hello Vue!'}
        }
}
Vue.createApp(HelloVueApp).mount('#hello-vue')

HelloVueApp 是一个包含 data 的JavaScript对象

data 函数也返回一个对象，其中包含 message 属性，其值为 Hello Vue!

Vue框架的作用代码：

Vue.createApp(HelloVueApp).mount('#hello-vue')

1）Vue.createApp()：Vue3创建应用实例的方法，接受一个对象（如 HelloVueApp）并返回一个Vue3应用实例

2）mount()：应用实例的方法，用于将这个应用实例挂载到指定的 DOM 元素上

Vue.createApp(HelloVueApp).mount('#hello-vue')会创建一个HelloVueApp对象配置的Vue应用实例，然后把它挂载.mount()到指定位置