Vue.js 在单独的文件中时不起作用？答案

【问题标题】：Vue.js is not working when its in seperate file?Vue.js 在单独的文件中时不起作用？
【发布时间】：2017-01-08 14:02:19
【问题描述】：

当我将脚本代码放在 js 中的单独文件中时，我的组件不起作用，只有当我直接在视图中编写代码时。有什么建议为什么会发生这种情况？

https://jsfiddle.net/coligo/txpy7ug4/

<div id="app">
  <div class="container-fluid">

    <ul class="list-group">
      <post v-for="comment in comments" :post="comment"></post>
    </ul>

    <div id="comment-box">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" @keyup.enter="postComment">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" @click="postComment">Submit</button>
          </span>
      </div>
    </div>

  </div>

</div>

<template id="post-template">
  <li class="list-group-item">
    <i class="glyphicon glyphicon-chevron-up" @click="upvote" :class="{disabled: upvoted}"></i>
    <span class="label label-primary">@{{ votes }}</span>
    <i class="glyphicon glyphicon-chevron-down" @click="downvote" :class="{disabled: downvoted}"></i>
    <a>@{{ post.title }}</a>
  </li>
</template>

【问题讨论】：

标签： laravel laravel-5 laravel-5.2 vuejs2 vue.js

【解决方案1】：

如果您的 HTML 与您的 JS 代码位于不同的文件中，您必须在您的 vue 实例中要求它，如 here 解释：

component.js

module.export = {
template: require('./templates/template.html'),
data: function(){
    return {
    text: "Hello World!"
    };
}
};

template.html

<h1>{{ text }}<h1>

【讨论】：