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

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

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

<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>

相关文章:

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

让输入框自动获取焦点(每次刷新自动获取焦点&#xff09; <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…...

静坐修心.

文章目录 打坐的历史文化渊源东方的起源与传承西方的接受与演变现代生活中的打坐 盘腿坐对身体的影响促进脊椎健康改善呼吸系统功能增强消化系统机能改善血液循环调节神经系统错误姿势及其他潜在危害 盘腿坐对心理的作用促进内心平静与放松提升自我觉察与内在探索培养专注力与精…...

设计模式c++(一)

文章目录 一、面向对象设计原则二、模版方法三、策略模式四、观察者模式五、装饰模式六、桥模式七、工厂方法_Factory Method八、抽象工厂_Abstract Factory九、原型模式十、构建器_builder十一、单件模式_Singleton十二、享元模式_Flyweight 一、面向对象设计原则 设计模式的…...

核密度估计——从直方图到核密度(核函数)估计_带宽选择

参考 核密度估计&#xff08;KDE&#xff09;原理及实现-CSDN博客 机器学习算法&#xff08;二十一&#xff09;&#xff1a;核密度估计 Kernel Density Estimation(KDE)_算法_意念回复-GitCode 开源社区 引言 在统计学中&#xff0c;概率密度估计是一种重要的方法&#xff0…...

Vant UI Axure移动端元件库:提升移动端原型设计效率

UI框架的选择对于提升开发效率和用户体验至关重要。Vant UI&#xff0c;作为一款基于Vue.js的轻量、可靠的移动端组件库&#xff0c;自2017年开源以来&#xff0c;凭借其丰富的组件库、良好的性能以及广泛的兼容性&#xff0c;在移动端开发领域崭露头角&#xff0c;赢得了众多开…...

如何用 JavaScript 操作 DOM 元素?

如何用 JavaScript 操作 DOM 元素&#xff1f;——结合实际项目代码示例讲解 在前端开发中&#xff0c;DOM&#xff08;文档对象模型&#xff09;操作是与页面交互的核心。通过 DOM 操作&#xff0c;开发者可以动态地修改页面内容、响应用户交互、控制样式等。JavaScript 提供…...

【Ubuntu】URDC(Ubuntu远程桌面助手)安装、用法,及莫名其妙进入全黑模式的处理

1、简述 URDC是Ubuntu远程桌面助手的简称。 它可以: 实时显示桌面:URDC支持通过Windows连接至Ubuntu设备(包括x86和ARM架构,例如Jetson系列、树莓派等)的桌面及光标。远程操控双向同步剪切板多客户端连接:同一Ubuntu设备最多可同时被三台Windows客户端连接和操控,适用于…...

ES-DSL查询

term查询 因为精确查询的字段搜是不分词的字段&#xff0c;因此查询的条件也必须是不分词的词条。查询时&#xff0c;用户输入的内容跟自动值完全匹配时才认为符合条件。如果用户输入的内容过多&#xff0c;反而搜索不到数据。 语法说明&#xff1a; // term查询 GET /index…...

npm 设置镜像

要在npm中设置镜像&#xff0c;你可以使用npm config命令。以下是设置npm镜像的步骤&#xff1a; 临时使用淘宝镜像&#xff1a; npm --registry https://registry.npmmirror.com install package-name 永久设置镜像&#xff1a; npm config set registry https://registry…...

SpringMvc完整知识点一

SpringMVC概述 定义 SpringMVC是一种基于Java实现MVC设计模型的轻量级Web框架 MVC设计模型&#xff1a;即将应用程序分为三个主要组件&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&#xff09;。这种分离…...

STM32G4系列MCU双ADC多通道数据转换的应用

目录 概述 1 STM32Cube配置项目 1.1 基本参数配置 1.1.1 ADC1参数配置 1.1.2 ADC2参数配置 1.2 项目软件架构 2 功能实现 2.1 ADC转换初始化 2.2 ADC数据组包 3 测试函数 3.1 Vofa数据接口 3.2 输入数据 4 测试 4.1 ADC1 通道测试 4.2 ADC2 通道测试 概述 本文…...

【工具】音频文件格式转换工具

找开源资源、下载测试不同库的效果&#xff0c;然后找音频、下载音频、编写代码、测试转换、流程通畅。写一个工具花的时间越来越多了&#xff01;这个 5 天 这个工具是一个音频文件格式转换工具&#xff0c;支持对 mp3.aac.wav.caf.flac.ircam.mp2.mpeg.oga.opus.pcm.ra.spx.…...

ssl证书过期,nginx更换证书以后仍然显示过期证书

记一次nginx部署异常 今天提示ssl证书过期了&#xff0c;然后重新申请了一个证书 反反复复折腾了一个上午&#xff0c;还更换了好几个平台&#xff0c;发现怎么更换都没用&#xff0c;百度上的解决方法都试过了&#xff0c;发现都没用&#xff0c;证书还是显示的原来那一个&…...

原型模式(Prototype Pattern)——对象克隆、深克隆与浅克隆及适用场景

原型模式&#xff08;Prototype Pattern&#xff09;是设计模式中的一种创建型模式&#xff0c;目的是通过复制现有的对象来创建新的对象&#xff0c;而不是通过传统的实例化方式。原型模式常常用于需要创建大量类似对象的场景&#xff0c;可以提高性能并减少资源的消耗。下面将…...

从工标网网站解析标准信息

import requests from bs4 import BeautifulSoup 将标准搜索关键词转化成GBK格式&#xff0c;并用%连接转化后16进制&#xff0c;转化成工标网的查询网址url text “GB/T 9755” utf8_encoded_text text.encode(‘GBK’) #print(utf8_encoded_text) hex_representation ‘…...

如何在MySQL中开启死锁日志及查看日志

在数据库的多用户环境中&#xff0c;死锁是一个常见的问题&#xff0c;它可能会影响到数据库的性能和稳定性。MySQL提供了一些工具和命令来帮助我们识别和解决死锁问题。本文将介绍如何在MySQL中开启死锁日志以及如何查看这些日志。 一、为什么需要死锁日志 死锁是指两个或多…...

VCP-CLIP A visual context prompting modelfor zero-shot anomaly segmentation

GitHub - xiaozhen228/VCP-CLIP: (ECCV 2024) VCP-CLIP: A visual context prompting model for zero-shot anomaly segmentation 需要构建正样本&#xff0c;异常样本&#xff0c;以及对应的Mask...

分类算法中的样本不平衡问题及其解决方案

一、样本不平衡问题概述 在机器学习的分类任务中&#xff0c;样本不平衡是指不同类别训练样本数量存在显著差异的现象。这一差异会给模型训练和性能评估带来挑战&#xff0c;尤其在处理少数类样本时&#xff0c;模型可能难以有效学习其特征。 以二分类为例&#xff0c;理想情况…...

博物馆导览系统方案(一)背景需求分析与核心技术实现

维小帮提供多个场所的室内外导航导览方案&#xff0c;如需获取博物馆导览系统解决方案可前往文章最下方获取&#xff0c;如有项目合作及技术交流欢迎私信我们哦~撒花&#xff01; 一、博物馆导览系统的背景与市场需求 在数字化转型的浪潮中&#xff0c;博物馆作为文化传承和知…...

[创业之路-169]:《BLM战略规划》- 战略洞察 (战略能力中最最核心的能力) - 市场洞察 -1- 看宏观/行业 - 行业:激光器行业的详细分析

目录 一、激光器行业的详细分析 1. 行业总容量分析 2. 行业成长性分析 3. 行业的供需结构 4. 行业的发展阶段与动态S曲线 5. 行业集中度 6. 关键成功因素 二、对深紫外激光器进行如下分析 1、行业总容量分析 2、行业成长性分析 3、行业的供需结构 4、行业的发展阶段…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...