javascript - 应该在哪里加载 vue.js 脚本？

Question

我正在通过编写一个小脚本来学习 Vue.js，结果遇到了 22 条陷阱。

处理 Vue.js 部分的 JS 脚本(explorer.js):

var vm = new Vue({
    el: "#root",
    data: {
        posts: {},
        tags: {}
    }
})

qwest.get('/posts.json')
    .then(function (xhr, response) {
        vm.posts = response;
    });

qwest.get('/tags.json')
    .then(function (xhr, response) {
        vm.tags = response;
    });

案例 1:加载 explorer.js早期:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qwest/4.4.6/qwest.min.js"></script>
<link rel="stylesheet" href="/static/css/explorer.css">
<script src="/static/js/explorer.js"></script>

<div id="root">
    <button v-for="(content, title) in posts" class="l1 btn">
        {{ title }}
        <button v-for="tag in content.tags" class="l2 btn">
            {{ tag }}
            <button v-for="t in tags[tag]" class="l3 btn">
                {{ t }}
            </button>
        </button>
    </button>
</div>

我得到一个 Cannot find element: #root来自 Vue 的错误。 这是可以理解的:当explorer.js运行，<div id="root">目前还不知道。

案例 2:加载 explorer.js迟到:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qwest/4.4.6/qwest.min.js"></script>
<link rel="stylesheet" href="/static/css/explorer.css">

<div id="root">
    <button v-for="(content, title) in posts" class="l1 btn">
        {{ title }}
        <button v-for="tag in content.tags" class="l2 btn">
            {{ tag }}
            <button v-for="t in tags[tag]" class="l3 btn">
                {{ t }}
            </button>
        </button>
    </button>
</div>

<script src="/static/js/explorer.js"></script>

我得到一个 Property or method "data" is not defined on the instance but referenced during render.错误(和其他相同样式)。
这也是可以理解的:v-for函数尝试访问尚未定义的数据。

我应该如何(或更确切地说 - 在哪里)加载 explorer.js ?

Answer 1

首先，您应该在文件底部添加 explorer.js。您可以将它添加到文件的顶部如果您将 Vue 的实例化 (new Vue(...) 包装在一个函数中只有 ran when the page was completely loaded ，但在底部添加脚本是标准做法。

您的主要问题是 nested buttons are invalid HTML .这是抛出的问题

Property or method "content" is not defined on the instance but referenced during render.

这似乎主要是 Vue 提示您的 HTML 无效。我已将下面的模板修改为可以实际呈现的内容，但您需要根据自己的需要对其进行定制。

<div v-for="(content, title) in posts" class="l1 btn">
  <button>{{ title }}</button>
  <span v-for="tag in content.tags" class="l2 btn" style="margin-left:1em">
     <button>{{ tag }}</button>
     <span v-for="t in tags[tag]" class="l3 btn">
       <button>{{ t }}</button>
     </span>
  </span>
</div>

这是一个有效的 example .