Vue组件开发
所谓组件化，就是把单个页面拆分成多个组件，每个组件依赖的 CSS、JS、template、等资源放在一起开发和维护
Vue在组件中给了两种组件形式 全局组件 与 局部组件
全局组件
HTML部分：
<body>
<div id="app">
<!-- 使用组件 -->
<Top></Top>
</div>
</body>
JS部分：
Vue.component("Top",{
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"顶部"
}
}
})
new Vue({
el:"#app",
})
显示效果：
这是顶部
全局注册语法：Vue.component（"组件名"，定义组件）
定义组件是一个对象有该组件自己的template、data、mothods等等
注意：
1、组件的data属性是一个函数return的一个对象
2、Vue.componentd（注册组件）一定要在所有new Vue（）创建实例前
3、如果单独定义组件要在注册组件之前 先要定义了才可以注册
可以单独定义组件
如下
<body>
<div id="app">
<!-- 使用组件 -->
<Top></Top>
</div>
</body>
<script src="../../vue.js"></script>
<script>
//定义组件
let Top={
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"顶部"
}
}
}
//全局注册组件
Vue.component("Top",Top)
new Vue({
el:"#app",
})
</script>
局部组件
HTML部分：
<body>
<div id="app">
<!-- 使用组件 -->
<Top></Top>
<Bottom></Bottom>
</div>
</body>
JS部分：
let Top={
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"顶部"
}
}
}
Vue.component("Top",Top)
let Bottom={
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"底部"
}
}
}
new Vue({
el:"#app",
components:{//注册局部组件
// "Bottom":Bottom 可简写为Bottom
Bottom
}
})
显示效果：
这是顶部
这是底部
全局组件与局部组件的区别
局部组件只能在他所在的new Vue（）的实例作用域使用
如bottom就只能在#app中使用 全局组件可以在任何vue 实例作用域中使用
注意 注册组件 Vue.component() 一定要在所有new Vue（）之前
组件引用外部模板（两种）
使用外部模板的好处 可以提高复用性
第一种：
HTML部分：
<body>
<div id="app">
<!-- 使用组件 -->
<Top></Top>
<Outside></Outside>
<Bottom></Bottom>
</div>
</body>
<!-- 外部模板 -->
<template id="outside">
<div>
这是{{msg3}}模板
</div>
</template>
JS部分：
//定义组件
let Outside = {
template:"#outside",//选择外部模板
data:function(){
return{
msg3:"外部"
}
}
}
//全局注册组件
Vue.component("Outside",Outside)
let Top={
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"顶部"
}
}
}
Vue.component("Top",Top)
let Bottom={
template:`<header>这是{{msg}}</header>`,
data:function(){
return{
msg:"底部"
}
}
}
new Vue({
el:"#app",
components:{//注册组件
// "Bottom":Bottom 可简写为Bottom
Bottom
}
})
显示效果：
这是顶部
这是外部模板
这是底部
这里我把外部组件以全局的方式注册了组件 当然也可以用局部的方式来注册组件
第二种：
将第一种HTML中的
<template id="outside">
<div>
这是{{msg3}}模板
</div>
</template>
变更为
<script type="x-template" id="outside">
<div>
这是{{msg3}}模板
</div>
</script>
其余不变也能达到同样的目的
显示效果：
这是顶部
这是外部模板
这是底部
