当前位置: 首页 > news >正文

Vue3封装自定义指令+h()

官方install介绍
在这里插入图片描述directive/myDir/index.js
定义指令

import { h, render, ref } from "vue";
const vMyDir = {mounted(el, binding) {renderElement(el, binding);},
};
// inserted是Vue2的生命周期钩子,所以在Vue3项目中要使用mounted
const renderElement = (el, binding) => {// el就是指令所绑定的元素,binding.value是传进来的指令值console.log(el, binding.value);// el.innerHTML获取元素的文本内容console.log(el.innerHTML);// el.style.color = binding.value.color;// el.style.backgroundColor = "green";// const foo = { fontSize: "30px" };const foo = "some-name";let isActive = ref(true);const style1 = {color: "pink",};const style2 = {color: "pink",backgroundColor: "green",};let myStyle;if (isActive.value) {myStyle = style2;} else myStyle = style1;const vnode = h("div",{ class: [foo], style: myStyle },//   { class: [foo], style: { color: "pink" } },//   {//     class: { foo: isActive.value },//     style: { color: "pink", backgroundColor: "green" },//   },"hello");render(vnode, el);
};
export default vMyDir;


index.vue 使用指令

<div class="vvv" v-my-dir="{ color: 'red' }">999</div>




directives/index.js

import myDir from "./myDir";
import closeTo from "./closeTo";
// 指令对象
const directives = {myDir,closeTo,
};export default {install(app) {console.log("directives", directives);console.log("Object.keys(directives)", Object.keys(directives));Object.keys(directives).forEach((key) => {console.log("key, directives[key]", key, directives[key]);app.directive(key, directives[key]);});},
};
// Object.keys(directives).forEach((key) => { ... }):这是一个遍历指令对象 directives 的循环。
// Object.keys() 方法返回一个包含指令对象中所有属性名称的数组。
// app.directive(key, directives[key]):使用Vue的directive方法注册指令。
// key 是指令名称,directives[key] 是对应的指令对象。通过这个循环,将所有的指令都注册到应用程序中。

在这里插入图片描述



main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import "virtual:uno.css";
import App from "./App.vue";
import router from "./router";
import directives from "./directives";
const app = createApp(App);
app.use(directives);app.use(createPinia());
app.use(router);app.mount("#app");

在其他dom上绑定元素

在这里插入图片描述directive/myDir/index.js

import { h, render, ref } from "vue";
const vMyDir = {mounted(el, binding) {renderElement(el, binding);},
};const renderElement = (el, binding) => {// binding.value 是指绑定到指令的值,而不是指令所在元素的引用。// 如果你希望访问 father 变量所引用的元素,// 你应该使用 binding.instance 来获取指令所在的组件实例,// 然后通过 binding.instance.$refs 来访问 father 引用的元素。const fatherElement = binding.instance.$refs.father;console.log(fatherElement); // 打印出绑定到 "father" 的元素console.log("binding.instance", binding.instance);//   请注意,在 Vue 3 中,//   除了 binding.value 和 binding.instance,binding.arg 和 binding.modifiers 字段也是可用的,//   以提供更多配置和参数信息const foo = "some-name";let isActive = ref(true);const style1 = {color: "pink",};const style2 = {color: "pink",backgroundColor: "green",};let myStyle;if (isActive.value) {myStyle = style2;} else myStyle = style1;const vnode = h("div", { class: [foo], style: myStyle }, "hello");render(vnode, fatherElement); //!!!!!!!!!!!!!//   render(vnode, el);
};
export default vMyDir;

相关文章:

Vue3封装自定义指令+h()

官方install介绍 directive/myDir/index.js 定义指令 import { h, render, ref } from "vue"; const vMyDir {mounted(el, binding) {renderElement(el, binding);}, }; // inserted是Vue2的生命周期钩子&#xff0c;所以在Vue3项目中要使用mounted const renderEl…...

爆火的迅雷网盘推广,一手云盘app拉新推广渠道必备项目 学习资料

迅雷网盘是目前几个主流网盘拉新推广之一 都可以通过”聚量推客“申请 目前主流的为&#xff1a;夸克网盘拉新、uc网盘推广、迅雷网盘&#xff0c;但是由于阿里的原因 夸克目前不对外开放名额&#xff0c;需要等待&#xff0c;取而代之主流的云盘推广就是迅雷网盘了 聚量推客…...

Jmeter 请求返回多字段 —— 传递登录接口!

Jmeter创建JDBC请求获取登录账密&#xff0c;结果存储到变量中&#xff0c;依次传给登录接口。 1、添加JDBC Request并设置变量&#xff0c;获取数据库多个字段值 ①添加好JDBC Connection Configuration并做好数据库连接配置 ②导入mysql驱动jar包 ③测试计划->添加线程…...

es 7.0常用的命令

es 7.0常用的命令 es 7.0中只有索引和文档(document)&#xff0c;没有类型(type)了。 es新建索引&#xff1a; 格式&#xff1a; PUT /索引名称 {"mappings":{"properties":{"字段名称":{"type":"字段类型"}}} }PUT 加索…...

[文件读取]lanproxy 文件读取 (CVE-2021-3019)

1.1漏洞描述 漏洞编号CVE-2021-3019漏洞类型文件读取漏洞等级⭐漏洞环境VULFOCUS攻击方式 描述: Lanproxy 路径遍历漏洞通过../绕过读取任意文件。该漏洞允许目录遍历读取/../conf/config.properties来获取到内部网连接的凭据。 1.2漏洞等级 高危 1.3影响版本 Lanproxy 1.4漏洞…...

