Vue3:自定义指令directive
一、vue2自定义指令生命周期
- bind: function () {},
- inserted: function () {},
- update: function () {},
- componentUpdated: function () {},
- unbind: function () {}
二、vue3自定义指令生命周期
created
:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的v-on
事件监听器调用前的事件监听器中时,这很有用。beforeMount
:当指令第一次绑定到元素并且在挂载父组件之前调用。mounted
:在绑定元素的父组件被挂载后调用。beforeUpdate
:在更新包含组件的 VNode 之前调用。updated
:在包含组件的 VNode 及其子组件的 VNode 更新后调用。beforeUnmount
:在卸载绑定元素的父组件之前调用unmounted
:当指令与元素解除绑定且父组件已卸载时,只调用一次。
三、使用
<template>
<!-- name:自定义参数,lcy:自定义修饰符 -->
<div v-MyDirective:name.lcy="{background: '#ccc'}">这是一个div
</div>
</template><script setup lang='ts'>
import {Directive, DirectiveBinding} from 'vue'
const vMyDirective:Directive = {created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted(...args:Array) {console.log('mounted');console.log(args);},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeUnmount() {console.log('beforeUnmount');},unmounted() {console.log('unmounted');},}
</script>
四、实例
<template>
<!-- name:自定义参数,lcy:自定义修饰符 -->
<div v-MyDirective:name.lcy="{background: '#ccc', width: '200px', height: '200px'}">这是一个div
</div>
</template><script setup lang='ts'>
import {Directive, DirectiveBinding} from 'vue'type Styles = {width: string,height: string,background: string
}
const vMyDirective:Directive = {mounted(el:HTMLElement, dir: DirectiveBinding<Styles>) {console.log('mounted');el.style.background = dir.value.backgroundel.style.width = dir.value.widthel.style.height = dir.value.height},
}
</script>
Vue3:自定义指令directive相关推荐
- Vue3 自定义指令:ClickOutside(点击当前区域之外的位置)
哈喽,大家好,我是 SuperYing.今天我们聊一个 Vue3 自定义指令 - ClickOutside,顾名思义,就是处理点击当前区域之外的位置的场景. Vue 指令 首先,我们先来回顾一下 Vu ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- 第三十九篇 自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...
- 29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
- Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
- html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
- vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令 需求 效果 全局 - 自定义指令 代码 局部 - 自定义指令 代码 自定义命令传值 效果 代码 问点 需求 获取标签,扩展额外的功能 效果 全局 - 自定义指令 代码 // mai ...
- Vue 自定义指令(directive)
气温骤降,南京又开始了降温 速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
- JFinal自定义指令Directive
Enjoy Template Engine一如既往地坚持极简设计,核心只有 #if.#for.#switch.#set.#include.#define.#(-) 这七个指令,便实现了传统模板引擎几乎 ...
最新文章
- mysql占用cpu_Mysql占用过高CPU时的优化手段(必看)
- 【线上分享】基于人眼主观视觉的画质评价与提升
- 杭电acm 2177 取(2堆)石子游戏(威佐夫博弈)
- Spring基础——在 Spring Config 文件中基于 XML 的 Bean 的自动装配
- java新手笔记6 示例for
- SCCM 2012系列2 服务器准备下
- Retinex算法介绍
- win10扬声器没有声音但插入耳机有声音
- Excel 常用快捷键
- 网页颜色搭配,网站设计,Google logo配色 Google官方配色表
- win8激活时出现”错误代码:0×8007007B 错误描述:文件名、目录名或卷标语法不正确“解决方法
- Session/Cookie/Token还傻傻分不清?
- halcon例程学习笔记(8)---瓶子编号识别bottle2.hdev
- 惠普电脑锁屏快捷键怎么设置?
- C语言输入10个分数 去掉最高分,vb输入10个评委给出的分数,去掉最高分和最低分,计算平均分并输出...
- NAT(地址转换模式)
- imx6ul——uboot添加RTC,pcf8563驱动
- 0.618法matlab
- 02笔记 离散数学——命题逻辑——基于离散数学(第3版)_章炯民,陶增乐
- java ftp上传文件相关代码梳理
热门文章
- k8s部署kong+konga+pgs
- 人工智能软件怎么开发
- 排序二叉树的创建,插入和查找
- maven常用中央仓库
- arch安装veil
- Input.mousePosition
- java.sql.SQLException: Table 'test.customer' doesn't exist Query: Select id,name,address,phone from
- Modbus编程实践
- 用 Elasticsearch 统计做了几次核酸检测?怎么破?
- 向量组秩及其极大线性无关组求解浅析