Vue2.0生命周期
beforeCreate()
组件实例刚刚被创建
created()
实例已经创建完成
beforeMount()
模板编译之前
mounted()
模板编译完成
beforeUpdate()
组件更新之前
updated()
组件更新完毕
beforeDestroy()
组件销毁之前
destroyed()
组件销毁之后
HTML
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
javascript
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
};
</script>
image.png
点击“更新数据”按钮，
执行方法函数
update()，数据对象的msg被重新赋值，重新编译模板，组件重新渲染。打出“组件更新之前”，打出“组件更新完毕”
点击“销毁组件”按钮，
执行方法函数
destroy()，执行组件自带的销毁组件函数this.$destroy。打出“组件销毁之前”，打出“组件销毁之后”
组件定义方式
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()
};
循环
2.0里面默认就可以添加重复数据
arr.forEach(function(item,index){
});
去掉了隐式一些变量
$index $key
之前:
< li v-for="(index,val) in array" track-by="id">
现在:
<li v-for="(val,index) in array" :key="index">
自定义键盘指令
之前：
Vue.directive('on').keyCodes.f1=17;
现在:
Vue.config.keyCodes.ctrl=17
过滤器
内置过滤器
之前:系统就自带很多过滤器
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现
到了2.0， 内置过滤器，全部删除了
自定义过滤器传参
之前:
{{msg | toDou '12' '5'}}
现在:
{{msg | toDou('12','5')}}