vuejs的组件中该如何引用一个html模板而不是片段?

rand
  • 2k
var list = Vue.extend({
        template: '<p>我要在这里放很多html</p>'
    })

如上,在list组件中,我要加载一个列表,如果按照如上这种方式们需要拼接很多html标签,如何像angularjs那样,新建一个list.html文件,将标签在里面写好,然后通过templateUrl的方式加载list.html?

回复
阅读 37.9k
6 个回答
import template from '../template/list.html'

let list = Vue.extend({
        template: template 
})

webpack 赛高

vue推荐的做法是将样式,script和模板写在一块,保存为.vue结尾的组件,通过webpack和vue-loader进行处理

clipboard.png

html:

<script type="text/template" id="tpl">
--
</script>

js:

var MyComponent = Vue.extend({
    template: '#tpl'
});

template 后面可以写一个id选择器,例如 '#tmpl'

在前面写一个script 标签,text/x-tpml 类型,里面放模版。

建议使用vue-loader,html作为组件加载。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