自定义指令

简介: 自定义指令的基本用法和组件类似分全局注册和局部注册,区别就是把component换成了derective钩子函数

自定义指令的基本用法

和组件类似分全局注册和局部注册,区别就是把component换成了derective

钩子函数

指令定义函数提供了几个钩子函数(可选):

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

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

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

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

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

钩子函数的参数有:

el: 指令所绑定的元素,可以用来直接操作 DOM 。

binding: 一个对象,包含以下属性:

name:

指令名,不包括 v- 前缀。

value:

指令的绑定值,例如:v-my-directive='1 + 1', value 的值是 2。

oldValue:

指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无 论值是否改变都可用。

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 }

vnode:

Vue 编译生成的虚拟节点。

oldVnode:

上一个虚拟节点,仅在update和componentUpdated钩子中可用。

代码示例

//自定义的指令
<div v-cuihua:ergou.a.b.c="pbq">
data:{
  obq:'我是自定义指令所绑定的值'
}

4822650a9d50470b96714912459915b.png

目录
相关文章
|
算法 搜索推荐 Java
DES - 对称加密算法简要介绍与JAVA实现
DES - 对称加密算法简要介绍与JAVA实现
863 2
|
2月前
|
弹性计算 人工智能 前端开发
2026阿里云轻量应用服务器详解:免费试用、费用价格、200M带宽优势及问题解答FAQ
阿里云轻量应用服务器以38元/年起、200M峰值带宽、开箱即用等优势,成为个人开发者、学生及初创企业的首选。本文详解免费试用、最新价格、带宽优势与FAQ,助你轻松选购。(239字)
|
数据挖掘 算法 编解码
带你读《数据挖掘导论(原书第2版)》之二:数据
本书所涵盖的主题包括:数据预处理、预测建模、关联分析、聚类分析、异常检测和避免错误发现。通过介绍每个主题的基本概念和算法,为读者提供将数据挖掘应用于实际问题所需的必要背景。
|
7月前
|
弹性计算 运维 安全
区别及选择指南:阿里云轻量应用服务器与ECS云服务器有什么区别?
阿里云轻量应用服务器适合个人开发者、学生搭建博客、测试环境,易用且性价比高;ECS功能更强大,适合企业级应用如大数据、高流量网站。根据需求选择:轻量入门首选,ECS专业之选。
476 2
|
3月前
|
Web App开发 人工智能 机器人
2026年阿里云无影云电脑部署OpenClaw(Clawdbot)小白零基础教程
在AI自动化工具飞速发展的2026年,OpenClaw(原Clawdbot)凭借其轻量高效、开源免费、全场景适配的核心优势,成为个人办公提效、企业轻量化数字化转型的首选工具。与传统聊天机器人不同,OpenClaw并非单纯的对话工具,而是一款具备真实操作能力的个人AI助手,可实现邮件管理、日历规划、网页自动化、多平台IM集成等多种功能,既能部署在本地设备,也能完美适配阿里云无影云电脑,兼顾便捷性与云端稳定性,即便毫无技术基础的小白,也能快速完成部署落地。
360 1
|
4月前
|
机器学习/深度学习 弹性计算 人工智能
2026年阿里云GPU云服务器租用收费标准与活动价格,包月5折起,包年4折起
阿里云GPU云服务器,作为云服务器ECS的增强版,支持灵活的月付与年付方式,专为深度学习、科学计算、图形可视化及视频处理等高性能需求场景设计。本文旨在详尽汇总并分析2026年阿里云GPU云服务器的最新收费标准及优惠活动,以表格形式直观呈现,供您参考决策。
|
5月前
|
存储 弹性计算 安全
阿里云服务器2核4G收费标准和活动价格参考:u1实例2核4G5M199元,u2a实例504.60元起
现在租用阿里云服务器2核4G配置价格是多少?u1实例2核4G5M带宽有特惠,价格为199元1年,经济型e实例2核4G1M带宽活动价格为599.93元1年起,通用算力型u2a实例2核4G3M带宽的活动价格为648.60元1年,计算型c9a实例2核4G5M带宽活动价格为2938.22元1年起。本文为大家介绍阿里云服务器2核4G配置的实例规格收费标准与最新活动价格情况,以供参考。
1032 1
|
5月前
|
网络协议 网络安全 网络虚拟化
DNS 隧道
DNS隧道利用DNS协议在53端口传输非DNS流量,如HTTP数据。虽有合法用途,但常被攻击者用于恶意目的,伪装出站流量,窃取数据或建立命令与控制通道,隐蔽性强,威胁网络安全。
|
5月前
|
人工智能 机器人 Java
AI场景面试题
基于150场面试统计,AI相关问题占比22%(32场)。常见问题涵盖AI模块设计、模型训练与部署(如Ollama、MaxKB)、RAG技术、千帆大模型接入、Spring AI框架、AIGC应用及模型微调等,聚焦实际项目中AI落地的技术细节与优化策略。

热门文章

最新文章