自定义指令,全局,局部,注册

让输入框自动获取焦点(每次刷新自动获取焦点)

<template><div><h3>自定义指令</h3><input ref="inp" type="text"></div>
</template><script>
export default {mounted(){this.$refs.inp.focus()}}
</script><style></style>

1.全局注册指令

在main.js中全局注册指令

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 全局注册指令
// 第一个参数是指令名,第二个参数是指令的配置项(在配置项里可以写指令相关的钩子,相关的生命周期函数)
Vue.directive('focus', {// inserted会在指令所在元素被插入到页面时触发inserted(el) {// el就是指令所绑定的元素el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')
《!--在input标签中写上自定义指令 v-自定义的指令名 -->
<template><div><h3>自定义指令</h3><input v-focus ref="inp" type="text"></div>
</template><script>
export default {// mounted(){//   this.$refs.inp.focus()// }}
</script><style></style>

2.局部注册指令(只在当前组件范围使用)

<template><div><h3>自定义指令</h3><input v-focus ref="inp" type="text"></div>
</template><script>
export default {// mounted(){//   this.$refs.inp.focus()// }directives:{// 指令名:指令的配置项focus:{// 这里同样也有个形参elinserted(el){el.focus()}}}}
</script><style></style>

 封装一个指令v-color

自定义指令 v-color ,然后在h1标签中写入v-color指令,但是如果指令颜色写固定为red的话,每个使用该指令的标签都是同样的颜色。

希望标签是不同颜色,将该自定义指令传入不同的值,在data中定义不同的值。

但是自定义指令中是拿不到传入指令的值的,所以必须通过另一个配置项binding,通过binding.value取得传入的指令的值

<template><div><!--相当于给两个指令传入不同的值 --><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data(){return{color1:'red',color2:'green'}},directives:{color:{//1.inserted提供的是元素被添加到页面中的逻辑,直接修改数据是无法改变颜色的// el形参表示的是传入的dom元素inserted(el,binding){// console.log(el,binding.value);// 如何拿到传递的不同的值?在binding配置对象中通过binding.value中拿到所对应的变量值// binding.value就是指令的值el.style.color = binding.value},// update(el,binding){//   el.style.color = binding.value// }}}}
</script><style></style>

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

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

相关文章

CSS3 动画详解,介绍、实现与应用场景详解

CSS3 动画概述 CSS3 动画是通过 CSS3 的新特性来实现元素的动态变化。与传统的 JavaScript 动画不同,CSS3 动画主要通过 CSS 属性的变化来实现动画效果,具有高效、轻量和易于实现的优点。CSS3 动画通常用于网页的动态交互效果、过渡效果、元素移动、缩放、旋转等场景。 一、…

二、点亮希望之光:寄存器与库函数驱动 LED 灯

文章目录 一、寄存器1、存储器映射2、存储器映射表3、寄存器4、寄存器映射5、寄存器重映射6、总线基地址、外设基地址、外设寄存器地址7、操作寄存器&#xff08;以操作一个GPIO口为例&#xff09;1. 寄存器地址定义部分2. GPIOD_Configuration 函数部分3. main 函数部分 二、库…

【特殊子序列 DP】力扣1137. 第 N 个泰波那契数

泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n&#xff0c;请返回第 n 个泰波那契数 Tn 的值。 示例 1&#xff1a; 输入&#xff1a;n 4 输出&#xff1a;4 解释&#xff1a; T_3 0 1 1 2 T_4 1 …

梯度下降法求解局部最小值深入讨论以及 Python 实现

文章目录 0. 前期准备1. 局部最小值2. 例子3. 讨论3.1 增加迭代次数3.2 修改学习率 η \eta η3.3 修改初始值 x 0 x^0 x0 4. 总结参考 0. 前期准备 在开始讲梯度下降法求解函数的局部最小值之前&#xff0c; 你需要有梯度下降法求解函数的最小值的相关知识。 如果你还不是…

css部分

前面我们学习了HTML&#xff0c;但是HTML仅仅只是做数据的显示&#xff0c;页面的样式比较简陋&#xff0c;用户体验度不高&#xff0c;所以需要通过CSS来完成对页面的修饰&#xff0c;CSS就是页面的装饰者&#xff0c;给页面化妆&#xff0c;让它更好看。 1 层叠样式表&#…

7-zip如何分卷压缩文件并加密?

想要压缩的文件过大&#xff0c;想要在压缩过程中将文件拆分为几个压缩包并且同时为所有压缩包设置加密应该如何设置&#xff1f; 想要分卷压缩文件并加密一起操作就可以完成了&#xff0c;设置方法如下&#xff1a; 打开7-zip&#xff0c;选中需要压缩的文件&#xff0c;选择…

14.在 Vue 3 中使用 OpenLayers 自定义地图版权信息

在 WebGIS 开发中&#xff0c;默认的地图服务通常会带有版权信息&#xff0c;但有时候我们需要根据项目需求自定义版权信息或添加额外的版权声明。在本文中&#xff0c;我们将基于 Vue 3 的 Composition API 和 OpenLayers&#xff0c;完成自定义地图版权信息的实现。 最终效果…

【游戏】超休闲游戏:简单易上手的游戏风潮

1. 什么是超休闲游戏&#xff1f; 超休闲游戏&#xff08;Hyper-Casual Games&#xff09; 是一种专注于简单玩法、快速上手、短时间内能完成的游戏类型。这类游戏通常具有以下特点&#xff1a; 玩法简单&#xff1a;规则直观&#xff0c;用户无需教程即可上手。碎片化体验&a…

【RTKLIB源码阅读】rtklibexplorer博客翻译-Updated guide to the RTKLIB configuration file

我已经有一段时间没有更新我的RTKLIB配置文件指南了。 自从上次更新以来,我增加了一些新的功能,并对一些现有的功能有了更多的了解。 对于以前的更新,我只是更新了原帖,但这次我想我应该重新发布它,使它更容易被找到。、 RTKLIB 的一大优点是它的可配置性极强,有一系列的…

excel文件合并,每个excel名称插入excel列

import pandas as pd import os # 设置文件夹路径 folder_path rC:\test # 替换为您的下载文件夹路径 output_file os.path.join(folder_path, BOM材料.xlsx) # 创建一个空的 DataFrame 用于存储合并的数据 combined_data pd.DataFrame() # 遍历文件夹中的所有文件 for …

无法找到 msvcr120.dll,无法执行程序要怎么处理?修改msvcr120.dll文件

遇到“无法找到 msvcr120.dll&#xff0c;无法执行程序”这类错误通常指示着你的计算机缺少了一个核心组件&#xff0c;即 Microsoft Visual C 2013 Redistributable 的一部分&#xff1a;msvcr120.dll 文件。这个文件是许多依赖 Visual C 的应用程序运行的基础。目前修复此类问…

MongDB快速入门

一&#xff0c;MongoDB简介 MongoDB是一个开源&#xff0c;高性能&#xff0c;无模式的文档数据库&#xff0c;当初的设计就是用于简化开发和方便扩展&#xff0c;是NoSQL数据库产品的一种&#xff0c;也是最想关系型数据库的非关系型数据库 它支持的数据结构非常松散&#x…

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树(Minimum Spanning Tree, MST)的经典算法。它通过逐步添加权重最小的边来构建最小生成树,同时确保不会形成环路。在本文中,我们将探讨在特定边权重条件下 Kruskal 算法的性能,并分别给出伪代码和 C 语言实现。特别是,我们将分…

实战 | C# 中使用GPU加速YOLOv11 推理

导 读 本文主要介绍如何在C#中使用GPU加速YOLOv11推理。 YOLOv11介绍 C# 中使用YOLOv11 (GPU版本) 【1】环境和依赖项。 下载安装CUDA12.6和CUDNN9.6,截止文章日期最新版本,注意选择自己的版本,我的系统是win11 64位。

大数据-244 离线数仓 - 电商核心交易 ODS层 数据库结构 数据加载 DataX

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

以nlp为例,区分BatchNorm、LayerNorm、GroupNorm、RMSNorm

以nlp中一个小批次数据&#xff0c;详细区分BatchNorm、LayerNorm、GroupNorm、RMSNorm。这几种归一化的不同。如下表格&#xff0c;从计算范围、统计量、计算复杂度以及应用场景等方面的差异给出。 方法计算范围统计量计算复杂度应用场景BatchNorm跨所有句子的同一维度使用批…

C# 高效编程指南:从命名空间到异常处理的技巧与最佳实践

在这条成长的路上&#xff0c;有一些核心概念将成为你开发过程中的得力助手—命名空间、预处理指令、正则表达式、异常处理和文件输入输出&#xff0c;这些看似独立的技术&#xff0c;实际上在大多数应用中都紧密相连&#xff0c;共同构成了C#开发的基础。 目录 C#命名空间 C…

普及组集训--图论最短路径设分层图

P4568 [JLOI2011] 飞行路线 - 洛谷 | 计算机科学教育新生态 可以设置分层图&#xff1a;(伪代码&#xff09; E(u,v)w;无向图 add(u,v,w),add(v,u,w); for(j1~k){add(ujn,vjn,w);add(vjn,ujn,w);add(ujn-j,vjn-j,0);add(vjn-j,ujn-j,0); } add(ujn-j,vjn-j,0); add(vjn-j,uj…

常用传感器介绍合集

SW-520D倾斜传感器 HX711模块&#xff1a;高精度称重的核心利器 GY302光照传感器模块详解 MLX90614红外测温传感器介绍 MAX30102心率血氧传感器模块&#xff1a;精准健康监测的利器 RGB颜色传感器简介 DS18B20温度传感器模块 人体红外传感器简介 FC-28土壤湿度传感器 …

gitee常见命令

目录 1.本地分支重命名 2.更新远程仓库分支 3.为当前分支设置远程跟踪分支 4.撤销已经push远程的代码 5.idea->gitee的‘还原提交’ 需要和本地当前的代码解决冲突 解决冲突 本地工作区的差异代码显示 本地commit和push远程 6.idea->gitee的‘将当前分支重置到此…