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>

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

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

关于案例＃1，只需在script元素之后移动<div id="root" ...元素，您就应该处于良好状态。

您可以使用v-cloak指令创建平滑的加载体验。我建议最后加载您的Vue的原因是基于PageSpeed Insights的建议。这些可能会或可能不会与您的方案相关。

Answer 2

首先，您应在文件底部添加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 3

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

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

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

我不确定你的数据结构是什么，但你可以尝试类似的东西（没有数据属性）：

<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，因此您必须在数据中指定根属性作为初始结构。

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

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

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

案例1：提前加载`explorer.js`：

案例2：迟到`explorer.js`加载：

3 个答案:

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

案例1：提前加载explorer.js：

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

3 个答案:

案例1：提前加载`explorer.js`：

案例2：迟到`explorer.js`加载：