vue3渲染函数加入自定义指令(图文教程)

news2024/11/25 3:04:46

嗯,公众号“程序员野区”收到提问==》

问了自己几个群里小伙伴,总算搞定了。

序:

  1. withDirectives是vue3.2.0版本上线的,所以你版本不要低,低了不行
  2. 官方的demo在这里,懂的,直接看官方的就可以=》https://cn.vuejs.org/api/render-function.html#withdirectives
  3. 我只说重点。所以你要看仔细(说实话,你vue3官网看的明白就没必要看本篇。)
  4. 自定义指令不懂的看这篇vue3自定义指令(图文教程)-CSDN博客
  5. 渲染函数不懂的看这篇vue3 h函数使用图文教程-CSDN博客
  6. 你如果急,完整代码你直接滑到页面最下面去复制
  7. 卡到什么前端问题,都可以到雪狼的公众号底下留言,看到有时间再回你==》 “程序员野区”

注意:

你别改下就看看浏览器里input节点是不是有渲染出来一个自定义指令,自定义指令是不会在渲染后的页面看的到的

正文:

        既然官方的demo看不懂,来跟着我的节奏来!

        你新建一个test.vue(router.ts路由记得配置test!)代码如下

<template>
	<renderInput v-cyc ></renderInput>
</template>
 
<script setup lang="ts" >
	import {h} from "vue"
		const vCyc={
			mounted: (el:any) => {
				el.style.backgroundColor="yellow"
			}
		}
		const renderInput = {
		  render: () => {
			return h('input',{
					value:"公众号:程序员野区"
				}
			)
		  }
		}
</script>
<style lang="scss" scoped>
	
</style>

注意看,这个人名字叫小帅。。。。。。。。

注意看,这里有三部分组成,截图就看红色框框里的。

第1部分

我们我们用渲染函数渲染了一个input组件

import {h} from "vue"
const renderInput = {
  render: () => {
	return h('input',{
			value:"公众号:程序员野区"
		}
	)
  }
}

第2部分

我们,定义了一个自定义指令(vue3的哦!vue3,雪狼是3.2.4哦!)

const vCyc={
	mounted: (el:any) => {
		el.style.backgroundColor="yellow"
	}
}

绑定这个指令的节点,背景就变成黄色

第3部分

绑定1

大部分绑定是这么绑的

<renderInput v-cyc ></renderInput>

好!我们怎么把这个v-cyc去掉,让他在渲染的时候就绑定进去,而不用再组件引用的时候再去写v-cyc?

来跟着我改

多引入一个withDirectives

import {h,withDirectives} from "vue"

然后自定义组件这么改

const renderInput = {
		  render: () => {
			return withDirectives(
				h('input',{
						value:"公众号:程序员野区"
					}
				),
				[
				  [vCyc]
				]
			)
		  }
		}

去吧 v-cyc去掉

<renderInput></renderInput>

运行

是吧,这样就可以了,当然[vCyc]里面不是只有一个参数,我官网顺下来下,你要是看不懂,你就一个一个参数加看看你很快就懂了

// [Directive, value, argument, modifiers]
type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>

比如,改成这样

[vCyc, 200, 'top', { animate: true }]

他就相当于我们在template里直接这么写了↓↓↓↓

<div v-cyc:top.animate="200"></div>

我贴个完整的代码        

<template>
	<renderInput></renderInput>
</template>
 
<script setup lang="ts" >
	import {h,withDirectives} from "vue"
		const vCyc={
			mounted: (el:any) => {
				el.style.backgroundColor="yellow"
			}
		}
		const renderInput = {
		  render: () => {
			return withDirectives(
				h('input',{
						value:"公众号:程序员野区"
					}
				),
				[
				  [vCyc]
				]
			)
		  }
		}
</script>
<style lang="scss" scoped>
	
</style>

        

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

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

相关文章

微信小程序禁止PC端打开防止白嫖广告或抓接口

