vue过滤器和修饰符

---

vue过滤器和修饰符

1、vue的过滤器

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

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

使用语法：
{{变量 | 过滤器名}}（竖线叫做管道符）
{{变量 | 过滤器 | 另一个过滤器}}
可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

(1)、全局定义：

通过Vue提供的filter方法定义：Vue.filter()
参数1 名字 参数二 函数（数据，格式(传递参数)）

注意事项：
1.函数的第一个参数都是data，也就是我们要过滤的值。
2.过滤器可以自定义一些参数。
3.过滤器函数的返回值就是最终显示的值

<div id='app'>
   <div>{{msg}}</div>
   <div>{{msg | getStar()}}</div>
   <!-- 你是个** -->
   <div>{{msg | getStar() |getStar2()  }}</div>
   <!-- *是个** -->
</div>

<script>
        // 参数1 名字  参数二 函数（数据，格式(传递参数)）
        Vue.filter('getStar',function(data,format){
            console.log(data);
            console.log(format);
            // 坏人 **
            return data.replace("坏人","**")
        })
        // 参数1 名字  参数二 函数（数据，格式(传递参数)）
        Vue.filter('getStar2',function(data,format){
            console.log(data);
            console.log(format);
            // 坏人 **
            return data.replace("你","*")
        })
    const vm = new Vue({
        el: '#app',
        data: {
            msg:"你是个坏人"
        },
        methods: {
        },
    })
</script>

(2)、私有定义：

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

<div> {{num}}</div>
<!-- 66 -->
<div> {{num | addn(4)}}</div>
<!-- 70 -->

    const vm = new Vue({
        el: '#app',
        data: {
            num:66
        },
        methods: {
        },
        // 私有过滤器
        filters:{
            addn(data,n){
                return data + n
            },
        }
	})

2、按键修饰符

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码
可以自定义按键别名
如：Vue.config.keyCodes.f1 = 112

3、自定义vue的指令

(1)、全局定义：

Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）
2. 对象，里面包含三个钩子方法
   （1）bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
   （2）inserted 这个元素已经渲染到界面上之后执行
   （3）update 当元素有更新的时候执行
3. 这三个方法的参数有哪些？
   （1）el：指令所绑定的元素，可以用来直接操作 DOM 。
   （2）binding：一个对象，包含以下属性：
   （3）name：指令名，不包括 v- 前缀。
   （4）value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
   （5）oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

<div v-color="'#000'+'333'">你好</div>

Vue.directive('color', {
    // 这个三个方法第一个参数都是el，原生的dom对象
    // vue检测到指令绑定到界面元素的时候会执行这个方法
    bind(el, bind) {
        // 这些样式就相当于我们这个元素属性
        el.style.color = bind.value;
    },
    // 当我们这个元素插入到dom树的时候，会调用这个方法
    // 在执行这个方法的时候界面上的元素已经显示出来
    inserted(el) {
		
    },
    // 当组件进行更新的时候会调用这个方法
    update(el) {
    }
})

(2)、私有定义：

• 实例里有个directives属性，这个属性是个对象
• 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
• 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

var vm = new Vue({
    el: '#app',
    directives: {
        color(el, bind) {
            el.style.color = 'blue';
        },
        focus: {
            inserted(el) {
                el.focus();
            },
            bind(el) {
            },
            updated() {
            }
        }
    }
})