Vue.js(自定义指令)

news/2024/9/22 14:40:56/

自定义指令

  • Vue.js中,除了预定义的13个指令外,还允许用户自定义扩展指令。
  • 创建自定义指令
   	inserted( el ){ //当元素被加载到DOM树时触发
....  el 为当前一个写有v-指令的DOM元素对象
函数中,执行原生的DOM API
}})
- 强调: ‘指令名’不用加v-前缀!  只有在html中使用时,才加前缀
  • 使用自定义指令
    • <any v-指令名>
    • 强调: 必须前边加v-
  • 什么是钩子函数: 一个对象的不同生命时期的某个时刻,会自动调用的函数——称为“生命周期钩子函数”
    • 为什么: 对象在生命周期的某个阶段,可能都需要我们帮助完成一些特殊功能
    • 何时: 只要希望在对象的生命周期中某个阶段,对对象执行一些操作时
    • 如何: 指令的选项对象提供了如下生命周期钩子函数:——了解
      • (1)bind: 当自定义指令绑定到元素上时调用
      • (2)inserted:当绑定了自定义指令的元素插入到DOM时自动调用
      • (3)update:元素绑定的数据发生了更新时自动调用
      • (4)componentUpdated:元素的子组件发生更新时自动调用
      • (5)unbind:元素与自定义指令解除绑定时调用

http://www.ppmy.cn/news/1430911.html

相关文章

Docker② —— Cgroups详解

1. 概述 Cgroups 的全称是control groups&#xff0c;cgroups为每种可以控制的资源定义了一个子系统。Cgroups分为三个部分&#xff1a; cgroup 本身&#xff1a;对进程进行分组hierarchy&#xff1a;将 cgroup 形成树形结构subsystem&#xff1a;真正起到限制作用的部组件 cp…

Practice Exam: Oracle Cloud Infrastructure Generative AI Professional

Practice Exam: Oracle Cloud Infrastructure Generative AI Professional 1. In the simplified workflow for managing and querying vector data, what is the role of indexing?2. In which scenario is soft prompting appropriate compared to other training styles?3…

Session工作原理

session用于服务器和浏览器在建立会话后创建的一个唯一凭证&#xff0c;当多个用户访问同一个服务&#xff0c;就会创建多个session在服务器端保存&#xff0c;这些session通过sessionManager来管理&#xff0c;每个session相当于一个map可以设置多个值存储当前浏览器会话设置的…

【刷题笔记】第七天

文章目录 [924. 尽量减少恶意软件的传播](https://leetcode.cn/problems/minimize-malware-spread/)方法一&#xff0c;并查集方法二&#xff0c;dfs [GCD and LCM ](https://vjudge.net.cn/problem/HDU-4497#authorKING_LRL) 924. 尽量减少恶意软件的传播 如果移除一个感染节…

地方政府专项债发债全过程-梳理

地方政府专项债发债全过程-梳理 一、什么是专项债&#xff1f; 地方政府专项债券&#xff08;以下简称“专项债券”&#xff09;&#xff0c;是指省、自治区、直辖市政府为有一定收益的公益性项目&#xff0c;发行的、约定一定期限内以公益性项目对应的&#xff0c;政府性基金…

Linux之命令行参数的原理以及实现,环境变量限时增加删除和永久增加删除以及代码获取环境变量

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 一.命令行参数 1.1main函数参数 在我们学习c语言时我们的main函数…

【ZZULIOJ】1076: 三位数求解(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 已知xyzyzzn&#xff0c;其中n是一个正整数&#xff0c;x、y、z都是数字&#xff08;0-9&#xff09;&#xff0c;编写一个程序求出x、y、z分别代表什么数字。如果无解&#xff0c;则输出“No…

30s搞懂HashSet基本原理与方法

目录 1.原理 1.1 基于HashMap实现 1.2 实现了Set接口 1.3 实现了序列化和可克隆化 2.实现操作 2.1 添加元素add() 2.2 删除指定单个元素remove() 2.3 删除所有元素clear() 2.4 判断是否包含元素contains() 2.5 判断是否为空isEmpty() 2.6 获得大小size() 2.7 遍历H…