Vue2.0 【第二季】第5节 Template制作模板

---

第5节 Template制作模板

一、直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议使用。

js代码：

var app=new Vue({

     el:'#app',

     data:{

         message:'hello Vue!'

      },

     template:`

        <h1 style="color:red">我是选项模板</h1>

     `   //这是Tab上的键

})

二、写在template标签里的模板

这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。

<template id="demo2">

	<h2 style="color:red">我是template标签模板</h2>

</template>

<script type="text/javascript">

	var app=new Vue({

		el:'#app',

        data:{

			message:'hello Vue!'

        },

        template:'#demo2'

    })

</script>

三、写在script标签里的模板

这种写模板的方法，可以让模板文件从外部引入。

<script type="x-template" id="demo3" <!--src="..."-->>

        <h2 style="color:red">我是script标签模板</h2>

    </script>

    <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

                message:'hello Vue!'

            },

            template:'#demo3'

        })

    </script>

这一节学习了Template的三种写法，以后学习到vue-cli的时候还会学到一种xxx.vue的写法。