前言 晓杰每日靠着微薄的小程序广告度日&#xff0c;继之前检测手机端微信跳过小程序广告插件检测后又发现小程序广告在电脑端经常没广告&#xff0c;导致收入备降&#xff01;虽然每天只有几块钱的收入&#xff0c;哈哈哈&#xff01;那么怎么做到禁止小程序使用电脑端微信打…

有没有好用的开源mes系统?

根据我多年的从业经验来看&#xff0c;我知道有很多工厂都想找一款好用的开源mes系统。简单来说&#xff0c;开源mes系统通过公开源代码&#xff0c;鼓励企业和用户共同参与系统的改进和定制&#xff0c;根据自己的需求进行二次开发&#xff0c;使得企业在有限的预算内也能获得…

《ClipCap》阅读笔记(上)

原文出处 [2111.09734] ClipCap: CLIP Prefix for Image Captioning (arxiv.org) 原文笔记 What ClipCap&#xff1a; CLIP Prefix for Image Captioning 一言以蔽之&#xff1a;使用 CLIP 编码作为标题的前缀&#xff0c;使用简单的映射网络&#xff0c;然后微调语言模型…

[el-form] 表单验证:一次验证两个值,传参

一次验证两个值 要在表单的el-form-item 一次验证两个值&#xff0c;都不能为空 在验证规则rules里&#xff0c;要验证的值里加上validator验证规则&#xff0c;“valTowValue”是自己定义的。 传参 const validateField (key, errorMessage) > (rule, value, callback) &g…

virtualbox(7.0) ubuntu(22) 和win11共享文件夹

在虚拟机中安装增强功能。在virtualbox中配置 执行命令将用户加入vboxsf组 sudo adduser your_usrname vboxsf 重启ubuntu即可

语音识别FBank特征提取学习笔记

语音识别就是把一段语音信号转换成对应的文本信息&#xff0c;这一过程包括四个大的模块&#xff0c;分别是&#xff1a;特征提取、声学模型、语言模型、字典与解码。 本篇就来梳理一下特征提取模块的实现思路和方法。 常用的语音特征有&#xff1a; 梅尔频率倒谱系数&#x…

windows电脑如何运行python的定时任务

这里需要使用&#xff1a;windows系统设置-控制面板里的计划任务 1.打开计划任务之后&#xff0c;选择&#xff1a;创建基本任务 2.填写名称&#xff0c;这里根据自己具体的项目需求填写&#xff0c;然后点击下一步。 3.选择每日&#xff0c;再点击下一步 4.设置时间&…

告别写作难题,这些AI写作工具让你文思泉涌

在现实生活中&#xff0c;除了专业的文字工作者&#xff0c;各行各业都避免不了需要写一些东西&#xff0c;比如策划案、论文、公文、讲话稿、总结计划……等等。而随着科技的进步&#xff0c;数字化时代的深入发展&#xff0c;AI已经成为日常工作中必不可少的工具了&#xff0…

全新升级!中央集中式架构功能测试为新车型保驾护航

“软件定义汽车”新时代下&#xff0c;整车电气电气架构向中央-区域集中式发展已成为行业共识&#xff0c;车型架构的变革带来更复杂的整车功能定义、更多的新技术的应用&#xff08;如SOA服务化、智能配电等&#xff09;和更短的车型研发周期&#xff0c;对整车和新产品研发的…

基于合成 VIIRS(NTL)夜间光照数据-印度

GAN based Synthetic VIIRS (NTL) India 基于合成 VIIRS&#xff08;NTL&#xff09;的广域网 印度 简介 本研究利用了两个主要来源的夜间光照&#xff08;NTL&#xff09;数据&#xff1a;国防气象卫星计划&#xff08;DMSP&#xff09;和苏美国家极地伙伴关系&#xff08;…

使用 Nginx + GeoIP2 获取客户端地理位置及限制指定地区访问

