过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
-私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
2.私有 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}`;
}
}
}
-全局过滤器
// 定义一个全局过滤器 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}`; } });
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
键盘修饰符以及自定义键盘修饰符
1.x中自定义键盘修饰符【了解即可】
Vue.directive('on').keyCodes.f2 = 113;
2.x中自定义键盘修饰符
- 通过
Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
2.使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
自定义指令
1.自定义全局和局部的 自定义指令
// 自定义全局指令 v-focus，为绑定的元素自动获取焦点： Vue.directive('focus', { inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用 el.focus(); } }); // 自定义局部指令 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; } }
2.自定义指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
案例：品牌列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>品牌列表</title> <script src="./vue-2.4.0.js"></script> <link rel="stylesheet" href="./bootstrap.min.css"> </head> <body> <div class="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <lable> ID: <input type="text" class="form-control" v-model="id"> </lable> <lable> Name: <input type="text" class="form-control" v-model="name"> </lable> <input type="button" value="添加" class="btn btn-primary" @click="add(id)"> <lable> search: <input type="text" class="form-control" v-model="keywords" id="search" v-focus> </lable> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="list in search(keywords)" :key="list.id"> <td>{{list.id}}</td> <td v-text="list.name"></td> <td>{{list.ctime | dataFormat}}</td> <td><a href="javascript:;" @click.prevent="del(list.id)">删除</a></td> </tr> </tbody> </table> </div> <script> //自定义全局指令，调用时要以 v- 开头 // 参数一 ： 指令的名称 // 参数二 ： 是一个对象，指令的处理函数 // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(DOM元素可能没有被插入父节点) // // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 // // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。 Vue.directive('focus',{ inserted:function (el) { el.focus(); } }); //全局过滤器 Vue.filter('dataFormat',function (dataStr) { var dt = new Date(dataStr) ; var y = dt.getFullYear(); var m = dt.getMonth() + 1; var d = dt.getDate(); var h = dt.getHours(); var mi = dt.getMinutes(); var s = dt.getSeconds(); //模板字符串 return `${y}-${m}-${d} ${h}:${mi}:${s}`; }); var vm =new Vue({ el:'.app', data:{ id:'', name:'', keywords:'', list:[ {id:1,name:'奔驰',ctime:new Date()}, {id:2,name:'宝马',ctime:new Date()}, ] }, methods:{ add(id){ var index = this.list.findIndex(item => { if(id == item.id){ alert("ID重复"); this.id =this.name =''; }else if(id == ''){ alert("ID为空") } else{ var car ={id: this.id,name: this.name,ctime:new Date()}; this.list.push(car); this.id =this.name =''; } return true; }) }, del(id){ //方法一： //some() 方法测试是否至少有一个元素通过由提供的函数实现的测试 // this.list.some((item,i) => { // if(item.id == id){ // //splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容 // this.list.splice(i,1); // return true; // } // }); //方法二： //findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引 var index = this.list.findIndex(item => { if(item.id == id){ return true; } }); this.list.splice(index,1); }, search(keywords) { // 根据关键字，进行数据的搜索 // 都会对数组中的每一项，进行遍历，执行相关的操作； return this.list.filter(item => { // if(item.name.indexOf(keywords) != -1) // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串') // 如果包含，则返回 true ，否则返回 false // contain if (item.name.includes(keywords)) { return item } }) // return newList } } }); </script> </body> </html>