javascript - VueJs 模板。如何加载外部模板

Question

我是 Vue.js 的新手，我使用 AngularJS 有一段时间了，在 Angular 中我们过去常常加载模板，例如，

template: '/sometemplate.html',
controller: 'someCtrl'

我们如何在 Vue 中做这样的事情，而不是像这样在 JavaScript 中保留大型 HTML 模板，

new Vue({
  el: '#replace',
  template: '<p>replaced</p>'
})

这对于小模板没问题，但对于大模板实用吗？

有没有办法像在 Vue 中一样加载外部模板 HTML 或在脚本标签内使用 HTML 模板？

<script type="x-template" id="template">HTML template goes here</html>

Answer 1

您可以通过引用其id 来使用脚本标签模板。

{
  template: '#some-id'
}

不过，我强烈建议使用 vueify (如果你使用 browserify)或 vue-loader (如果你使用 webpack)这样你就可以将你的组件存储在像这样的漂亮的小 .vue 文件中。

此外，Vue 的作者写了一篇关于外部模板 url 主题的好文章:

https://vuejs.org/2015/10/28/why-no-template-url/