四.过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

1.私有过滤器

1.基本格式

（1)定义一个私有过滤器

​ 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

在vm2中定义过滤器的时候，虽然它加了s，但是它也是对象，不是数组

var vm2 = new Vue({ el: '#app2', data: { dt: new Date() }, methods: {}, //定义私有过滤器：过滤器有两个条件 【过滤器名称 和 处理函数】 filters: { dateFormat: function (dateStr, pattern = '') {} })

（2）调用私有过滤器

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器。

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

2.全局过滤器

1.过滤器的基本使用

（1）在js中定义一个全局过滤器

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

Vue.filter('过滤器的名称', function (msg) {} 过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据 Vue.filter('过滤器的名称', function (data) { return data + '123' })

（2）调用过滤器

过滤器调用时候的格式 {{ name | 过滤器的名称 }} <p>{{ msg | dateFormat}}</p>

2.过滤器也可以传参

过滤器的第一个参数是拿到调用过滤器的第一个值，其他还可以传递多个参数

（1）定义一个过滤器 Vue.filter('dataFormat', function (item.ctime,arg ) {} （2）调用过滤器 <p>{{ item.ctime | dateFormat("快乐")}}</p>

3.可以多次调用过滤器

（1）定义过滤器 Vue.filter('dataFormat', function (msg,arg ) {} Vue.filter('text', function (msg) {} （2）调用过滤器 <p>{{msg | dateFormat("快乐")| text}}</p>

4.应用

（1）定义一个全局过滤器

补充Es6知识点

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

也就是说，当出现1秒2秒，1分两分的时候，会自动补上0

Vue.filter('dataFormat', function (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}`; } });

（2）调用过滤器

<td>{{ item.ctime | dateFormat() }}</td> 如果不传参数dateFormat()，可以写成pattern = ''，这是ES6里面参数默认值的用法

五.按键修饰符

1.已有的按键修饰符的使用

<input type="text" class="form-control" v-model="name" @keyup.enter="add">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

2.自定义按键修饰符

（1）基础

当有些按键没定义的时候，可以直接用它的数字码

<input type="text" class="form-control" v-model="name" @keyup.13="add"> //enter=13

（2）进阶

但是数字码不好记，所以可以自定义一个，也就是给他起一个名字

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名： Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符： <input type="text" v-model="name" @keyup.f2="add">

六.自定义指令

1.自定义全局指令

和js行为有关的，最好在inserted中在执行；和样式有关的，最好在bind中执行

参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用

参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

2.钩子函数

（1）一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

（2）指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding

：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue.directive('focus', { <------------函数方法一：bind-----------------------------> bind: function (el) { 【 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用 因为，一个元素，只有插入DOM之后，才能获取焦点】 el.focus() }, <------------函数方法二：inserted----------------------------> inserted: function (el) { //inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】 el.focus() //和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效 }, <------------函数方法三：updated---------------------------> updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次 } })

2.全局指令应用

（1）自定义的全局指令

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点： Vue.directive('focus', { inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象 // 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用 // 因为，一个元素，只有插入DOM之后，才能获取焦点 // el.focus() 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">