从 1.x 到 2.x 重要变化
(1) 在每个组件模板,不在支持片段代码
组件中模板:
之前:
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素,包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
(2) 关于组件定义
Vue.extend 这种方式,在2.0里面可以使用,但有些改动
Vue.component(组件名称,{ 在2.0继续能用,但不推荐,推荐使用简洁写法
data(){}
methods:{}
template:
});
2.0 推出一个组件,简洁定义方式:
var Home={
template:'' -> Vue.extend()
};
(3) 生命周期
1.x 版本:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
2.x 版本:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成,属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后,代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
(4) 循环
2.0 里面默认就可以添加重复数据,无需 track by
去掉了隐式一些变量
$index $key
1.x 版本:
v-for="(index,val) in array"
2.x 版本:
v-for="(val,index) in array"
(5) track-by=”id”
2.0 可以直接添加重复数据,所以直接删掉,但是如果还想要提高性能,
变成
<li v-for="(val,index) in list" :key="index">
(6) 自定义键盘指令
1.x 版本:Vue.directive('on').keyCodes.f1=17;
2.x 版本: Vue.config.keyCodes.ctrl=17
(7) 过滤器
1.x 版本:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能,自己通过js实现
2.x 版本, 内置过滤器全部删除
可以自己使用原生JS实现,或者使用 `lodash` 等工具库,例如自定义延迟过滤器:`_.debounce(fn,200)`
自定义过滤器——还有
但是,自定义过滤器传参
1.x 版本: {{msg | toDou '12' '5'}}
2.x 版本: {{msg | toDou('12','5')}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
(8) 组件通信:
vm.$emit()
vm.$on();
父组件和子组件:
子组件想要拿到父组件数据:
通过 props
1.x 版本,子组件可以更改父组件信息,并且可以是父子组件同步更改(使用sync):<child :msg.sync='aa'></child>
2.x 版本,不允许直接给父级的数据,也就是不允许直接给父级的数据进行赋值操作(this.msg='newMsg')
如果希望进行更改:
a). 父组件每次传一个 `对象` (而不是单个的String或者Number类型的数据)给子组件, 对象之间互相引用,
并没有直接对整个对象赋值,而是对 对象 的属性值进行复制, 并且对象是引用类型。
b). 只是不报错, 使用mounted()钩子函数进行中转,不过只能更改子组件本身数据。
mounted(){
this.b=this.parentData
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
(9) 单一事件管理组件通信:
var Event=new Vue();
Event.$emit(事件名称, data)
Event.$on(事件名称,function(data){
//data
}.bind(this));
(10) vue动画
1) transition
1.x 版本 transition 是属性:
<p transition="fade">transition</p>
.fade-transition{}
.fade-enter{}
.fade-leave{}
2.x 版本 transition 是组件:
<transition name="fade">
<p>transition</p>
</transition>
class定义:
.fade-enter{}
.fade-enter-active{}
.fade-leave{}
.fade-leave-active{}
2) 使用
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
多个元素运动,需要放在一个 <transition-group>标签中:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
.fade-enter-active,.fade-leave-active {
transition:1s all ease;
}
.fade-enter-active{
opacity: 1;
width:300px;
height: 300px;
}
.fade-enter,.fade-leave {
opacity: 0;
width:100px;
height: 100px;
}
.fade-leave-active{
opacity: 0;
width:100px;
height: 100px;
}
3) 运动事件
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave='beforeLeave'
@leave='leave'
@after-leave='afetrLeave'>
<p v-if="show">hello</p>
</transition>
4) 配合animate.css
注意:使用animate.css 需要使用 class="animated" 指定需要运动的元素,有以下两种指定的形式:
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
<p v-if="show" class="animated">hello</p>
</transition>
或者
<transition enter-active-class="bounceInLeft animated" leave-active-class="bounceOutRight animated">
<p v-if="show">hello</p>
</transition>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
(11) vue2.0 路由:
http:
1) 布局
<router-link to="/home">主页</router-link>
<router-view></router-view>
2) 路由具体写法
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
const routes=[
{path:'/home', componet:Home},
{path:'/news', componet:News},
];
const router=new VueRouter({
routes
});
new Vue({
router,
el:'#box'
});
3) 重定向
之前 router.rediect 废弃了
{path:'*', redirect:'/home'}
4) 路由嵌套:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'}
];
5) 传值
/user/strive/age/10
:id
:username
:age
6) 路由实例方法:
router.push({path:'home'});
router.replace({path:'news'})
7) 路由切换可以与animate.css配合,产生页面切换动画的效果,类似swiper
8) 脚手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
5. 组件样式
(1) MintUI:适应于移动端
(2) elementUI:适应于PC端