问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

id为app的元素里面为什么不显示文字？

头像
hmy666
    2632591

    id为app的元素里面为什么不显示文字？
    按道理应该显示：Hello Vue 3 with Composition API

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        #app {
            color: red;
            font-size: 20px;
            width: 100px;
            height: 100px;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- 挂载点 -->
    <div id="app">{{ message }}</div>
    <script type="module">
        import { createApp, ref } from 'https://cdn.jsdelivr.net/npm/vue@3.5.13/+esm';

        // 创建一个组件
        const App = {
            setup() {
                // 使用组合式API定义响应式数据
                const message = ref('Hello Vue 3 with Composition API!');
                console.log('message:', message)
                return {
                    message
                };
            }
        };

        // 创建Vue应用实例并挂载到#app元素上
        createApp(App).mount('#app');
    </script>
</body>

</html>
    前端vue.js
    阅读 450
    2 个回答
    得票最新
    头像
    Seven
      2.4k2310
      ✓ 已被采纳

      将 Vue 的 CDN 链接改为：https://unpkg.com/vue@3/dist/vue.esm-browser.js

      这个链接是 Vue 3 官方推荐的 ESM 格式的 CDN 链接。使用这个链接后，应该就可以正常显示文字了。

      补充

      1. 在控制台查看是否有任何错误信息
      2. 确认 script 标签中的 type="module" 属性存在
      3. 使用现代浏览器访问（因为需要支持 ES 模块）
      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        #app {
            color: red;
            font-size: 20px;
            width: 100px;
            height: 100px;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app">{{ message }}</div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        // 创建一个组件
        const App = {
            setup() {
                // 使用组合式API定义响应式数据
                const message = ref('Hello Vue 3 with Composition API!');
                console.log('message:', message)
                return {
                    message
                };
            }
        };

        // 创建Vue应用实例并挂载到#app元素上
        createApp(App).mount('#app');
    </script>
</body>
</html>
      头像
      zcf0508
        778129

        你引错版本了。看下官网，需要使用 broswer 的版本。

        https://cn.vuejs.org/guide/quick-start#using-the-es-module-build

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

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