vue2.X过滤器与修饰符

过滤器

过滤器是vue中用于对文本进行格式化的函数。过滤器用于常见文本的格式化，用在两个地方，插值表达式即大括号内和 v-bind 中

定义全局过滤器

Vue.filter('过滤器的名称',function(){});

<div id="app">
        <p>{{text|format}}</p>
    </div>

 Vue.filter("format", function(val) {
        return val.toUpperCase();
    });
    const app = new Vue({
        el: "#app",
        data: {
            text: "hello world"
        }
    });

调用过滤器

使用时在属性后面使用|（管道符）加上过滤器的名称

{{name | 过滤器的名称}}

可以多次调用

{{name | 过滤器1的名称 | 过滤器2的名称|……}}

注意过滤器2中的得到的值将是过滤器以处理后的值。

定义私有过滤器

在 vue的选项对象 中的filters中定义私有过滤器
过滤器在调用时有就近原则，如果全局过滤器和私有过滤器名称重合，使用私有过滤器

filters:{
	dateFormat:function(){
		//函数体
	}
}

修饰符

修饰符全称事件修饰符，是vue提供的用来实现某一功能的方法

使用修饰符主要是为了减少在事件中对DOM的操作，实现方法只实现数据逻辑，而不是处理DOM细节。

修饰符语法

在事件名后用 . 开头的指令后缀

 <div id="app" style="background-color:red;">
        <div @click="print">
            <input type="button" @click.stop="print" value="btn">
        </div>

    </div>
const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            print() {
                console.log("clicked");
            }
        }
    })

没有使用修饰符之前，点击btn会打印两个clicked

使用修饰符之后，点击btn只打印一个clicked

常见的修饰符有

• stop：停止事件分发
• prevent：阻止默认事件
• capture：添加事件监听器时使用事件捕获模式
• once：只执行一次
• ……
  注意：在使用修饰符的时候，要注意顺序，你可以把修饰符看做相应的代码，修饰符的位置相当于改代码的位置，比如，stop修饰符，@click.stop就相当于把event.topPropagation()放在后面，由此顺序不同造成效果不同

<div id="app">
        <div @click="print" style="background-color:greenyellow">
            <div @click.stop.self="print">
                <input type="button" @click="print" value="btn">
            </div>
        </div>
    </div>
    const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            print() {
                console.log("clicked");
            }
        }
    })

使用 @click.stop.self 的顺序时阻止了当前和其父元素的冒泡

使用 @click.self.stop="print" 顺序时，只阻止了当前元素自身的冒泡