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

Question

这是我在 main.js 中创建的 vue object，其值为：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 个解决方案

解决方案1
1 2021-04-11 12:33:18

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

问题描述

1 个解决方案

解决方案1 1 2021-04-11 12:33:18

解决方案1
1 2021-04-11 12:33:18