VUE中template的三種寫法

VUE中template的三種寫法

一、直接寫在構造器中

<!-- 第一種寫法：直接寫在構造器里 -->
    <div id ="app1"> </div>
    <script>
        var vm1 = new Vue({
           el: '#app1',
           data: {},
           methods: {},
           template:`<h3>在構造器中的文字</h3>`
        });
       </script>

二、寫在HTML自帶的<template>標簽中

<!-- 第二種寫法：寫在HTML自帶的標簽里 -->
   <div id ="app2">
       <template id="item1">
        <h3>Template標簽的文字</h3>
       </template>
    </div>
    <script>
        var vm2 = new Vue({
           el: '#app2',
           data: {},
           methods: {}, 
           template:'#item1'
        });
       </script>

三、寫在<script>標簽中

<!-- 第三種寫法：寫在script標簽里 -->
   <div id ="app3">
       
     </div>
   <script type="x-template" id="item3">
        <h3>寫在script的文字</h3>
   </script>
    <script>
     let vm3 = new Vue({
        el: '#app3',
        data: {},
        methods: {},
       
        template:'#item3'
     });
    </script>