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

Vue自定义指令

news 2026/3/27 21:28:39

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

 自定义指令函数式v-big：

<body><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span></h2><h2>放大十倍后的n的值是：<span v-big="n"></span></h2><button @click="n++">点我n+1</button></div>
</body><script>new Vue({el:'#root',data:{name:'木木',n:1,},directives:{//big指令何时被调用，1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时候。//参数element就是dom元素，binding绑定的值的所有信息big(element,binding){console.log(element,binding)element.innerText = binding.value*10}}})</script>

 

 

element:

 

 binding:

 自定义指令对象式fbind：

<body><!--需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span></h2><h2>放大十倍后的n的值是：<span v-big="n"></span></h2><button @click="n++">点我n+1</button><hr/><input type="text" v-fbind:value="n"></div>
</body><script>new Vue({el:'#root',data:{name:'木木',n:1,},directives:{//big指令何时被调用，1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时候。//参数element就是dom元素，binding绑定的值的所有信息//自定义的指令函数式big(element,binding){// console.log(element,binding)element.innerText = binding.value*10},//自定义的指令对象式fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时调用inserted(element,binding){element.focus()},//指令所在的模板被重新解析时调用update(element,binding){element.value = binding.value},}}})</script>

效果：

 总结：

 

相关文章：

Vue自定义指令

需求1&#xff1a;定义一个v-big指令&#xff0c;和v-text功能类似&#xff0c;但会把绑定的数值放大10倍。 需求2&#xff1a;定义一个v-fbind指令&#xff0c;和v-bind功能类似&#xff0c;但可以让其所绑定的input元素默认获取焦点。 自定义指令函数式v-big&#xff1a; &l…...

编程日记 2023/7/21 4:45:43

SpringBoot+JWT实现单点登录解决方案

一、什么是单点登录? 单点登录是一种统一认证和授权机制&#xff0c;指在多个应用系统中&#xff0c;用户只需要登录一次就可以访问所有相互信任的系统&#xff0c;不需要重新登录验证。 单点登录一般用于互相授信的系统&#xff0c;实现单一位置登录&#xff0c;其他信任的…...

编程日记 2023/7/21 4:12:21

中国国债发行数据集（2002-2023）

国债是由国家发行的债券&#xff0c;由于国债的发行主体是国家&#xff0c;所以它具有最高的信用度&#xff0c;被公认为是最安全的投资工具。国债按照交易市场的不同分为三类&#xff0c;即银行间市场国债、交易所市场国债和柜台市场国债&#xff1b;按照交易方式的不同分为三…...

编程日记 2023/7/21 3:39:00

曲师大2023大一新生排位赛-C.String题解

C.String 题目描述 众所周知&#xff0c;许师哥精通字符串。 一天&#xff0c;许师哥意外的获得了一个字符串&#xff0c;但他发现这个字符串并不是一个回文串&#xff0c;因此他非常生气。于是他决定从这个字符串中删除若干个字符使得 剩余的字符串为一个回文串。 回想回文串…...

编程日记 2023/7/21 3:05:39

Linux Ubuntu安装RabbitMQ服务

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…...

编程日记 2023/7/21 2:32:18

什么是测试用例？如何设计？

在学习或者实际的测试工作中经常都会提到“测试用例”这个词&#xff0c;没错&#xff0c;测试用例是测试工作的核心&#xff0c;不管要做的是什么样的测试&#xff0c;在真正动手执行测试之前&#xff0c;我们都需要先根据软件需求来设计测试用例&#xff0c;之后再依据设计好…...

编程日记 2023/7/21 1:58:57

Maven —— 项目管理工具

前言 在这篇文章中&#xff0c;荔枝会介绍如何在项目工程中借助Maven的力量来开发&#xff0c;主要涉及Maven的下载安装、环境变量的配置、IDEA中的Maven的路径配置和信息修改以及通过Maven来快速构建项目。希望能对需要配置的小伙伴们有帮助哈哈哈哈~~~ 文章目录 前言 一、初…...

编程日记 2023/7/21 1:25:36

Ubuntu 命令行编辑文件后如何保存退出

在 Ubuntu 命令行中编辑文件后&#xff0c;可以使用以下步骤保存并退出&#xff1a; 按下键盘上的 Ctrl 键和 X 键组合&#xff0c;以退出编辑模式。如果文件已更改&#xff0c;你将看到提示&#xff0c;询问是否保存更改。按下 Y 键来确认保存更改&#xff0c;或按下 N 键取消…...

编程日记 2023/7/21 0:52:14

AHB协议理解

从小父亲就教育我&#xff0c;做一个对社会有用的人&#xff01; 目录 Chapter1 AHB Block Diagram Ginput signal lnput signals Output Signal Chapter3 Transfers AHB接口Overview Chapter6 Data Buses HWDATA HRDATA Chapter1 Introduction AHB: Advanced High-performanc…...

编程日记 2023/7/21 0:18:51

【UE5 多人联机教程】01-创建主界面

目录 工程地址 步骤 参考链接 工程地址 GitHub - UE4-Maple/C_MP_Lobby: 多人大厅教程项目 步骤 1. 先新建一个工程 2. 将下载的工程中的Plugins目录拷贝到自己新建的工程下 3. 打开工程&#xff0c;新建一个游戏实例 这里命名为“GI_Main” 在项目设置中设置游戏实例类为…...

编程日记 2023/7/20 23:45:30

HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 五）

Styles装饰器&#xff1a;定义组件重用样式 如果每个组件的样式都需要单独设置&#xff0c;在开发过程中会出现大量代码在进行重复样式设置&#xff0c;虽然可以复制粘贴&#xff0c;但为了代码简洁性和后续方便维护&#xff0c;我们推出了可以提炼公共样式进行复用的装饰器St…...

编程日记 2023/7/20 23:12:09

React(3)

1.案例选项卡 import React, { Component } from reactexport default class App extends Component {state{tabList:[{id:1,text:"电影"},{id:2,text:"影院"},{id:3,text:"我的"}]}render() {return (<div><ul>{this.state.tabList…...

编程日记 2023/7/20 22:38:48

LangChain大型语言模型(LLM)应用开发(三)：Chains

LangChain是一个基于大语言模型&#xff08;如ChatGPT&#xff09;用于构建端到端语言模型应用的 Python 框架。它提供了一套工具、组件和接口&#xff0c;可简化创建由大型语言模型 (LLM) 和聊天模型提供支持的应用程序的过程。LangChain 可以轻松管理与语言模型的交互&#x…...

编程日记 2023/7/20 22:05:27

FPGA——点亮led灯

文章目录 一、实验环境二、实验任务三、实验过程3.1 编写verliog程序3.2 引脚配置 四、仿真4.1 仿真代码4.2仿真结果 五、实验结果六、总结 一、实验环境 quartus18.1 vscode Cyclone IV开发板 二、实验任务 每间隔1S实现led灯的亮灭&#xff0c;实现流水灯的效果。 三、实…...

编程日记 2023/7/20 21:32:06

idea创建spark教程

1、环境准备 java -version scala -version mvn -version spark -version 2、创建spark项目 创建spark项目&#xff0c;有两种方式&#xff1b;一种是本地搭建hadoop和spark环境&#xff0c;另一种是下载maven依赖&#xff1b;最后在idea中进行配置&#xff0c;下面分别记录两…...

编程日记 2023/7/20 20:58:44

【JavaEE】DI与DL的介绍-Spring项目的创建-Bean对象的存储与获取

Spring的开发要点总结 文章目录 【JavaEE】Spring的开发要点总结&#xff08;1&#xff09;1. DI 和 DL1.1 DI 依赖注入1.2 DL 依赖查询1.3 DI 与 DL的区别1.4 IoC 与 DI/DL 的区别 2. Spring项目的创建2.1 创建Maven项目2.2 设置国内源2.2.1 勾选2.2.2 删除本地jar包2.2.3 re…...

编程日记 2023/7/20 20:25:24

C#图片处理

查找图片所在位置 原理&#xff1a;使用OpenCvSharp对比查找小图片在大图片上的位置 private static System.Drawing.Point Find(Mat BackGround, Mat Identify, double threshold 0.8) {using (Mat res new Mat(BackGround.Rows - Identify.Rows 1, BackGround.Cols - Iden…...

编程日记 2023/7/20 19:52:02

php 开发微信 h5 支付 APIv3 接入超详细流程

✨ 目录 &#x1f388; 申请商户号&#x1f388; 申请商户证书&#x1f388; 设置V3密钥&#x1f388; 开通H5支付&#x1f388; 设置支付域名&#x1f388; SDK 下载&#x1f388; 第一次下载平台证书&#x1f388;非第一次下载平台证书&#x1f388; H5下单 &#x1f388; 申…...

编程日记 2023/7/20 19:18:41

HTML学习 第一部分（前端学习）

参考学习网站: 网页简介 (w3schools.com) 我的学习思路是&#xff1a;网站实践视频。 视频很重要的&#xff0c;因为它会给你一种开阔思路的方式。你会想&#xff0c;噢&#xff01;原来还可以这样。这是书本或者网站教程 所不能教给你的。而且&#xff0c;对一些教程&#…...

编程日记 2023/7/20 18:45:20

python 实现串口指令通讯

上一篇文章文章写了串口数据的读取&#xff0c;这篇文章讲串口数据的写入&#xff08;指令控制&#xff09; 与下位机通信往往需要十六进制形式进行数据通信&#xff0c;根据设备串口通信指令文档进行指令通信&#xff0c;本篇以灯光控制为例&#xff1a; 1.pyserial模块封装…...

编程日记 2023/7/20 18:11:58

Mermaid在线编辑器：开源可视化工具的图表创作革命

Mermaid在线编辑器&#xff1a;开源可视化工具的图表创作革命 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor …...

编程新知 2026/3/27 20:47:38

基于MATLAB的平移线扫激光三维重建完整方案与代码实现

现整理了一套完整的&#xff0c;平移线扫重建 matlab代码和方案&#xff0c;包含相机标定、光平面标定与方案、移动装置标定与方案、激光线条中心线自适应提取、畸变矫正、三维重建、点云滤波等部分&#xff0c;代码按模块编写&#xff0c;注释完整&#xff0c;附带一份完整苹果…...

编程新知 2026/3/27 20:01:05

Matlab中的QRBiGRU分位数回归双向门控循环单元模型：多图输出与多指标评估的时间序列区间预测

Matlab实现基于QRBiGRU分位数回归双向门控循环单元的时间序列区间预测模型&#xff1a; 1.Matlab实现基于QRBiGRU分位数回归双向门控循环单元的时间序列区间预测模型 2.多图输出、多指标输出(MAE、RMSE、MSE、R2)&#xff0c;多输入单输出&#xff0c;含不同置信区间图、概率密…...

编程新知 2026/3/27 19:20:52

利用快马ai快速生成流水线plc控制逻辑原型，无硬件也能验证思路

最近在做一个自动化流水线的小项目&#xff0c;需要设计PLC控制逻辑。传统方式需要先搭建硬件环境才能调试&#xff0c;但通过InsCode(快马)平台的AI辅助&#xff0c;我实现了无硬件环境下的快速原型验证&#xff0c;分享下这个实用经验。 项目背景与需求分析 这个流水线控制系…...

编程新知 2026/3/27 18:26:32

【C++】三大图像加载库实战对比：libpng、FreeImage与stb_image的选型指南

1. 为什么需要图像加载库&#xff1f; 在C项目中处理图像文件时&#xff0c;直接操作二进制数据就像用螺丝刀吃牛排——理论上可行&#xff0c;但实际体验极其糟糕。图像加载库就是帮我们解决这个问题的餐具套装。以最常见的PNG文件为例&#xff0c;它可能包含调色板、压缩数据…...

编程新知 2026/3/27 18:06:06

Llama-3.2V-11B-cot惊艳案例：电影截图角色关系推演与剧情发展预测展示

Llama-3.2V-11B-cot惊艳案例&#xff1a;电影截图角色关系推演与剧情发展预测展示 1. 视觉推理工具简介 Llama-3.2V-11B-cot是基于Meta多模态大模型开发的高性能视觉推理工具&#xff0c;专为双卡4090环境深度优化。该工具不仅修复了视觉权重加载的关键问题&#xff0c;还支持…...

编程新知 2026/3/27 17:54:05

效率飙升：用快马平台一键生成项目模板，告别重复的vscode环境配置

作为一个经常需要在新设备上配置开发环境的前端开发者&#xff0c;我深刻体会到重复搭建项目的痛苦。每次换电脑或者开新项目&#xff0c;都要从头安装VSCode插件、配置构建工具、集成UI库……这些琐碎工作至少会浪费半小时。最近发现InsCode(快马)平台能完美解决这个问题&…...

编程新知 2026/3/27 17:35:58

别再死记硬背Sarsa公式了！用Python手搓一个‘胆小’的迷宫探索AI（附完整代码）

用Python打造胆小如鼠的迷宫AI&#xff1a;Sarsa算法实战图解 当你在迷宫中小心翼翼地贴着墙走&#xff0c;生怕掉进陷阱时——恭喜&#xff0c;你已经理解了Sarsa算法的核心思想。今天我们不谈枯燥的数学公式&#xff0c;而是用Python构建一个会"瑟瑟发抖"的迷宫探索…...

编程新知 2026/3/27 17:01:35

2026降AI率工具红黑榜：降AI率网站怎么选？看完少走弯路

千笔AI、ThouPen、豆包位列红榜&#xff0c;精准适配国内高校AI率检测规范&#xff1b;黑榜需避开低质免费工具、无正规检测对接平台及改写痕迹明显的工具&#xff1b;选择时应优先匹配三维模型&#xff1a;降AI效果-学术合规性-使用成本。 一、红榜&#xff1a;10 款高分论文降…...

编程新知 2026/3/27 15:43:03

Qwen3.5-27BGPU算力优化实践：FP16量化+梯度检查点+内存映射技术

Qwen3.5-27B GPU算力优化实践&#xff1a;FP16量化梯度检查点内存映射技术 1. 引言 在部署大型视觉多模态模型Qwen3.5-27B时&#xff0c;GPU显存和计算效率是两大关键挑战。本文将分享我们在4张RTX 4090 D 24GB显卡环境下&#xff0c;通过FP16量化、梯度检查点和内存映射三项…...

编程新知 2026/3/27 15:41:03