且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

VueJs 模板.如何加载外部模板

更新时间:2022-10-15 08:57:38

你可以通过引用它的 id 来使用脚本标签模板.

{模板:'#some-id'}

不过,我强烈建议使用

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

https://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:

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