0

我试图了解 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>
4

3 回答 3

3

你需要在 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>

于 2018-12-27T23:12:47.267 回答
1

您的代码中存在一些问题。

  1. vue 应该是 Vue
  2. 数据应该是一个对象或函数 - https://vuejs.org/v2/api/#data

<html>
<head>  
</head>

<body>
  <div id="app">

    <p> {{ myText }} </p>

  </div>

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

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

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

  </script>

</body>
</html>

于 2018-12-27T23:21:35.823 回答
0

我认为数据必须有一个对象作为它的价值。

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

<script>

new Vue({
  data: {
     txt: 'This must be injected'
  }
}).$mount('#app');

</script>

  </head>
  <body>
  <div id="app">

  <p> {{ txt }} </p>

  </div>

  <h1>This is a sample header</h1>
  </body>
</html>
于 2018-12-27T23:14:31.150 回答