时间戳

首页 > 解决方案 > Vue js 与简单的 JavaScript Vue 未定义

javascript - Vue js 与简单的 JavaScript Vue 未定义

问题描述

我试图了解 vue 的工作原理。为此，我尽可能地简化它，因此没有 webpack 没有 CDN 或任何其他包（除非它是必要的）。

所以，想出了这个，但试图将一个简单的变量注入 html 会导致 vue is undefined 错误。

*vue.js 文件取自 npm vue 包。

<html>
<head>
  <script src="vue.js"></script>

  <script>
  new vue({
    data: 'This must be injected'
  }).$mount('#app');
  </script>

</head>
<body>
  <div id="app">
    <p> {{ data }} </p>
  </div>

  <h1>This is a sample header</h1>
</body>
</html>

标签： javascripthtmlvue.js

解决方案

你需要在 Dom 准备好之后加载 Vue，这样它才能找到要附加的元素——不要把它放在头上。它也是大写的Vue。并且Data不能只是一个裸属性，它应该是一个返回具有您的属性的对象的函数（它也可以是一个对象，但一旦应用程序开始变大，不建议这样做）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <p> {{ data }} </p>

</div>

<h1>This is a sample header</h1>
<script>
  Vue.config.productionTip = false
  new Vue({
    data(){ return {
      data: 'This must be injected'
    }
  }
  }).$mount('#app');
</script>

推荐阅读