刘大猫.
刘大猫.

vue2知识点：组件模板定义

vue2知识点：组件模板定义_第1张图片

文章目录

  • 3.8模板
    • 3.8.1直接字符串
    • 3.8.2 x-template模板
    • 3.8.3 template标签
    • 3.8.4 省略is
  • 本人其他相关文章链接

3.8模板

当模板的 html 结构比较复杂时，直接在 template 属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:
vue2知识点：组件模板定义_第2张图片

问题：什么叫在使用字符串模板、x-template模板和.Vue组件时，不需要is进行转义？

答案：不需要转义如图1，需要转义如图2（详情请看知识点导航3.4.4）

<script type="text/x-template" id="template5">
    <table>
        <my-component1></my-component1>
    </table>
</script>
Vue.component('my-component2',{
    template:'#template2'
});
图1 
<table>
       <tr is="my-component3">      
 </table>
<template id="template3">
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
</template>
Vue.component('my-component3',{
    template:'#template3'
});
图2

3.8.1直接字符串

var temp = '<h4>直接字符串</h4>';
Vue.component('my-component1',{
    template:temp
});

3.8.2 x-template模板

<!-- 使用x-template -->
<script type="text/x-template" id="template2">
    <ul>
        <li>01</li>
        <li>02</li>
    </ul>
</script>
Vue.component('my-component2',{
    template:'#template2'
});

3.8.3 template标签

<!-- 使用template标签 -->
<template id="template3">
    <ol>
        <li>a</li>
        <li>b</li>
    </ol>
</template>
Vue.component('my-component3',{
    template:'#template3'
});

3.8.4 省略is

<!-- 使用x-template -->
<script type="text/x-template" id="template5">
    <table>
        <my-component1></my-component1>
    </table>
</script>
Vue.component('my-component6',{
    template:'#template5'
});

正常