VueJs模板。如何加载外部模板 [英] VueJs templating. How to load external templates

问题描述

我是Vue.js的新手，我已经使用了AngularJS一段时间，而且我们习惯于加载模板，例如，

 模板：'/ sometemplate.html'，
控制器：'someCtrl'
  

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

  new Vue（ {
 el：'#replace'，
模板：'< p>已替换< / p>'
}）
  

对于小模板这是可以的，但对于大模板这是否实用？

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

 < script type =x-templateid = 模板> HTML模板在这里< / html> 
  

解决方案

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

  {
模板：'＃som e-id'
} 
  

尽管如此，我强烈建议使用

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

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

I'm new to Vue.js, I've used AngularJS for some time and in angular we used to load templates such as,

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

How can we do such a thing in Vue, instead of keeping large HTML templates inside JavaScript like this,

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

This is OK for small templates but for large templates is this practical?

Is there a way to load external template HTML or use HTML template inside a script tag like in Vue?

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

解决方案

You can use the script tag template by just referring to its id.

{
  template: '#some-id'
}

Though, I highly recommend using vueify (if you use browserify) or vue-loader (if you use webpack) so you can have your components stored in nice little .vue files like this.

Also, the author of Vue wrote a nice post about the topic of external template urls:

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

这篇关于VueJs模板。如何加载外部模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！