传统方式

在真实的项目中，数据是通过ajax获取，然后显示到页面上，这里 忽略ajax部分（后面讲解），这里只是将数据显示到页面上

<div id="msg"></div>
<script>
    document.getElementById("msg").innerHTML="hello world";
</script>

vue方式

引入vue.js

需要引入下面js之一（或提前下载好）：

Staticfile CDN（国内） : https://cdn.staticfile.net/vue/3.0.5/vue.global.js
字节跳动 CDN（国内） : https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js
unpkg：https://unpkg.com/vue@3/dist/vue.global.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

添加html标签

添加html标签，用于显示数据

<div id="app">{{msg}}</div>

{{msg}} 是 插值表达式

vue代码

通过vue代码，将数据显示到标签上

<script>
    Vue.createApp({
       data() {
         return {
           msg: 'Hello Vue3!'
         }
       }
     }).mount('#app')
</script>

createApp() 的参数是 根组件（此处是大括号对象），在挂载应用时，该组件是渲染的起点。

必须在调用 .mount() 方法后才会 将 数据 渲染 到页面上 ，.mount() 方法接收一个 容器 参数，可以是一个实际的 DOM 元素或是一个CSS 选择器字符串

特点：不需要直接操作dom

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">{{ message }}</div>
        <script src="js/vue@3.5.13.js"></script>

        <script>
            Vue.createApp({
               data() {
                 return {
                   message: 'Hello Vue3!'
                 }
               }
             }).mount('#app')
        </script>
    </body>
</html>

原文出处：/show_1GWEMXMn1vv.html