Vue.js基础总结(二)

可用过滤器实现某些文本的格式化     过滤器可以用在两个地方：  插值表达式和v-bind表达式


定义格式化时间
<td>{{item.ctime | dateFormat('yyyy-MM-DD')}}</td>

//全局的过滤器，进行时间的格式化
Vue.filter('dateFormat',function(dateStr,pattern){
    //根据给定的时间字符串，得到特定的时间
    var dt=new Date(dateStr);

    var y=dt.getFullYear();
    var m=dt.getMonth()+1;
    var d=dt.getDate();

    if(pattern.toLowerCase()==='yyyy-mm-dd'){
        return '${y}-${m}-${d}'
    }else{
        var hh=dt.getHours();
        var mm=dt.getMinutes();
        var ss=dt.getSeconds();

        return '${y}-${m}-${d} ${hh}:${mm}:${ss}'
    }
})

所谓的全局过滤器，就是所有的VM实例都共享的

ES6的字符串新方法
padStart方法 用于项目中补零的情况   从开始位置填充
var m=(dt.getMonth()+1).toString().padStart(2,'0');

var d=dt.getDate().toString().padStart(2,'0');  先转为字符串再填充


String.prototype.padStart(maxLength,''); maxLength代表填充后的长度，
后一个参数表示用什么来填充


自定义按键修饰符
系统提供的内置的按键修饰符
.enter  .tab   .delete   .esc
.space  .up   .down  .left   .right

实例
<input type="text" v-mode="name" @keyup.enter="add">
表示按enter也同样触发add方法

<input type="text" v-mode="name" @keyup.f2="add">
这样不会触发add方法，因为不是内置的按键

这样修改才可以的
方法1：用码值来实现   f2对应的是113
<input type="text" v-mode="name" @keyup.113="add">

方法2：由于码值113不好记，就取个别名


自定义全局按键修饰符
Vue.config.keyCodes.f2=113;

<input type="text" v-mode="name" @keyup.f2="add">

总结：系统内置提供了几个，若不够用可以自定义的