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方式
.v-enter,v-leave-to{
opacity:0;
transform:translateX(150px);
}
v-enter-active,v-leave-acive{
transition:all 0.5s ease;
}
Vue.component('login',{
template:'
登录组件
'})
Vue.component('register',{
template:'
注册组件
'})
var vm = new Vue({
el:"#app",
data:{
comName:'login'//当前component中的:is绑定的组件的名称
},
})