1. 过滤器

• 一般用于将后端传给前端的数据中满足用户条件的内容进行过滤的功能
• 我们可以手动实现自己的过滤器，也可以使用 Vue 提供的局部跟全局过滤器
• 实现的时候我们需要将要过滤的条件作为参数传入过滤函数中，过滤函数中用迭代器将每个元素与传入的关键词进行匹配
• 如果匹配成功就将其传入我们定义的一个临时变量，最后将这一临时变量返回即可
• 也就是说我们的 v-for 接受的不再是一个数组，而是一个函数，这个函数会接受一个参数
• 在函数内部我们再将我们要展示的数组进行处理即可

html

<input type="text" name="" v-model:value="keyWords" />
<div v-for="item in search(keyWords)">
  <li>{{item}}</li>
</div>

• 其中 input 标签是用来接受并修改我们的条件关键词的
• search 函数是用于返回满足条件的数组的

javascript

//根据关键词进行数据的展示
search: function (keyWords) {
    //用于返回满足条件的数组
    let newList = []
    this.itemList.forEach(element => {
        //判断关键词是否在对象中name属性中出现
        if (element.name.indexOf(keyWords) != -1) {
            newList.push(element)
        }
    });
            //给用户返回满足条件的对象组成的数组
            return newList
        }

• 我们也可以使用 ES6 里面的 includes 方法来代替 indexOf

2. Vue 中的过滤器

• Vue 给我们提供了一些全局过滤器跟私有过滤器，用于将一些数据进行格式化或者进行过滤

• 过滤器可以用于两个地方，一个是插值表达式：{{}} 第二个是 v-bind：:xxx

• 下面是一段对v-bind使用过滤器的例子

• v-bind:href="info.id|getTitleHref"
  

• 过滤器应该被用在 JavaScript 表达式的尾部，用管道符:|来与被过滤的对象隔开

• 这一思想与 Linux 内部的用法如出一辙

• 过滤器说到底也是一个函数，在调用时候的格式就要遵循管道符的用法，也就是在展示被展示的变量之前会先调用过滤器对内容进行过滤

• 在过滤完成之后将过滤后的内容展示出来

• 过滤器有全局过滤器，私有过滤器之分

• 全局过滤器用Vue.filter('过滤器名称',function(){})来定义，也就是第一个参数传入过滤器的名称，第二个参数是一个用于处理被传入的数据的回调函数

• 过滤器第二个参数接受的第一个参数就是要通过过滤器的数据,处理完每个数据之后再返回出去即可

全局过滤器

<div v-for="item in itemList">
  <p>{{item.number | dollarFilter}}</p>
</div>

Vue.filter("dollarFilter", function(data) {
  return data + "$";
});

• 这样一操作之后我们输出的内容后面都会加上一个$符号
• 过滤器还可以接受参数，也就是说我们第一个参数会是我们要处理的数据，之后的参数就可以用来接受调用的地方给我们传回的参数，我们只需要在过滤器内部定义这些行为就可以了，在调用的时候也需要将内容传过去
• 同样，我们也可以传入更多的参数，只要我们后期处理就可以了，下面只会给出两个参数的情况

<div v-for="item in itemList">
  <p>{{item.number | dollarFilter('$$$') }}</p>
</div>

Vue.filter("dollarFilter", function(data, arg) {
  return data + arg;
});

• 过滤器也可以被多次调用
• 也可以在一个内容身上使用多个过滤器

<div id="app">
  <input type="text" name="" v-model:value="keyWords" />
  <div v-for="item in search(keyWords)">
    <li>{{item}}</li>
  </div>
  <div v-for="item in itemList">
    <p>{{item.number | dollarFilter('$$$$') | otherFilter}}</p>
  </div>
  <p>{{ itemList[1].number | dollarFilter('xxxx') }}</p>
</div>

Vue.filter("otherFilter", function(data) {
  return data + "-----------";
});

Vue.filter("dollarFilter", function(data, arg) {
  return data + arg;
});

• 出来的结果就是在$$$$ 后面加了一堆-----

3. 定义私有过滤器

• 私有过滤器属于 Vue 实例中所在的实例
• 使用 filters 属性在 Vue 实例中定义自己的私有过滤器
• 定义方式与 methods 中的方法的定义方式相同

