1.什么是组件
组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
2.组件化和模块化的不同
模块化是从代码逻辑的角度进行访问的，方便代码分层开发，保证每个功能模块的职能单一，组件化是从ui界面的角度进行划分的，前端的组件化，方便UI组件的重用
3.创建组件
如果要使用组件，直接，把组件的名称，以HTML标签的形式，引入到页面中，即可
(1)创建组件的第一种方式1.1使用Vue.extend来创建全局的Vue组件
var com1 = Vue.extend({
//通过template属性，制定了组件要展示的html结构
template:'<h3></h3>'
})
1.2使用 Vue.component('组件名称',创建出来的组件模板对象)
//在创建的时候可以写驼峰命名法，但在调用的时候需要写 <my-com1></my-com1>
Vue.component('myCom1',com1)
//Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的，第二个参数：Vue.extend创建的组件，其中template就是组件将来要展示的HTML内容
Vue.component('myCom1',,Vue.extend({
template:'<h3></h3>'
}))
(2)创建组件的第二种方式
//不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
Vue.component('mycom2',{
template:'<h3></h3>'
})
(3)创建组件的第三种方式
<div id="app">
<mycom3></mycom3>
</div>
在被控制的#app外面，使用template元素，定义组件的HTML模板结构
<template id="tmp1">
<h1></h1>
<h4></h4>
</template>
Vue.component('mycom3',{
template:'#tmpl'
})
4.使用componens定义私有组件
<template id="tmp2">
<h1></h1>
<h4></h4>
</template>
components:{
//定义实例内部私有组件
login:{
//template:‘<h1></h1>’
template:"#tmpl2"
}
}
5.组件中的data和methods
//(1).组件可以有自己的data数据
(2).组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法
(3).组件中的data除了必须是一个方法之外，这个方法内部还必须返回一个对象才行
(4).组件中的data数据，使用方式，和实例中的data使用方式完全一样
Vue.component('mycom1',{
template:'<h1>这是全局组件{{msg}}</h1>'
data:function(){
return{
msg:'这是组件中data定义的数据'
}
}
})
var vm = new Vue({
el:"#app",
data:{},
})
6.组件为什么data必须是一个function，还必须返回一个对象
这是一个计数器组件，身上有一个按钮，每当点击按钮，让data中的count值+1
<div id="app">
<counter><counter>
</div>
<template id="tmp1">
<div>
<input type='button' value="+1" @click="increment">
<h3>{{count}}</h3>
<h3>{{count}}</h3>
<h3>{{count}}</h3>
</div>
</template>
var dataObj={count:0}
Vue.component('counter',{
template:'#tmp1',
data:function(){
//点击加号会使所有的数据都加一
return dataObj;
//这个互不影响
return{count:0}
},
mehods:{
increment(){
this.count++
}
}
})
7.组件切换使用v-ifv-else结合flag进行切换
<div id="app">
<a href=" " @click.prevent="flag=true">登录</a>
<a href=" " @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el:"#app",
data:{
flag:true;
},
})
8.使用Vue提供的component元素实现组件切换
<div id="app">
//vue提供了component，来展示对应名称的组件
//component 是一个占位符，:is属性，可以用来指定要展示的组件的名称
<a href=" " @click.prevent="comName='login' ">登录</a>
<a href=" " @click.prevent="comName='register' >注册</a>
//<component :is=" 'login' "></component>
<component :is=" comName "></component>
</div>
//组件名称是字符串
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el:"#app",
data:{
comName:'login'//当前component中的:is绑定的组件的名称
},
})
//当前学习了几个vue提供的标签
component,template,transition,transitionGroup
9.使用切换动画和mode方式
<style>
.v-enter,v-leave-to{
opacity:0;
transform:translateX(150px);
}
v-enter-active,v-leave-acive{
transition:all 0.5s ease;
}
</style>
<div id="app">
<a href=" " @click.prevent="comName='login' ">登录</a>
<a href=" " @click.prevent="comName='register' >注册</a>
//通过mode属性，设置组件切换时候的模式
<transition mode="out-in">
<component :is=" comName "></component>
</transition>
</div>
Vue.component('login',{
template:'<h3>登录组件</h3>'
})
Vue.component('register',{
template:'<h3>注册组件</h3>'
})
var vm = new Vue({
el:"#app",
data:{
comName:'login'//当前component中的:is绑定的组件的名称
},
})
