<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: {
flag: 'my-tr',
flag2: 'my-chenge1',
},
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,
}
}
},
'my-tr':{
template :'#myAddress4'
},
'my-slot':{
template : '#myAddress5'
},
'my-chenge1':{
template:'<h1>{{x}}</h1>',
data:function(){
return {
x: Math.random()
}
}
},
'my-chenge2':{
template:'<h3>{{x}}</h3>',
data:function(){
return {
x: Math.random()
}
}
}
}
})
}
</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" :class="{active: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>
<template id="myAddress4">
<div>
<tr>
<li>vvvvv</li>
</tr>
</div>
</template>
<template id="myAddress5">
<div>
<p>my slot</p>
<slot name="s2"></slot>
<p>张。。。</p>
<slot name="s2"></slot>
</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>
<!-- 组件的高级用法 -->
<table border="2" padding = "100px">
<!-- <my-tr></my-tr> -->
<tr is="my-tr"></tr>
</table>
<!-- 插槽 -->
<!-- 设计模式：模板模式 -->
<my-slot>
<ul slot="s1">
<li>asccc</li>
</ul>
<ul slot="s2">
<li>asccc</li>
</ul>
</my-slot>
<!-- 动态组件 -->
<button @click="flag='my-tab'">my-tab</button>
<button @click="flag='my-tr'">my-tr</button>
<!-- is data变量 -->
<componet :is="flag"></componet>
<!-- 状态 my-chenge1 -->
<!-- 动态组件 -->
<button @click="flag2='my-chenge1'">my-chenge1</button>
<button @click="flag2='my-chenge2'">my-chenge2</button>
<!-- is data变量 -->
<!-- <componet :is="flag2"></componet> -->
<!-- 切换组建状态不变 缓存非活动组件 -->
<keep-alive>
<component :is="flag2"></component>
</keep-alive>
</div>
</body>
</html>
<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: {
flag: 'my-tr',
flag2: 'my-chenge1',
},
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,
}
}
},
'my-tr':{
template :'#myAddress4'
},
'my-slot':{
template : '#myAddress5'
},
'my-chenge1':{
template:'<h1>{{x}}</h1>',
data:function(){
return {
x: Math.random()
}
}
},
'my-chenge2':{
template:'<h3>{{x}}</h3>',
data:function(){
return {
x: Math.random()
}
}
}
}
})
}
</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" :class="{active: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>
<template id="myAddress4">
<div>
<tr>
<li>vvvvv</li>
</tr>
</div>
</template>
<template id="myAddress5">
<div>
<p>my slot</p>
<slot name="s2"></slot>
<p>张。。。</p>
<slot name="s2"></slot>
</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>
<!-- 组件的高级用法 -->
<table border="2" padding = "100px">
<!-- <my-tr></my-tr> -->
<tr is="my-tr"></tr>
</table>
<!-- 插槽 -->
<!-- 设计模式：模板模式 -->
<my-slot>
<ul slot="s1">
<li>asccc</li>
</ul>
<ul slot="s2">
<li>asccc</li>
</ul>
</my-slot>
<!-- 动态组件 -->
<button @click="flag='my-tab'">my-tab</button>
<button @click="flag='my-tr'">my-tr</button>
<!-- is data变量 -->
<componet :is="flag"></componet>
<!-- 状态 my-chenge1 -->
<!-- 动态组件 -->
<button @click="flag2='my-chenge1'">my-chenge1</button>
<button @click="flag2='my-chenge2'">my-chenge2</button>
<!-- is data变量 -->
<!-- <componet :is="flag2"></componet> -->
<!-- 切换组建状态不变 缓存非活动组件 -->
<keep-alive>
<component :is="flag2"></component>
</keep-alive>
</div>
</body>
</html>