vue过滤器 ,自定义指令
- filter 格式化文本输出 其实就是在不改变原来变量的同时将变量换一种形式输出
过滤器分为全局过滤器 局部过滤器 全局过滤器是在各个实例中或者多个组件中使用的过滤器 局部是在单个组件或者单个实例中使用的过滤器
全局过滤器的定义:
Vue.filter("名",(val)=>{
val为形参,调用过滤器的变量的值
})
调用:
{{变量|过滤器名|过滤器名}}
局部过滤器
filters:{
名(val){
}
}
过滤器是可以串联的,可以调用多个
自定义指令
directives 根据自己的需要,定义一些特殊的属性来方便我们操作数据 这些属性是以v-来开头的
语法:
局部
directives:{
指令名:{
bind(){}
inserted(){}
update(){}
componentUpdated(){}
unbind(){}
}
}
- 钩子参数: el 当前的dom binding 参数对象
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update:
被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
- 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM 。 binding: 一个对象,包含以下属性: name:
指令名,不包括 v- 前缀。 value: 指令的绑定值, 例如: v-my-directive=“1 + 1”, value 的值是
2。 oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” , expression 的值是
“1 + 1”。 arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰 符对象 modifiers
的值是 { foo: true, bar: true }
。
全局自定义指令
Vue.directive("名",{
指令钩子
})