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

Question

我正在通过编写一个小脚本来学习 Vue.js，结果遇到了一种 catch 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;
    });

案例一：提前加载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>

我从 Vue 收到 Cannot find element: #root 错误。 这是可以理解的：当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。这是抛出的问题

属性或方法“内容”未在实例上定义，但 在渲染期间引用。

这似乎主要是 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。

Answer 2

我实际上写了一篇解释Vue Cannot Find Element 错误的帖子。如果您尝试提前将 Vue 实例化为 0，您将收到此错误。在我的Vue.js training course 中，所有示例都将 Vue.js 框架加载到文件的end。一般来说，我通过 script 标签加载了 Vue.js 框架，然后是另一个初始化 Vue 实例本身的 script 块。这两项发生在结束 body 标记之前。

关于案例 #1，只需将您的 script 元素移到您的 <div id="root" ... 元素之后，您应该处于良好状态。

您可以使用v-cloak 指令来创建流畅的加载体验。我建议最后加载 Vue 的原因是基于 PageSpeed Insights 的建议。不过，这些可能与您的场景相关，也可能不相关。

Answer 3

Vue.js 应该在开始时加载。

您无需指定数据属性即可访问其属性，请参见 Hello World 示例：

https://jsfiddle.net/chrisvfritz/50wL7mdz/

我不确定您的数据结构是什么，但是您可以尝试类似的方法（没有 data 属性）：

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

<div id="root">
    <button v-for="post in posts" class="l1 btn">
        {{ post.title }}
        <button v-for="tag in tags" class="l2 btn">
            {{ tag }}
        </button>
    </button>
</div>

只根据你的数据结构工作，但没有data

另外，对于 Vue.js，您不能动态添加根属性，请参阅 https://vuejs.org/v2/guide/reactivity.html，因此您必须将数据中的根属性指定为初始结构。

explorer.js 应该在你的 html 模板之后加载（最后），你得到的警告/错误是由于在开始时没有定义你的模型，甚至是嵌套的根！

除此之外，一切似乎都很好。