Vue组件--引用模板

如果说组件的template内容结构比较简单，可以直接写在template选项中；但是当自定义组件的template内容比较复杂的时候，直接写就不合适了，也容易出错，所以：

对于这种状况Vue给出了自己的解决方案：使用模板，使用Vue的内置template模板来包裹着模板内容

 <template id="foreignerName">
        <!-- <template/>标签内部被包裹着的内容必须有且只有一个根元素，在这里的根元素是ul -->
        <ul>
            <li v-for="item in nameArr">{
  {item}}</li>
        </ul>
    </template>

这个模板要写在Vue实例的外面，这里template的id属性的值是自定义的，配合js部分用来标识模板内容；但是有一点值得注意， 那就是被template包裹着的内容有且只有一个根元素，在这里是ul元素

JS部分

 Vue.component("my-haha",{//如果template模板内容比较复杂，那么就可以这样做
            template:"#foreignerName",//对应于template中的id属性
            data:function(){