参考链接:https://www.php.cn/js-tutorial-420232.html
1、生命周期函数
(1)vue1.0
周期 | 解释 |
---|---|
init | 组件刚刚被创建,但Data、method等属性还没被计算出来 |
created | 组件创建已经完成,但DOM还没被生成出来 |
beforeCompile | 模板编译之前 |
compiled | 模板编译之后 |
ready | 组件准备(平时用得较多) |
attached | 在 vm.$el 插入到DOM时调用 |
detached | 在 vm.$el 从 DOM 中删除时调用 |
beforeDestory | 组件销毁之前 |
destoryed | 组件销毁之后 |
(2)vue2.0
周期 | 解释 |
---|---|
beforeCreate | 组件刚刚被创建,但Data、method等属性还没被计算出来 |
created | 组件创建已经完成,但DOM还没被生成出来 |
beforeMount | 模板编译之前 |
mounted | 模板编译之后,组件准备 |
beforeUpdate | 组件更新之前(数据等变动的时候) |
updated | 组件更新之后(数据等变动的时候) |
activated | for keep-alive,组件被激活时调用 |
deactivated | for keep-alive,组件被移除时调用 |
beforeDestory | 组件销毁之前 |
destoryed | 组件销毁之后 |
2.0生命生命周期变化感觉变得更加语义化一点(有规律可寻,更好记了),而且增加了beforeUpdate、updated、activated、deactivated,删除了attached、detached。
2、过滤器
(1)vue1.0
自带过滤器。
定义方式:vue.filter('过滤器名字',fn)
调用方式:{{msg | filterName'12' '5'}}
(2)vue2.0
2.0移除了自带过滤器,但是保留了自定义过滤器的功能。
定义方式:vue.filter('过滤器名字',fn)
调用方式:{{msg | filterName('12','5')}}
以下是一个自定义过滤器示例:
Vue.filter('toDou',function(n,a,b){ return n<10?n+a+b:''+n; });
3、循环
关于整数循环,1.0的整数循环是从0开始的,2.0的整数循环是从1开始的,下面对比:
//HTML代码
- for='val in 5' v-text='val'>
4、代码片段
编写template的时候,2.0必须要用一个根元素(如div)将代码片段包裹起来,否则报错。
// 1.0我是组件
我是加粗标签 // 2.0: 必须有根元素,包裹住所有的代码我是组件
我是加粗标签
5、组件定义
(1)vue1.0
1)定义组件的方式:
Vue.extend 这种方式,在2.0里面有,但是有一些改动
Vue.component(组件名称,{ 在2.0继续能用
data(){
}
methods:{
}
template:
});
2)局部注册
var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ template: '...', components: { //will only be available in Parent's template 'my-component': Child } })
(2)vue2.0
1)定义组件的方式:
var Home={ template:'' -> 相当于Vue.extend()
};
2)局部注册:
var Child = { template: 'A custom component!'}new Vue({ // ... components: { //将只在父模板可用 'my-component': Child } })
6、给元素付唯一值
(1)vue 1.0 trace-by的方式
(2)vue 2.0 key的方式
7、自定义键盘指令
(1)vue1.0
Vue.directive('on').keyCodes.f1=17
(2)vue2.0
Vue.config.keyCodes.ctrl=17