如果说组件的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(){