09.VUE组件模板template标签

---

1.template使用

<div id="app">
    <test1></test1>
    <test2></test2>
    <test3></test3>
</div>
<!--在被控制的标签外使用template标签来自定义模板内容-->
<template id="t1">
    <h3>我是模板化的自定义组件</h3>
</template>
<!--模板中的标签页只能有一个根标签-->
<template id="t2">
    <div>
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
    </div>
</template>

<script>
    /*全局组件中使用模板*/
    Vue.component('test1',Vue.extend({
        template:"#t1",

    }));
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            test2:{
                template: "#t2"
            },
            test3:{
              template:"#t3"
            }
        }
    });
</script>

2.x-template使用

    如果在声明一个组件时，在template中定义模板，如果要换行的话，要加上一个“\”，如果是比较简单的模板还好，如果比较多的话，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template
    只要写出< script type=”text/x-template” id=”x-template” >< /script> 在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意，要加一个id名称，并将其赋给template.然后在声明的组件中加一个：

<!--使用script标签作为模板必须指定id和type的值: x-template-->
<script id="t3" type="x-template">
    <div>
        <p>script模块内容1</p>
        <p>script模块内容2</p>
        <p>script模块内容3</p>
    </div>
</script>
<script>
let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            test2:{
                template: "#t2"
            },
            test3:{
              template:"#t3"
            }
        }
    });
</script>