vue.js - vueJS 应用程序不插入花边

Question

使用 VueJS 创建我的第一个“hello world”应用程序，虽然我没有收到任何错误，但我期望从模板中获得的基本插值不起作用。谁能帮我弄清楚我缺少什么:

index.js:

const App = new Vue({
  el: '#app',
  data: {
    title: 'Hello World',
    message: 'lorem ipsum'
  },
  computed: {},
  filters: {}
});

console.log('loaded app');

index.html:

<script src='node_modules/vue/dist/vue.min.js'></script>
<script src='./index.js'></script>

<div id="app">
  <h1>{{title}}</h1>
  <p v-html="message"></p>
</div>

如果我进入 Chrome 控制台，我可以测试我的 App 确实是一个 Vue 对象:

Answer 1

当浏览器的解析器遇到 script 标记时，它将在解析页面的其余部分之前加载并执行它。因此，虽然您的脚本确实创建了一个 Vue 实例，但它并不与 #app div 关联，因为解析器尚不知道它。

为了正确加载您的 Vue 实例，您需要将 index.js 脚本标记移动到 #app div 之后:

<div id="app">
  <h1>{{title}}</h1>
  <p v-html="message"></p>
</div>

<script src='./index.js'></script>