Question

这是我在 main.js 中创建的 vue 对象，其值为：myName

import Vue from "vue";

const vm = Vue.createApp({
    data () {
        return {
            myName: 'su'
        }
    }
});

vm.mount('#app');

我想在 index.html 中显示“su”

这里是html代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    123
    <div id="app">
      name : {{ myName }}
    </div>
    
    <script type="module" src="/src/main.js">

    </script>
  </body>
</html>

它不起作用并显示

姓名：{{我的姓名}}

谁能帮忙谢谢！

Answer 1

它不起作用的原因是您从未真正导入 Vue。检查您的浏览器控制台会显示Vue is undefined。

import Vue from "vue";

需要像 webpack 这样的构建工具，并会根据您的 node_modules 文件夹解析导入。

由于您直接在页面中的模块中导入 Vue，因此您需要从浏览器可用的路径中导入：

123
<div id="app">
  name : {{ myName }}
</div>

<script type="module">
  import * as Vue from 'https://unpkg.com/vue@3.0.11/dist/vue.esm-browser.js'; 
  const vm = Vue.createApp({ 
    data () { 
      return { 
        myName: 'su' 
      } 
    } 
  }); 
  vm.mount('#app');
</script>

无法将值从 main.js 传递到 index.html

1 个答案: