vue 自定义键盘组件_Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器...

组件模板：

之前:

我是组件

我是加粗标签

现在:  必须有根元素，包裹住所有的代码

例如：

var Home={

template:'#aaa'};

window.οnlοad=function(){newVue({

el:'#box',

data:{

msg:'welcome vue2.0'},

components:{'aaa':Home

}

});

};

我是组件

我是加粗标签

{{msg}}

生命周期：

之前:

init

created

beforeCompile

compiled

ready √ ->     mounted

beforeDestroy

Destroyed

现在:

beforeCreate 组件实例刚刚被创建,属性都没有

created 实例已经创建完成，属性已经绑定

beforeMount 模板编译之前

mounted 模板编译之后，代替之前ready  *

beforeUpdate 组件更新之前

updated 组件更新完毕 *

beforeDestroy 组件销毁前

destroyed 组件销

例如：

newVue({

el:'#box',

data:{

msg:'welcome vue2.0'},

methods:{

update(){this.msg='大家好';

},

destroy(){this.$destroy();

}

},

beforeCreate(){

console.log('组件实例刚刚被创建');

},

created(){

console.log('实例已经创建完成');

},

beforeMount(){

console.log('模板编译之前');

},

mounted(){

console.log('模板编译完成');

},

beforeUpdate(){

console.log('组件更新之前');

},

updated(){

console.log('组件更新完毕');

},

beforeDestroy(){

console.log('组件销毁之前');

},

destroyed(){

console.log('组件销毁之后');

}

});

{{msg}}

循环：

2.0里面默认就可以添加重复数据

去掉了隐式一些变量

$index $key

之前:

v-for="(index,val) in array"

现在:

v-for="(val,index) in array"

track-by="id"

变成

例如：

el:'#box',

data:{

list:['width','height','border']

},

methods:{

add(){this.list.push('background');

}

}

});

};

• {{val}} {{index}}

自定义键盘指令

之前：Vue.directive('on').keyCodes.f1=17;

现在:  Vue.config.keyCodes.ctrl=17

例如：

//Vue.directive('on').keyCodes.ctrl=17;Vue.config.keyCodes.ctrl=17;

window.οnlοad=function(){newVue({

el:'#box',

data:{

},

methods:{

change(){

alert('改变了');

}

}

});

};

el:'#box',

data:{

list:['width','height','border']

},

methods:{

add(){this.list.push('background');

}

}

});

};

• {{val}} {{index}}

过滤器

之前:

系统就自带很多过滤

{{msg | currency}}

{{msg | json}}

....

limitBy

filterBy

.....

一些简单功能，自己通过js实现

到了2.0， 内置过滤器，全部删除了

自定义过滤器——还有

但是,自定义过滤器传参

之前: {{msg | toDou '12' '5'}}

现在: {{msg | toDou('12','5')}}

例如：

return n<10?'0'+n:''+n;

});

window.οnlοad=function(){newVue({

el:'#box',

data:{

msg:9}

});

};

例如：

alert(a+','+b);//alert(input);

return n<10?'0'+n:''+n;

});

window.οnlοad=function(){newVue({

el:'#box',

data:{

msg:9}

});

};

{{msg| toDou('12','5')}}