当前位置: 首页 > 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、行业的发展阶段…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...