Vue中各种模板template的创建

template;

这里都已省略了Vue实例的创建,只是单纯的实现这个,方法;

方式一:使用template标签,这也是比较常用的方法;

值得注意的是这里template在里面必须包含一个(有且唯一)根标签

<!-- 一种写法 ,需要一个标识-->
<template id="mb2">
        <div>
                <h3>这又是一个模板mb2 在template中建立的</h3>
                <p>不要使用大写,否则会失效</p>
        </div> 
</template>

<script>
//调用
// ************template的写法 ,scr  为创建的标签;
        Vue.component("scr",{
            // template:"#mb",
            template:"#mb2",

        });

</script>

方式二:script标签;

这里的Vue.component();都是使用了语法糖的写法,省略了Vue.extend();
直接将{template:``写如component中;

<!-- 模板的另一种写法 -->
<script type="text/x-template" id="mb">
    <div>
            <h3>这又是一个模板mb 在script中建立的</h3>
            <p>不要使用大写,否则会失效</p>
    </div> 


</script>

<script>
//调用
// ************script的写法 ,scr  为创建的标签;
        Vue.component("scr",{
             template:"#mb",
            //template:"#mb2",

        });

</script>

方式三:就是最基本的写法一种有三步,不过这种写法不方便阅读,

<script>
        //1. 创建组件构造对象;1.必须放在vue的实例中 创建标签<>不要使用大写会识别不出

        // 使用语法糖的可以省略第一步,直接将 {template :`...`, }放在component中;
        const temp= Vue.extend({
            template: `
            <div>
                <h3>这是一个模板zh</h3>
                <p>不要使用大写,否则会失效</p>
            </div> `
    
        });

        // 父组件
        const temp2=Vue.extend({
            template:`
            
            <div>
                <h3>这是父组件另一个模板hhh</h3>
                <p>不要使用大写,父子组件的使用 ,否则会失效</p>
                <t2></t2>

            </div> `
            
            ,
            // 子组件;
            components:{
                t2:temp
                
            }
        })


// 2.注册组件;,这里这个是一个全局的组件,在多个实例中均可以使用;
        Vue.component('zh',temp);
        Vue.component('fu',temp2);
        

        // Vue.component("名字",{template:`...`})



// 3.使用模板;  


// 这里的实例相当于一个Vue的root 组件
        var app=new Vue({
            el:".app",

            // components ,s不能少,此时的temp1 为局部组件,只能在app的元素下才有用

            components:{"temp1":temp},
            // template:,
            data:{
                msg:'hello Vue!',
                msg2:'<h1>this is a another Vue  </h1>'
            }

        });
        const app1=new Vue({
            el:".app2",
            data:{

            }
        })
</script>