如果說元件的template內容結構比較簡單，可以直接寫在template選項中；但是當自定義元件的template內容比較複雜的時候，直接寫就不合適了，也容易出錯，所以：

對於這種狀況Vue給出了自己的解決方案：使用模板，使用Vue的內建template模板來包裹著模板內容

 <template id="foreignerName">
        <!-- <template/>標籤內部被包裹著的內容必須有且只有一個根元素，在這裡的根元素是ul -->
        <ul>
            <li v-for="item in nameArr">{{item}}</li>
        </ul>
    </template>
 

JS部分

 Vue.component("my-haha",{//如果template模板內容比較複雜，那麼就可以這樣做
            template:"#foreignerName",//對應於template中的id屬性
            data:function(){
                return {
                    nameArr:["Alice","Marry","Athena"]
                }
            }
        })
 

 <div id="container" v-cloak>
        <h3>{{name}}</h3>
        <my-comp></my-comp>
        <!-- 當自定義元件的template模板內容比較複雜的時候 -->
        <my-haha></my-haha>
    </div>