html

<div v-for="item in itemList">
  <li>{{ item.number | xxx }}</li>
</div>

filters: {
        xxx: function (data) {
            if (data % 2 === 0) {
                return data
            } else {
                return 'this is not double'
            }
        }
    }

4. 自定义按键修饰符

• 有些时候我们需要满足当按下某些按键的时候触发某个方法
• 这时候我们就需要用到按键修饰符了
• 也就是作用在键盘事件上面的各种修饰符
• 按键修饰符的用法是在绑定按键事件监听的时候用点修饰符在被绑定的事件上面进行修饰
• Vue 中默认定义的一些按键修饰符有：.enter .tab .space .up .left .right .down ....
• 有些我们想要绑定的按键修饰符可能没有在这些里面出现，这时候我们可以先在网上找到每个键盘的键盘码
• 并且在Vue.config.keyCodes.f1 = 112里面定义自己的键盘码，之后的键盘修饰符就可以使用自己定义的键盘码

html

<div>{{ inputText }}</div>
<input type="text" name="" id="" @keyup.enter="setText" />

setText: function (el) {
            this.inputText = el.target.value
        }

5. 自定义全局指令

• 指令有很多优点，我们可以直接用到元素上面
• 但是我们到目前为止接触到的全是 Vue 中默认的指令，实际上我们可以定义自己的全局或者局部指令
• 指令其实是有生命周期的，因此我们可以使用指令的生命周期给其定义一些特殊的行为
• 指令的生命周期有：
• bind：只调用一次，在元素被第一次调用的时候进行调用，可以用于初始化设置，也就是在内存中就执行了，一般将一些样式相关的处理函数绑定到这个生命周期上面
• inserted：被绑定的元素插入父节点时调用，一般将一些 javascript 行为相关的操作绑定的到这个钩子函数上面
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。
• 这些中一般常用的生命周期就是 bind 跟 inserted 这两个生命周期
• 当我们定义一些自定义指令的时候若只用到了这两个生命周期的话我们可以进行简写
• 指令也有一些默认参数，分别为：el,binding,vnode,oldnode
• 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 }。
• 其中 value 跟 expression 两个参数较为重要
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

html

<input type="text" name="" id="" v-focus="'red'">

javascript

//全局指令的定义
Vue.directive('focus', {
    //Vue实例初始化的时候的钩子函数,这一段的作用是可以将输入的内容变成颜色为红色的内容
    bind: function (el, binding) {
        el.style.color = binding.value
    },
    //Vue实例在被装载到dom树之后要触发的钩子函数
    inserted: function (el) {
        el.focus()
    },
    //之后的一次些钩子函数都不是常用的钩子函数
    //有数据更新的时候触发的钩子函数
    update: function () {

    },
    //组件被更新，也就是组件中数据更新的时候触发的钩子函数
    componentUpdated: function () {

    },
    //解除绑定的时候触发的钩子函数
    unbind: function () {

    }
})

自定义局部指令

• 自定义局部指令可以被用于一个实例身上
• 下面直接给出例子

html

<p v-font-size="90">yerts</p>

 directives: {
        fontSize: {
            //这一段代码可以将被使用的元素中字体大小调节为输入的大小
            bind: function (el, binding) {
                el.style.fontSize = binding.value.toString() + 'px'
            },
            inserted: function () {

            },
            update: function () {

            },
            componentUpdated: function () {

            },
            unbind: function () {

            }
        }
    }

简写指令的方式定义

• 当我们不关心指令的生命周期的时候我们可以通过以下这种方式来简写指令

fontWeight: function (el, binding) {
            el.style.fontWeight = Number(binding.value)
        }

<p v-font-size="90" v-font-weight="900">yerts</p>

6. 组件的生命周期

• 从Vue实例被挂载到dom树到销毁这个dom树的过程中其实伴随着很多钩子函数
• 通过对其钩子函数加一些特定的处理方法，我们可以更系统地控制我们实例的生命周期

• Vue中的生命周期有以下几个,我们直接给出官网中给出的生命周期函数的图片做演示

  
  
  lifecycle.png