自定义指令

自定义指令

vue中提供了丰富的内置指令，如v-if,v-bind,v-on…,当这些内置指令不能满足我们需求时，我们还可以通过全局的自定义指令Vue.directive({})或者局部的自定义指令directives:{}来定义指令，

他们都有两个参数，第一个是指令的名字，第二个是钩子函数

钩子函数：

1.bind: 只会被调用一次，指令第一次绑定到元素时调用

2.inserted: 当被绑定的元素插入到父元素中时调用（此处的父元素不局限于document中）

3.update: 不论被绑定的值是否发生了变化，在模板更新时都会被调用，

4.componentUpdated:被绑定的元素在模板完成一次更新周期时调用，

5.unbind: 只调用一次，元素解绑时调用

参数：

1.el: 指令所绑定的DOM元素，可以直接用来操作DOM

​ 2.binding: 一个对象，包含以下属性

​ name: 指令的名称

​ value： 指令绑定的值

​ oldValue: 指令绑定前一个值

​ expression: 绑定值的字符串形式

​ arg： 传给指令的参数

​ modifiers: 这是一个包含修饰符的对象

过滤器

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器

全局过滤器 是在多个实例中可以使用的过滤器

Vue.filter(“过滤器的名字”，function(value){
	// value是调用过滤器的属性的值
})

局部过滤器 只是在当前的组件或者实例中使用

filters:{
	名：function(val){	

}

}

里面都有两个参数第一个是过滤器的名字，第二个是过滤器函数。过滤器函数以值作为参数，返回转换后的值，他可以接收任意数量的参数

调用过滤器可以用双花括号插值和 v-bind 表达式

过滤器可以串联 但是后面的肯定是以前面的为基础，他们都用管道符链接

他可以使用在我们项目中的搜索，日期转换，购物车中的价格之类