记录一种引起 CL.exe/ C++ 编译器无任何提示直接崩溃的问题

只需定义在源文件或公共引入的头文件之中&#xff0c;编译必定CL.exe 退出&#xff0c;错误代码2&#xff0c;它不会产生任何语法意义上的错误提示&#xff0c;感兴趣的可以记录下。 引发崩溃的代码&#xff1a; template <typename T> class IS_CONFIG_LOADER_T_CLASS…...

【华为OD机试高分必刷题目】生理周期(C++-模拟迭代实现)

🚀你的旅程将在这里启航!本专栏所有题目均包含优质解题思路,高质量解题代码,详细代码讲解,助你深入学习,高分通过! 文章目录 【华为OD机试高分必刷题目】生理周期(C++-模拟迭代实现)题目描述解题思路java题解代码代码OJ评判结果代码讲解寄语【华为OD机试高分必刷题目…...

【Vue】过滤器Filters

hello&#xff0c;我是小索奇&#xff0c;精心制作的Vue系列持续发放&#xff0c;涵盖大量的经验和示例&#xff0c;如对您有用&#xff0c;可以点赞收藏哈 过滤器 filters过滤器已从Vue 3.0中删除&#xff0c;不再支持了&#xff0c;这里可以作为了解进行学习 vue3要精简代码&…...

springcloud旅游网站源码

开发技术&#xff1a; jdk1.8&#xff0c;mysql5.7&#xff0c;idea&#xff0c;nodejs&#xff0c;vscode springcloud springboot mybatis vue 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索景区&#xff0c;轮播图&#xff0c;旅游攻略列表 点击攻…...

Unity中关于Lerp()方法的使用

在Unity中&#xff0c;Lerp()方法用于在两个值之间进行线性插值。 它的语法有&#xff1a; public static float Lerp(float a, float b, float t);//在两个float类型的值a和b之间进行线性插值 public static Vector2 Lerp(Vector2 a, Vector2 b, float t);//在两个Vector2类…...

计算机毕业设计选题推荐-体育赛事微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

Android BottomSheetDialog中列表滑动冲突问题

前言 使用BottomSheetDialog弹窗时&#xff0c;里面嵌套了一个纵向的RecyclerView&#xff0c;弹出后加载列表数据&#xff0c;发现弹窗不能滑动&#xff0c;产生了滑动冲突。 一、使用步骤 1.布局示例 代码如下&#xff08;示例&#xff09;&#xff1a; <androidx.appco…...

sql查询查看数据库空间使用情况

SELECT UPPER(F.TABLESPACE_NAME) "表空间名", D.TOT_GROOTTE_MB "表空间大小(M)", D.TOT_GROOTTE_MB - F.TOTAL_BYTES "已使用空间(M)", TO_CHAR(ROUND((D.TOT_GROOTTE_MB - F.TOTAL_BYTES) / D.TOT_GROOTTE_MB * 100,2),990.99) || % "使…...

算法分析与设计考前冲刺 (算法基础、数据结构与STL、递归和分治、 动态规划、贪心算法、 回溯算法)

算法分析与设计考前冲刺 算法基础 算法是一系列解决问题的清晰指令&#xff0c;代表着用系统的方法描述解决问题的策略机制。 程序是算法用某种程序设计语言的具体的 具体实现 算法特征&#xff1a; 有穷性(有限步) 确定性 输入 输出 可行性(有限时间) 算法的复杂性&#…...

Spring Data JPA 实现集成实体对象数据库的创建、修改时间字段自动更新

JPA提供了一种事件监听器的机制&#xff0c;用于SQL审计&#xff0c;通过监听器我们可以很快速地去自动更新创建时间、修改时间&#xff0c;主要步骤如下&#xff1a; 一、创建基础实体&#xff0c;包含了创建和修改时间&#xff0c;然后让其他真正的实体继承该实体&#xff0…...

Vue3集成json-editor-vue3

安装依赖 npm install json-editor-vue3 --save引入 main.js import "jsoneditor";具体模块 import JsonEditorVue from json-editor-vue3;代码实现 <json-editor-vue ref"jsonEditor" class"editor" v-model"state.addFormField.p…...

UML建模语言

UML建模语言 类的关系 依赖关系 类的方法中使用形参、局部变量或者静态方法的方式调用其他类&#xff0c;表示当前类依赖其他类。 public class Main {public void eat(Person person) {person.play();// 方法参数Student student new Student();student.study();// 局部变…...

centos7系统离线安装tcpdump抓包软件、使用教程

tcpdump 是Linux系统下的一个强大的命令&#xff0c;可以将网络中传送的数据包完全截获下来提供分析。它支持针对网络层、协议、主机、网络或端口的过滤&#xff0c;并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 本教程对tcpdump命令使用进行讲解说明&#xff0c;通…...

划分VOC数据集,以及转换为划分后的COCO数据集格式

1.VOC数据集 LabelImg是一款广泛应用于图像标注的开源工具&#xff0c;主要用于构建目标检测模型所需的数据集。Visual Object Classes&#xff08;VOC&#xff09;数据集作为一种常见的目标检测数据集&#xff0c;通过labelimg工具在图像中标注边界框和类别标签&#xff0c;为…...

JAVA基础8:方法

1.方法概念 方法&#xff08;method)&#xff1a;将具有独立功能的代码块组织成为一个整体&#xff0c;使其具有特殊功能的代码集。 注意事项&#xff1a; 方法必须先创建才可以使用&#xff0c;该过程称为方法定义方法创建后并不是直接运行的&#xff0c;需要手动使用后才执…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...