5-vue-template模板制作

有四种方法制作模板，下边先将前三种制作模板。

注意：模板组件里面第一行只能有一个标签，并且结束标签必须在最后一行，否则结束标签之后的html是无法显示的；

一：直接在构造器中制作模板，构造器模板

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:`
            <h3 style='color:red'>this is the first template</h3>
            `
        })
    </script>

第二种写法，template标签模板，直接在html中进行书写：（相较于第一种模板，第一种模板比较适合比较小的组件）

   <div id='ele'>  
        <h2>template的第二种写法</h2><!--不会显示-->
        <p v-text="message"></p>
    </div>
    <template id='temp2'>
            <h3 style='color:red'>this is the second template</h3>
    </template>

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:"#temp2"
        })
    </script>

第三种写法：script标签template

    <div id='ele'>  
        <h2>template的第三种写法</h2><!--不会显示-->
        <p v-text="message"></p>
    </div>
    <script type="x-template" id='temp3'>
            <h3 style='color:red'>this is the third script template</h3>
    </script>

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:"#temp3"
        })
    </script>