VueJs 模板.如何加载外部模板 [英] VueJs templating. How to load external templates
问题描述
我是 Vue.js 的新手,我已经使用 AngularJS 有一段时间了,在 angular 中我们用来加载模板,例如,
template: '/sometemplate.html',控制器:'someCtrl'
我们如何在 Vue 中做这样的事情,而不是像这样在 JavaScript 中保留大型 HTML 模板,
new Vue({el: '#replace',模板:'<p>replaced</p>'})
这对于小模板来说是可以的,但是对于大模板来说这实用吗?
有没有办法像 Vue 一样加载外部模板 HTML 或在脚本标签内使用 HTML 模板?
你可以通过引用它的 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/
这篇关于VueJs 模板.如何加载外部模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!