vue过滤器和修饰符

一、过滤器

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化

过滤器应该被添加在JavaScript表达式的尾部，由**“管道”符**指示

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值

1、{{变量 | 过滤器名}}

2、{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

全局定义：

通过Vue提供的filter方法定义：Vue.filter()

1、第一个参数：过滤器的名字

2、第二个参数：回调函数 (data,format) data:数据 formet:传递的参数

   //全局过滤器
    Vue.filter('setMsg', function (data, format) {
        console.log(data);
        console.log(format);
        /* 
        好人--**
        */
        return data.replace('好人', '**')
    })
    Vue.filter('setMsg1', function (data, format) {
        console.log(data);
        console.log(format);
        return data.replace('你','*')
    })
     let vm = new Vue({
        el: '#app',
        data: {
            msg: '你是个大好人'
        },
        methods: {

        },
    })

私有定义：

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器

   let vm = new Vue({
        el: '#app',
        data: {
            msg: '你是个大好人'
        },
        methods: {

        },
        // 私有定义
        filters: {
            setMsg(data,formet){
                return data.replace('好人', '**')
            }
        }
    })

二、键盘修饰符

1、注册一个监听按键事件

 监听所有按键：v-on:keyup
 监听指定按键：v-on:keyup.按键码

**注意：**每个键盘按键都会对应一个键盘码，可以参照这个网站[按键码对应网址](https://wenku.baidu.com/view/3f99a76148d7c1c709a14501.html)。

 <input type="text" @keyup="keyup" v-model="value">

2、使用按键别名

vue提供的按键别名

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

  	Vue.config.keyCodes.m = 77
    Vue.config.keyCodes.b = 65
    let vm = new Vue({
        el: '#app',
        data: {
            value: '',
        },
        methods: {
            keyup(event) {
                console.log(event);
                console.log(this.value);
            }
        },
    })

三、自定义指令

1、 全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

第一个参数：指令的名字 定义时不加v- 使用时加上v-

第二个参数：对象

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted 这个元素已经渲染到界面上之后执行

update 当元素有更新的时候执行

这三个方法的参数有哪些

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

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

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive=“1+ 1” 中，绑定值为 2

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。

Vue.directive('color', {
        // bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        // el:当前DOM元素   binding
        bind(el, binding) {
            console.log(el);
            console.log(binding);
            el.style.color = binding.value
        },
        // inserted 这个元素已经渲染到界面上之后执行
        inserted(el){
            console.log(el);
            el.focus()
        },
        // update当元素有更新的时候执行
        update(el){
            console.log(el);

        }
    })
      let vm1 = new Vue({
        el: '#app',
        data: {
            color: 'green',
            value: ''
        },
        methods: {

        },
        
    })

2、私有定义

实例里有个directives属性，这个属性是个对象

里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的

简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

 let vm = new Vue({
        el: '#app',
        data: {
            color: 'green',
            value: ''
        },
        methods: {

        },
        // 私有定义
            color:{
                inserted(el){
                    el.focus()
                },
                bind(el,binding){
                    el.style.color = binding.value
                },
                updated (el) {
                    console.log(el);
                }
            }
            
        }
    })