Vue核心技术-29,X-Template

一,前言

在定义组件时,可使用组件的template选项在javaScript中通过拼接字符串完成模板定义
但如果模板的内容比较复杂,比起写Html,这种做法的效率就很低了

这是可以使用X-template方式进行模板定义

二,使用X-template定义组件模板

Vue提供了通过text/x-template类型的<script>标签,
使用时只要将<script>标签的id赋值给template选项即可

<div id="app">
    <my-component></my-component>
    <script type="text/x-template" id="temp">
        <p>x-template模板内容</p>
    </script>
</div>

<script type="text/javascript">
    // 组件模板使用x-template模板id
    Vue.component('my-component', {
        template: '#temp'
    });

    var vm = new Vue({
        el: '#app'
    })
</script>

通过这种方式可以在<script>标签中,以html的形式定义组件模板

三,结尾

比起字符串拼接的方式,使用X-Template定义模板更加方便
不过它将模板和组件的其他定义隔离开了

工程化项目中,将使用webpack编译.vue格式单文件,更好的解决Html书写问题

最后

以上就是舒心鸵鸟为你收集整理的Vue核心技术-29,X-Template的全部内容，希望文章能够帮你解决Vue核心技术-29,X-Template所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。