template

1.写在构造器里的template

比如说向下面这样：

    <div id="app">{{message}}</div>    <script type="text/javascript">        new Vue({            el : "#app",            data : {                message : "Template的使用"            },            template: `<h3>选项模板</h3>`        })    </script>

2.写在template标签中

    <div id="app">    </div>    <template id="temp">        <h3>选项模板</h3>    </template>    <script type="text/javascript">        new Vue({            el : "#app",            data : {                message : "Template的使用"            },            template: "#temp"        })    </script>

这种方式与上面的相比，比较简洁，不需要将大段的html都写到“中，只需要写入一个id或者就是class，结构明了，可以分模块，将某一部分的东西都放置在一个template中

当然在这里我也不得不提一个错误，错误如下图所示：

错误的代码示范如下：

<template id="app">  <h3>模板</h3></template><script type="text/javascript">  new Vue({    el : "#app",  })</script>

错误的原因是template不能作为根元素，改正的方法可以参照前面正确的使用方式

3.利用Script标签

   <div id="app">    </div>    <script type="x-template" id="temp">        <h3>选项模板</h3>    </script>    <script type="text/javascript">        new Vue({            el : "#app",            data : {                message : "Template的使用"            },            template: "#temp"        })    </script>

这样写在script标签里面的方法，可以方便的引入外部的模板