vue过滤器 ,自定义指令

本文深入探讨Vue.js中的过滤器和自定义指令的使用方法,讲解了全局与局部过滤器的区别,以及如何定义和使用自定义指令,包括bind、inserted等钩子函数的作用和参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue过滤器 ,自定义指令

  1. filter 格式化文本输出 其实就是在不改变原来变量的同时将变量换一种形式输出
过滤器分为全局过滤器  局部过滤器 	全局过滤器是在各个实例中或者多个组件中使用的过滤器 	局部是在单个组件或者单个实例中使用的过滤器
全局过滤器的定义:
	Vue.filter("名",(val)=>{
		val为形参,调用过滤器的变量的值
	})
	调用:
	{{变量|过滤器名|过滤器名}}
局部过滤器
filters:{
	名(val){
	
	}	
}

过滤器是可以串联的,可以调用多个

自定义指令

directives 根据自己的需要,定义一些特殊的属性来方便我们操作数据 这些属性是以v-来开头的

语法:
局部
directives:{
	指令名:{
		bind(){}
		inserted(){}
		update(){}
		componentUpdated(){}
		unbind(){}
	}
}
  1. 钩子参数: el 当前的dom binding 参数对象

    bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

    inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

    update:
    被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

    componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

    unbind: 只调用一次, 指令与元素解绑时调用。

  1. 钩子函数的参数 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("名",{
	指令钩子	
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值