Vue中 模板template的四種寫法

<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>