VUE中template的寫法有哪些

本文小編為大家詳細介紹“VUE中template的寫法有哪些”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“VUE中template的寫法有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、直接寫在構造器中

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

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

    <!-- 第二種寫法：寫在HTML自帶的標簽里 -->
   <div id ="app2">
       <template id="item1">
        <h4>Template標簽的文字</h4>
       </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">
        <h4>寫在script的文字</h4>
   </script>
    <script>
     let vm3 = new Vue({
        el: '#app3',
        data: {},
        methods: {},
       
        template:'#item3'
     });
    </script>

讀到這里，這篇“VUE中template的寫法有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道。