<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload=function(){
//组件
var myComp = Vue.extend({
//模板：必须有一个根节点、
template:'<h1>hello comPonent</h1>'
})
//规范命名 连接符 -
Vue.component('hello',myComp);
//方式二：
Vue.component('my-component',{
template:'<h2>张。。。</h2>'
})
new Vue({
el: "#app",
data: {
},
components:{
'my-address': {
template:'<h2>张。。。</h2>'
},
'my-address2': {
template:"#myAddress2",
data:function(){
return {
title: "title",
list:[1,2,3,4]
}
}
},
'my-tab': {
template :"#myAddress3",
data:function(){
return {
tabtitil: ['标题一','标题二','标题三',],
tabContent: ['a','b','c'],
cur2: 1,
}
}
}
}
})
}
</script>
<style>
ul,li {
padding: 0;margin: 0
}
.tab-tit li {
padding: 10px 15px;
text-align: center;
list-style: none;
cursor: pointer;
display: inline-block;
}
.tab-con li {
padding: 10px 15px;
text-align: center;
list-style: none;
cursor: pointer;
display: inline-block;
}
</style>
<template id="myaddress2">
<div>
<p>{{title}}</p>
<ul>
<li v-for="(v,i) in list">{{v}}</li>
</ul>
</div>
</template>
<template id="myAddress3">
<div>
<ul class="tab-tit">
<li v-for="(v,i) in tabtitil" @click="cur2=i" >{{v}}</li>
</ul>
<ul class="tab-con">
<li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li>
</ul>
</div>
</template>
</head>
<body>
<div id="app">
<hello></hello>
<my-component> </my-component>
<my-address></my-address>
<my-address2></my-address2>
<my-tab></my-tab>
</div>
</body>
</html>