Template 制作模版

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

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

javascript代码：

1 2 3 4 5 6 7 8 9

var app = new Vue ( {      el : '#app' ,      data : {          message : 'hello Vue!'        } ,      template : `          < h1 style = "color:red" >我是选项模板 < / h1 >      ` } )

这里需要注意的是模板的标识不是单引号和双引号，而是，就是Tab上面的键。

二、写在<template>标签里的模板

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<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>标签里的模板

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

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type = "x-template" id = "demo3" >          < h2 style = "color:red" >我是 script标签模板 < /h2>     </s cript >        <script type = "text/javascript" >          var app = new Vue ( {              el : '#app' ,              data : {                  message : 'hello Vue!'              } ,              template : '#demo3'          } )      </script>

---