<div id="app">
    <h1>我是直接写在构造器里的模板1</h1>
</div>
 
<template id="demo3">
    <h1 style="color:red">我是选项模板3</h1>
</template>
 
<script type="x-template" id="demo4">
    <h1 style="color:red">我是script标签模板4</h1>
</script>
 
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:1
        },
 
        //第2种模板 写在构造器里
        //template:`<h1 style="color:red">我是选项模板2</h1>`
 
        //第3种模板 写在<template>标签里
        //template:'#demo3'
 
        //第4种模板 写在<script type="x-template">标签里
        template:'#demo4'
    })
</script>

在使用Vue调用 <template>标签时，必须只能有一个根标签 

<template id="kirin_template">
      <div>
          <p><span>{{children_kirin()}}</span></p>
          <p><button>{{component}}</button></p>
          <hr>
      </div>
    </template>

转载于：Vue中 模板template的四种写法_dxj124的博客-CSDN博客_vue 模板写法