vue自定义指令(详细)

局部自定义指令

自定义指令可以调用 5个函数,4个参数

函数:

  1. * bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  2. * inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  3. * update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  4. * componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  5. * unbind:只调用一次,指令与元素解绑时调用。

参数:

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

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

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

    * value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。

    * oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    * expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1"中,表达式为 "1 + 1"。

    * arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。

    * modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

     * vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

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

<template><div><!-- 自定义指令 --><input v-focus type="text" v-model="def" /><h1 v-content>{{ def }}</h1></div>
</template><script>
export default {directives: {focus: {// 指令的生命周期inserted(el, binding) {el.value = '2222'console.log(el, binding)},update() {console.log(1)},},content: {inserted(el, binding) {el.style.color = 'red'el.innertext = binding.valueconsole.log(binding.value)},},},data() {return {def: '初始化内容',}},methods: {aaa() {console.log(111)},},
}
</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源

简介&#xff1a;经历近 3 年时间&#xff0c;在阿里集团及蚂蚁集团共建小组的努力下&#xff0c;OpenSumi 作为国内首个强定制性、高性能&#xff0c;兼容 VS Code 插件体系的 IDE 研发框架&#xff0c;今天正式对外开源。 作者 | OpenSumi 来源 | 阿里技术公众号 经历近 3 …

剖析 kubernetes 集群内部 DNS 解析原理

作者 | 江小南来源 | 江小南和他的小伙伴们引言说到DNS域名解析&#xff0c;大家想到最多的可能就是/etc/hosts文件&#xff0c;并没有什么错&#xff0c;但是/etc/hosts只能做到本机域名解析&#xff0c;如果跨机器的解析就有点捉襟见肘了。在服务器中还有一个配置值得大家注意…

首次公开,阿里云开源PolarDB总体架构和企业级特性

简介&#xff1a;在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家北侠带来了主题为《PolarDB 总体架构设计和企业级特性》的精彩演讲。 在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家 北…

vue 面试题集合

1&#xff0c;vue和jQ的区别 vue 数据驱动的框架 jq 操作dom的类库 2&#xff0c;vue的优缺点 优点&#xff1a;快速开发&#xff0c;模块化开发&#xff0c;代码复用 缺点&#xff1a;不利于爬虫爬取&#xff0c;IE低版本不兼容 3&#xff0c;vue响应式原理 Object.defa…

阿里云数据库开源发布:PolarDB HTAP的功能特性和关键技术

简介&#xff1a;在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家严华带来了主题为《PolarDB HTAP详解》的精彩演讲。在PolarDB存储计算分离架构的基础上&#xff0c;我们研发了基于共享存储的MPP分布式执行引擎&#xff0c;解决了单…

倒计时 2 天!2022 中国算力大会:移动云邀您共见算力网络,创新发展

7 月 29 日 - 31 日由工业和信息化部、山东省人民政府主办的首届中国算力大会将在泉城济南盛大举行&#xff01;中国移动受邀承办“算力网络&#xff0c;创新发展” 论坛并设立展区分享行业前瞻洞察&#xff0c;构建开放共赢生态7 月 29 日下午&#xff0c;邀您共话算力精彩&am…

什么是好的错误消息? 讨论一下Java系统中的错误码设计

简介&#xff1a;一个好的Error Message主要包含三个部分&#xff1a;Context: 什么导致了错误&#xff1f;发生错误的时候代码想做什么&#xff1f;The error itself: 到底是什么导致了失败&#xff1f;具体的原因和当时的数据是什么&#xff1f;Mitigation: 有什么解决方案来…

es6结构赋值

数组结构赋值 let [a,b][1,2] //交换两个变量的值 let[a,b][b,a] //扩展运算符的运用 let[a,...b][1,2,3]  //有默认值 右侧的参数等于undefined&#xff0c;默认值生效 let[a3,b][1,2] 对象结构赋值 let {a:a,b:b}{a:1,b:2};let {a,b}{a:1,b:2}let{a,...b}{a:1,b:2,c:3}

阿里巴巴在开源压测工具 JMeter 上的实践和优化

简介&#xff1a;Apache JMeter 是 Apach 旗下的开源压测工具&#xff0c;创建于 1999 年初&#xff0c;迄今已有超过 20 年历史。JMeter 功能丰富&#xff0c;社区&#xff08;用户群体&#xff09;庞大&#xff0c;是主流开源压测工具之一。 作者&#xff1a;灵苒、涧泉 Ap…

普洛斯荣获两项“数据中心绿色等级评估”5A级认证

7月29日&#xff0c;由工业和信息化部及山东省人民政府主办的首届中国算力大会在济南成功举办&#xff0c;会上同时公布了本年度“数据中心绿色等级评估”评审结果。普洛斯常熟东南数据中心B栋及普洛斯怀来数据中心3号楼均荣获“数据中心绿色等级评估”&#xff08;规划类/基础…

es6字符串扩展

子串识别 自从 JS 引入了 indexOf() 方法&#xff0c;开发者们就使用它来识别字符串是否存在于其它字符串中。ES6 包含了以下三个方法来满足这类需求&#xff1a;includes()、startsWith()、endsWith() 【includes()】 该方法在给定文本存在于字符串中的任意位置时会返回 true…

深度解读企业云上办公利器「无影云电脑」

简介&#xff1a;信息化进程高速发展的今天&#xff0c;用户桌面办公的需求正不断发生变化&#xff1a;远程办公&#xff0c;BYOD的需求不断增长&#xff1b;快速交付&#xff0c;高效运维的需求接连上升&#xff1b;数据及网络安全的关注度持续提高&#xff1b;整体办公成本在…

云风:不加班、不炫技,把复杂的问题简单化

小学时跟随母亲去成人大学学习编程&#xff0c;初中开始参加信息学奥赛&#xff0c;高中写出人生中第一个成熟软件——Cview&#xff0c;大学发布开源软件风魂系列&#xff0c;后用于网易开发的《大话西游》《梦幻西游》等热门游戏&#xff0c;离开网易创立简悦科技……随着云风…

Timing:在线自习室快速搭建

通过超低延迟的音视频通信技术、视频连麦、弱网传输算法&#xff0c;快速搭建自习场景&#xff0c;提升自习效率。 客户简介 氪细胞主打产品Timing&#xff0c;是国内最早推出&#xff0c;也是规模最大的在线自习室&#xff0c;是新一代的教育与社交融合平台&#xff0c;主打高…

Nacos2.0的K8s服务发现生态应用及规划

简介&#xff1a;Nacos 是阿里巴巴于 2018 年开源的注册中心及配置中心产品&#xff0c;帮助用户的分布式微服务应用进行服务发现和配置管理功能。随着 Nacos2.0 版本的发布&#xff0c;在性能和扩展性上取得较大突破后&#xff0c;社区开始考虑如何提供更加云原生方向的功能和…

webview 和 React Native 中吸顶效果实现

作者 | &#x1f47d;来源 | Sharing一、前言 在跨端开发中&#xff0c;离不开一些吸顶的交互场景&#xff0c;可以参考淘宝或是京东类电商 app 中一些 tab &#xff0c;在整个容器滑动的过程中&#xff0c;吸顶效果非常的连贯和丝滑的&#xff0c;当然这些 tab 可能是用 nativ…

h5 history

history的Api方法和使用&#xff1a; history.pushState(data,title,url)&#xff1a;在浏览器中新增一条历史记录&#xff1b; data会在onpopstate事件触发时作为参数传递过去&#xff0c;title为页面标题&#xff0c;url为页面地址&#xff1b;   history.replaceState(d…

AHPA:开启 Kubernetes 弹性预测之门

简介&#xff1a;阿里巴巴云原生团队和阿里达摩院决策智能时序团队合作开发 AHPA 弹性预测产品&#xff0c;该产品主要出发点是基于检测到的周期做“定时规划”&#xff0c;通过规划实现提前扩容的目的&#xff0c;在保证业务稳定的情况下&#xff0c;让你真正实现按需使用。 …

Kubernetes 在科技革命中的演变

作者 | Anthony Spiteri仅在一两年前&#xff0c;对于那些希望通过向现代数据平台转型走在前沿的企业来讲&#xff0c;容器化可是热门词汇。Kubernetes&#xff0c;也被称为 K8s&#xff0c;当时还不成熟&#xff0c;仅处于起步阶段&#xff0c;对更广泛的IT界来说仍然有些陌生…

在阿里巴巴,我们如何先于用户发现和定位 Kubernetes 集群问题?

简介&#xff1a;本文整理自阿里云高级研发工程师彭南光(光南) 在 KubeCon China 2021 大会的演讲实录&#xff0c;分享了阿里巴巴是如何通过自研通用链路探测定向巡检工具 KubeProbe 应对大规模集群的稳定性挑战的。关于阿里云云原生团队在本次 KubeCon 上分享的全部内容沉淀于…