说明

与 vue3教程-第一个程序（传统引入js方式） 类似，但是引入的 js 不同，写法略有不同

优点：在导入模块时，与单文件工程几乎相同

vue方式

引入vue.js

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

https://unpkg.com/vue@3/dist/vue.esm-browser.js

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>

添加html标签

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

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

{{msg}} 是 插值表达式

vue代码

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

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: '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 type="importmap">
        {
            "imports": {
                "vue": "./js/vue.esm-browser@3.5.13.js"
            }
        }
        </script>
        <script type="module">
          import { createApp } from 'vue'

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

原文出处：/show_1GWEMcnTPIh.html