Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板：
之前:
<template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template>
现在: 必须有根元素，包裹住所有的代码
例如：
<script> var Home={ template:'#aaa' }; window.onload=function(){ new Vue({ el:'#box', data:{ msg:'welcome vue2.0' }, components:{ 'aaa':Home } }); }; </script> <body> <template id="aaa"> <div> <h3>我是组件</h3> <strong>我是加粗标签</strong> </div> </template> <div id="box"> <my-aaa></my-aaa> {{msg}} </div> </body>
生命周期：
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
Destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销
例如：
new Vue({ 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('组件销毁之后'); } }); <div id="box"> <input type="button" value="更新数据" @click="update"> <input type="button" value="销毁组件" @click="destroy"> {{msg}} </div>
循环：
2.0里面默认就可以添加重复数据
去掉了隐式一些变量
$index $key
之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"
track-by="id"
变成
<li v-for="(val,index) in list" :key="index">
例如：
<script> window.onload=function(){ new Vue({ el:'#box', data:{ list:['width','height','border'] }, methods:{ add(){ this.list.push('background'); } } }); }; </script> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="(val,index) in list"> {{val}} {{index}} </li> </ul> </div>
自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
例如：
<script>
//Vue.directive('on').keyCodes.ctrl=17;
Vue.config.keyCodes.ctrl=17;
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
};
</script>
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list" :key="index">
{{val}} {{index}}
</li>
</ul>
</div>
过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现
到了2.0， 内置过滤器，全部删除了
自定义过滤器——还有
但是,自定义过滤器传参
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
例如：
<script> Vue.filter('toDou',function(n){ //alert(input); return n<10?'0'+n:''+n; }); window.onload=function(){ new Vue({ el:'#box', data:{ msg:9 } }); }; </script>
例如：
<script> Vue.filter('toDou',function(n,a,b){ alert(a+','+b); //alert(input); return n<10?'0'+n:''+n; }); window.onload=function(){ new Vue({ el:'#box', data:{ msg:9 } }); }; </script> <div id="box"> {{msg | toDou('12','5')}} </div>
