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