Vue学习笔记（三）

假期开始了.jpg

注意：

因为沙雕HEXO，我的{{和}}如果不用代码块框起来就会无法上传文章（可我框起来也不行，mdzz），所以所有的{{和}}都使用【【和】】代替

1.在Vue中使用事件绑定机制，为元素指定处理函数时，可以添加一个括号给函数传参，如：

<input type="button" value="添加" class="btn btn-primary" @click="add()">

<a href="" @click.prevent="del(item.id)">删除</a>

2.手动实现筛选的方法

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

例如

<li v-for="n in evenNumbers">【【 n 】】</li>


data: { 
numbers: [ 1, 2, 3, 4, 5 ] 
}, 
computed: { 
evenNumbers: function () { 
return this.numbers.filter(function (number) { 
return number % 2 === 0 
  }) 
 } 
}

在计算属性不适用得情况下（如在嵌套v-for循环中）你可以使用一个方法，在使用 v-for 指令循环每一行数据的时候，不再直接 n in evenNumbers，而是 in 一个过滤的methods 方法，同时，把过滤条件numbers传递进去：

<li v-for="n in even(numbers)">【【 n 】】</li>


data: { 
numbers: [ 1, 2, 3, 4, 5 ] 
}, 
methods: { 
even: function (numbers) { 
return numbers.filter(function (number) { 
return number % 2 === 0 
        }) 
    } 
}

2.过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
如<td>【【item.ctime | dataFormat('yyyy-mm-dd')】】</td>

私有过滤器filters定义方式：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用 
dataFormat(input, pattern = "")  { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);      
// 获取年月日      
var y = dt.getFullYear();      
var m = (dt.getMonth() + 1).toString().padStart(2, '0');      
var d = dt.getDate().toString().padStart(2, '0');     

// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日      
// 否则，就返回  年-月-日 时：分：秒      
if (pattern.toLowerCase() === 'yyyy-mm-dd') {        
    return `${y}-${m}-${d}`;      
} else {        
    // 获取时分秒        
    var hh = dt.getHours().toString().padStart(2, '0');        
    var mm = dt.getMinutes().toString().padStart(2, '0');        
    var ss = dt.getSeconds().toString().padStart(2, '0');

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;     
    }    
  } 
}

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

比如将显示11：2：8填充为11：02：08

全局过滤器filter定义方式

// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {  
    var dt = new Date(input);  
    // 获取年月日  
    var y = dt.getFullYear();  
    var m = (dt.getMonth() + 1).toString().padStart(2, '0');  
    var d = dt.getDate().toString().padStart(2, '0');  


    // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日  
    // 否则，就返回  年-月-日 时：分：秒  
    if (pattern.toLowerCase() === 'yyyy-mm-dd') {    
        return `${y}-${m}-${d}`;  
    } else {    
    // 获取时分秒    
    var hh = dt.getHours().toString().padStart(2, '0');    
    var mm = dt.getMinutes().toString().padStart(2, '0');    
    var ss = dt.getSeconds().toString().padStart(2, '0');    


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

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

4.Vue2.x中自定义键盘修饰符

可以通过全局config.keyCodes对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1` 

Vue.config.keyCodes.f1 = 112

使用自定义得按键修饰符

1	<input type="text" v-model="name" @keyup.f1="add">

5.自定义指令

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

Vue.directive('focus', {      
    inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();      
    }    
  });    

  //如果想注册局部指令，组件中也接受一个 directives 的选项
  // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：      
    directives: { 
        color: { // 为元素设置指定的字体颜色
            bind(el, binding) {
                el.style.color = binding.value;
              }
            },       
            'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数          
            el.style.fontWeight = binding2.value;
            }
         }

自定义指令的使用方式

1	<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">