要实现防火墙只允许单个城市的访问&#xff0c;您可以采取以下几种方法&#xff1a; 1、IP地理位置过滤&#xff1a; 使用GeoIP数据库&#xff08;如MaxMind的GeoIP2&#xff09;来确定IP地址的地理位置。 配置防火墙规则&#xff0c;只允许来自特定城市的IP地址访问。 2、内容…

SpringCloud-服务网关-Gateway

1.服务网关在微服务中的应用 (1)对外提供服务的难题分析&#xff1a; 微服务架构下的应用系统体系很庞大&#xff0c;光是需要独立部署的基础组件就有注册中心、配置中心和服务总线、Turbine异常聚合和监控大盘、调用链追踪器和链路聚合&#xff0c;还有Kaka和MQ之类的中间件&…

macOS使用Karabiner-Elements解决罗技鼠标G304连击、单击变双击的故障

记录一下罗技鼠标G304单击变双击的软件解决过程和方案&#xff08;适用于macOS&#xff0c; 如果是Windows&#xff0c;使用AutoHotKey也有类似解决办法、方案&#xff0c;改日提供&#xff09;&#xff1a; 背景&#xff1a;通过罗技Logitect G HUB软件对罗技的游戏鼠标侧键b…

TikTok美区日销二十万美金爆款黑马!胸贴赛道成功起飞!

从去年开始&#xff0c;一项名为“No bra”&#xff08;无胸罩&#xff09;的挑战就长期刷屏TikTok。随着平台内各大博主和明星站台发声&#xff0c;越来越多用户也参与其中&#xff0c;话题的热度逐渐走向高潮。截止到目前&#xff0c; TikTok上相关话题累计播放量已高达8.3亿…

数据恢复篇:5 款最佳 Mac 数据恢复软件

说到保护我们的数字生活&#xff0c;数据恢复软件的重要性怎么强调都不为过。无论您是意外删除了假期照片的普通用户&#xff0c;还是面临硬盘损坏的专业人士&#xff0c;随之而来的恐慌都是普遍存在的。幸运的是&#xff0c;数据恢复工具可以缓解这些压力。在Mac用户可用的众多…

Postman接口测试工具详解【保姆级教程】

大家好,我是CodeQi! 在我们日常的开发工作中,无论是前端还是后端,API 接口的测试都是必不可少的一环。 你有没有遇到过这样的情况:接口测试工具复杂难用,使用起来让人抓狂;或者手动构造请求效率低下,容易出错? 别担心,我今天要介绍的 Postman 工具,将会彻底改变你…

【实用小工具】Aconvert文件转换神器

1 Aconvert简介 Aconvert.com在线转换各类PDF&#xff0c;文档&#xff0c;电子锁&#xff0c;图像&#xff0c;图标&#xff0c;视频&#xff0c;音频和压缩文件。域名中的“A”代表“ALL”。您可以点击右上角的转换按钮开始快速转换&#xff1a;无需进入目录&#xff0c;直接…

visual studio远程调试

场景一&#xff08;被远程调试的电脑&#xff09; 确定系统位数 我这里是x64的 找到msvsmon.exe msvsmon.exe目录位置解释&#xff1a; “F:\App\VisualStudio\an\Common7\IDE\”是visual studio所在位置、 “Remote Debugger\”是固定位置、 “x64”是系统位数。 拼起来就是…

【Linux】正确的关机方法

1. Linux正确的关机方式 如何关机呢&#xff1f;我想&#xff0c;很多朋友在DOS年代已经有在玩计算机了。在当时我们关闭DOS的系统时&#xff0c;常常是直接关闭电源开关&#xff0c;而Windows 在你不爽的时候&#xff0c;按着电源开关四秒也可以关机&#xff0c;但是在Linux则…

每日一题——Python实现PAT乙级1026 程序运行时间(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码结构和逻辑 时间复杂度 空间复杂度 代码优化建议 总结 我要更强 …