第7课：vue组件
2018-09-07 本文已影响0人
我七
1.谈谈你对组件的理解
提高代码的可复用性
2.分别写出如何全局注册和局部注册组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局注册组件和局部注册组件</title>
<style>
p{
margin-bottom: 0;
}
#app{
margin-bottom: 20px;
}
#app .jubu{
color: rgb(228, 26, 184);
}
.quanju{
color: rgb(73, 228, 26);
}
</style>
</head>
<body>
<div id="app">
id为app的内容
<p>此处全局注册组件</p>
<my-component></my-component>
<p>此处局部注册组件</p>
<app-component></app-component>
<p>table中只能有tr，td，tbody这些属性</p>
<table>
<tbody is="my-component"></tbody>
<tbody is="app-component"></tbody>
</table>
</div>
<hr>
<div id="bpp">
id为bpp的内容
<p>此处全局注册组件</p>
<my-component></my-component>
<p>此处app局部注册组件不生效</p>
<app-component></app-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template:'<div class="quanju">我是全局注册的组件</div>'
})
var app = new Vue({
el:'#app',
data:{
},
components:{
'app-component':{
template: '<div class="jubu">我是局部注册组件的内容</div>'
}
}
})
var bpp = new Vue({
el:'#bpp',
data:{
},
})
</script>
</body>
</html>
