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

标签 javascript html vue.js

我试图理解 vue 是如何工作的。为此,我尽可能地简化它,因此没有 webpack、CDN 或任何其他包(除非有必要)。

所以,想出了这个,但尝试将一个简单的变量注入(inject)到 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>

最佳答案

您需要在 Dom 准备好后加载 Vue,以便它可以找到要附加到的元素 - 不要将其放在头部。它也是大写的 VueData 不能只是一个裸露的属性,它应该是一个返回带有属性的对象的函数(它也可以是一个对象,but it's not recommended 一旦应用程序开始变大)。

<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>

关于javascript - Vue js 与简单的 JavaScript Vue 未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53951822/

相关文章:

javascript - AngularJS 服务器后端处理传入的 HTTP 请求

javascript - 自初始化主干 View

javascript - 来自网站联系表单的垃圾邮件响应绕过 'required' 和 'pattern' 属性

javascript - 如何在js文件中使用mapState?

vue.js - Vue 3 createApp 未在 Chrome 中定义

javascript - 使用中文输入问题计算的 Vue 2 触发器

javascript - chart.js 在点击时增加值(value)

javascript - 图库播放完毕后如何关闭Fancybox?

html - 如何将div定位在页脚上方使用css

html - 根据页面大小定位图像