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

Vue30 自定义指令 函数式 对象式

news 文章来源：https://blog.csdn.net/Rockandrollman/article/details/136261077 2025/2/12 5:08:53

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>自定义指令</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结：一、定义语法：(1).局部指令：new Vue({															new Vue({directives:{指令名:配置对象}   或   		directives{指令名:回调函数}}) 																		})(2).全局指令：Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。(2).inserted：指令所在元素被插入页面时调用。(3).update：指令所在模板结构被重新解析时调用。三、备注：1.指令定义时不加v-，但使用时要加v-；2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。--><!-- 准备好一个容器--><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr/><input type="text" v-fbind:value="n"></div></body><script type="text/javascript">Vue.config.productionTip = false//定义全局指令/* Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */new Vue({el:'#root',data:{name:'尚硅谷',n:1},directives:{//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。/* 'big-number'(element,binding){// console.log('big')element.innerText = binding.value * 10}, */big(element,binding){console.log('big',this) //注意此处的this是window// console.log('big')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>
</html>

相关文章：

Vue30 自定义指令 函数式 对象式

实例 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>自定义指令</title><script type"text/javascript" src"../js/vue.js"></script></head><body><!-- 需求1&…...

编程日记 2024/2/24 6:47:11

JAVA高并发——单例模式和不变模式

文章目录 1、探讨单例模式2、不变模式 由于并行程序设计比串行程序设计复杂得多&#xff0c;因此我强烈建议大家了解一些常见的设计方法。就好像练习武术&#xff0c;一招一式都是要经过学习的。如果自己胡乱打&#xff0c;效果不见得好。前人会总结一些武术套路&#xff0c;对…...

编程日记 2024/2/24 6:45:09

RabbitMQ（一）：消息队列MQ

目录 1 消息队列MQ1.1 MQ简介1、什么是MQ2、MQ的优势流量削峰应用解耦异常处理数据分发分布式事务 3、消息中间件的弊端4、常用的MQ 1.2 MQ中几个基本概念1.3 MQ的通信模式1.4 消息的发布策略1.5 常用消息中间件协议1、AMQP协议2、MQTT协议3、OpenMessage协议4、kafaka协议 1 消…...

编程日记 2024/2/24 6:43:07

HarmonyOS—使用预览器查看应用/服务效果

DevEco Studio为开发者提供了UI界面预览功能&#xff0c;可以查看应用/服务的UI界面效果&#xff0c;方便开发者随时调整界面UI布局。预览器支持布局代码的实时预览&#xff0c;只需要将开发的源代码进行保存&#xff0c;就可以通过预览器实时查看应用/服务运行效果&#xff0c…...

编程日记 2024/2/24 6:42:06

大项目中，某个cpp文件读取所在包路径的方法

在一个比较大的C项目中&#xff0c;我们有很多包&#xff0c;每个包都有一个自己的src、include、CMakeLists.txt和其它文件&#xff0c;比如以下文件结构&#xff1a; project- pkg1- datas- data.json- src- xxx1.cpp- include- xxx1.h - CMakeLists.txt- pkg2- src- xxx2.…...

编程日记 2024/2/24 6:40:03

gem5学习（25）：用于异构SoC的片上网络模型——Garnet2.0

目录 一、Invocation 二、Configuration 三、Topology 四、Routing 五、Flow Control 六、Router Microarchitecture 七、Buffer Management 八、Lifecycle of a Network Traversal 九、Running Garnet2.0 with Synthetic Traffic 官网教程&#xff1a;gem5: Garnet 2…...

编程日记 2024/2/24 6:39:00

康威生命游戏

康威生命游戏 康威生命游戏(Conway’s Game of Life)是康威发明的细胞自动机。 生命游戏有几个简单的规则&#xff1a; 细胞有两种状态&#xff0c;存活或死亡&#xff0c;每个细胞以自身为中心与周围的八格细胞互动。 对于存活的细胞&#xff1a; 当周围的细胞过少(<2)或…...

编程日记 2024/2/24 6:36:58

vscode与vue环境配置

一、下载并安装VScode 安装VScode 官网下载 二、配置node.js环境 安装node.js 官网下载 会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理)&#xff0c;此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号&#xff1a; 配置系统变量 因为在执…...

编程日记 2024/2/24 6:35:57

Linux的ACL权限以及特殊位和隐藏属性

前言&#xff1a; ACL是什么&#xff1f; ACL&#xff08;Access Control List&#xff09;是一种权限控制机制&#xff0c;用于在Linux系统中对文件和目录进行细粒度的访问控制。传统的Linux权限控制机制基于所有者、所属组和其他用户的三个权限类别&#xff08;读、写、执行…...

编程日记 2024/2/24 6:33:56

使用openai-whisper实现语音转文字

使用openai-whisper实现语音转文字 1 安装依赖 1.1 Windows下安装ffmpeg FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。 # ffmpeg官网 https://ffm…...

编程日记 2024/2/24 6:29:52

C++模板为什么不能声明和定义分离

首先我们要直到C程序运行需要进行的四个阶段。 预处理->编译->汇编->链接 编译&#xff1a;对语法语义分析&#xff0c;分析无误生成汇编&#xff0c;头文件不参加编译&#xff0c;多个源文件是分开单独编译的。 链接&#xff1a;将多个obj文件链接合成一个&#x…...

编程日记 2024/2/24 6:28:51

啊丢的刷题记录手册

1.洛谷题P1923 求第k小的数 题目描述 输入 n&#xff08;1≤n<5000000 且 n 为奇数&#xff09;个数字ai​&#xff08;1≤ai​<109&#xff09;&#xff0c;输出这些数字的第 k 小的数。最小的数是第 0 小。 请尽量不要使用 nth_element 来写本题&#xff0c;因为本题…...

编程日记 2024/2/24 6:27:50

用nginx正向代理https网站

目录 1. 缘起2. 部署nginx3. 测试3.1 http测试3.2 https测试4 给centos设置代理访问外网 1. 缘起 最近碰到了一个麻烦事情&#xff0c;就是公司的centos测试服务器放在内网环境&#xff0c;而且不能直接上外网&#xff0c;导致无法通过yum安装软件&#xff0c;非常捉急。   幸…...

编程日记 2024/2/24 6:25:48

面向对象设计模式

一、单例 一个类只能创建唯一一个对象 利用限制构造、static完成 二、工厂模式 优势&#xff1a;规范接口&#xff08;纯虚函数&#xff09;&#xff1b;实现多态&#xff08;虚函数表&#xff09;&#xff1b;继承 1、简单工厂 一个工厂创建所有产品。 返回基类指针可…...

编程日记 2024/2/24 6:22:45

人工智能_CPU微调ChatGLM大模型_使用P-Tuning v2进行大模型微调_007_微调_002---人工智能工作笔记0102

这里我们先试着训练一下,我们用官方提供的训练数据进行训练. 也没有说使用CPU可以进行微调,但是我们先执行一下试试: https://www.heywhale.com/mw/project/6436d82948f7da1fee2be59e 可以看到说INT4量化级别最低需要7GB显存可以启动微调,但是 并没有说CPU可以进行微调.我们…...

编程日记 2024/2/24 6:20:44

Android自编译Pixel3内核加入KernelSU

背景 让Pixel3 AOSP Android10 4.9内核用上Kernel SU 环境： Ubuntu 18.04 vm aosp10r2 移植参考官方，和github项目 Commits OnlyTomInSecond/android_kernel_xiaomi_sdm845 (github.com) 这个项目是 LineageOS/android_kernel_xiaomi_sdm845 编译的前提 已经有完整…...

编程日记 2024/2/24 6:19:43

Go 数据库编程精粹：database/sql 实用技巧解析

Go 数据库编程精粹&#xff1a;database/sql 实用技巧解析 简介database/sql 库的基础知识核心概念连接池驱动事务 环境配置 建立数据库连接连接到数据库示例&#xff1a;连接 MySQL 数据库连接池管理 执行查询和处理结果基本查询执行多行查询执行单行查询 结果处理处理多行结果…...

编程日记 2024/2/24 6:18:41

AI-Gateway：一款整合了OpenAI、Anthropic、LLama2等大语言模型的统一API接口

关于AI-Gateway AI-Gateway是一款针对大语言模型的统一API接口&#xff0c;该接口可以用在应用程序和托管的大语言模型&#xff08;LLM&#xff09;之间&#xff0c;该工具可以允许我们通过一个统一的API接口将API请求转发给OpenAI、Anthropic、Mistral、LLama2、Anyscale、Go…...

编程日记 2024/2/24 6:16:39

Android 广播的基本概念

一.广播简介 Broadcast是安卓四大组件之一。安卓为了方便进行系统级别的消息通知&#xff0c;引入了一套广播消息机制。打个比方&#xff0c;记得原来在上课的时候&#xff0c;每个班级的教室里都会装有一个喇叭&#xff0c;这些喇叭都是接入到学校的广播室的&#xff0c;一旦…...

编程日记 2024/2/24 6:13:36

【Docker实操】部署php项目

概述 最终达成的容器部署结构和原理如下图&#xff1a; 一、获取nginx、php官方镜像 docker pull nginx //拉取nginx官方镜像 docker pull php:7.4-fpm //拉取php官方镜像需要获取其他可用的php版本&#xff0c;可以上【docker hub】搜索【php】&#xff0c;所有的【xxx-fp…...

编程日记 2024/2/24 6:12:35

多线程-初阶

1. 认识线程&#xff08; Thread &#xff09; 1.1 概念 1) 线程是什么 一个线程就是一个 " 执行流 ". 每个线程之间都可以按照顺讯执行自己的代码 . 多个线程之间 " 同时 " 执行 着多份代码 . 还是回到我们之前的银行的例子中。之前我们主要描…...

编程日记 2024/2/24 6:11:34

Object和Function是函数，函数都有一个prototype属性

Object 和 Function 都是 JavaScript 自带的函数对象 在 JavaScript 中&#xff0c;万物皆对象&#xff0c;你要一个吗&#xff1f;new Object() 啊&#xff01; 当然&#xff0c;就好比同样为人&#xff0c;也区分普通人和天才。 对象也是有分类的&#xff0c;分为 普通对象…...

编程日记 2024/2/24 6:09:32

stm32利用CubeMX按键控制数码管加减数

首先画电路图&#xff1a; 接下来配置CubeMX&#xff1a; 设置好后生成MDK工程文件&#xff1a; 用keil打开工程&#xff1a; 添加部分代码&#xff1a; /* USER CODE BEGIN Includes */ uint16_t duan[]{0xC0, 0xf9, 0xa4, 0xb0, 0x99, 0x92, 0x82, 0xf8, 0x80, 0x90}; uint1…...

编程日记 2024/2/24 6:08:31

前端页面生成条形码，借助layui打印标签

借助JsBarcode生成条形码 官网&#xff1a;https://lindell.me/JsBarcode/ github: https://github.com/lindell/JsBarcode <div class"table-div" style"display: block;width: 300px; height: 241px; margin: auto;"><table border"1&quo…...

编程日记 2024/2/24 6:07:30

第1~8章 综合复习

1. 重置root密码 1. 重启服务器&#xff08;虚拟机&#xff09;2. 快速选择第二项&#xff0c;然后按 e 键3. 在linux这一行的最后加上一个空格&#xff0c;然后输入 rd.break&#xff0c;然后按 ctrl x 来重启服务4. 在提示符所在位置输入 mount -o remount,rw /sysroot5. 在…...

编程日记 2024/2/24 6:05:29

转运机器人,AGV底盘小车：打造高效、精准的汽车电子生产线

为了满足日益增长的市场需求&#xff0c;保持行业领先地位&#xff0c;某汽车行业电子产品企业引入富唯智能AMR智能搬运机器人及其智能物流解决方案&#xff0c;采用自动化运输措施优化生产节拍和搬运效率&#xff0c;企业生产效率得到显著提升。 项目背景&#xff1a; 1、工厂…...

编程日记 2024/2/24 6:04:27

Spring Boot 的参数校验方案

1、前言 在平时的开发工作中，我们通常需要对接口进行参数格式验证。当参数个数较少（个数小于3）时，可以使用if ... else ...手动进行参数验证。当参数个数大于3个时，使用if ... else ...进行参数验证就会让代码显得臃肿，这个时候推荐使用注解来进行参数验证。 2、常用注…...

编程日记 2024/2/24 5:58:23

第N3周：Pytorch文本分类入门

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营](https://mp.weixin.qq.com/s/rbOOmire8OocQ90QM78DRA) 中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制](https://mtyjkh.blog.csdn.net/)** import torch import…...

编程日记 2024/2/24 5:55:20

宝塔面板安装了mysql5.7和phpMyadmin，但是访问phpMyadmin时提示502 Bad Gateway

操作流程截图如下&#xff1a; 原因是没有选择php版本 选择php版本 下一页找到phpMyAdmin&#xff0c;选择设置 目前只有纯净态&#xff0c;说明没有php环境&#xff0c;前去安装php环境 点击安装&#xff0c;选择版本&#xff0c;这里选择的是7.4版本&#xff0c;编译安…...

编程日记 2024/2/24 5:54:19

K8S—Pod详解

目录 一 Pod基础概念 1.1 Pod是什么 1.2 为什么要使用Pod&#xff1f;Pod在K8S集群中的使用方式&#xff1f; 1.3 基础容器pause 二 Pod的分类 2.1 自主式Pod和控制器管理的Pod 2.2 容器的分类 2.2.1 基础容器&#xff08;infrastructure container&#xff09; 2.2.2…...

编程日记 2024/2/24 5:53:18

网站安全 扫描/seo技术建站

https://codeforces.ml/contest/1353/problem/D (题目链接↑&#xff09; 题解 这题主要用到优先队列&#xff0c;size&#xff08;区间长度&#xff09;大的排在前&#xff0c;size相同的left&#xff08;左端点&#xff09;小的排在前。 主要积累一下这里的语法&#xff1a; …...

编程日记 2025/2/12 4:37:24

东营城乡建设信息网/seo查询 工具

题目描述 给你一个字符串 s &#xff0c;请你返回满足以下条件的最长子字符串的长度&#xff1a;每个元音字母&#xff0c;即 ‘a’&#xff0c;‘e’&#xff0c;‘i’&#xff0c;‘o’&#xff0c;‘u’ &#xff0c;在子字符串中都恰好出现了偶数次。 思路 ①由于问题…...

编程日记 2025/2/12 4:24:16

冷库网站建设毕业论文/广州权威发布

实战需求 vlookup如何实现三变量查找，三个条件字段查询数据？ 文章目录 《示例 1 – 查找 Brad 的数学分数》《示例 2 – 双向查找》《示例 3 – 使用下拉列表作为查找值》《示例 4 – 三向查找》什么是三向查找？ 在示例 2 中，我们使用了一个查找表，其中包含不同科目学…...

编程日记 2025/2/12 3:56:50

国外的电商网站有哪些/搜seo

一般来说&#xff0c;STM32的型号是这样表示的 STM32F103XYxxx 这XY是什么意思呢&#xff1f;其实啊&#xff0c;这个X表示引脚数量&#xff0c;具体的值有如下形式&#xff1a; R64PIN V100PIN Z144PIN Y表示FLASH容量大小&#xff0c;具体有如下取值&#xff1a; 4 16K…...

编程日记 2025/2/11 21:47:15

wordpress更新慢/百度在线翻译

计算机VB基础知识---知识导学VB基础知识---知识导学Viscal Basic语言一.算法1.定义&#xff1a;算法(Algorithm)就是解决某一类问题的方法和步骤。2.算法的五个重要特征&#xff1a;(1)输入&#xff1a;可以是0个或多个输入&#xff1b;算法可以没有输入。(2)输出&#xff1a;可…...

编程日记 2025/2/11 20:53:29

做的王者荣耀钓鱼网站/semir是什么牌子衣服

ImmutableMap的作用 ImmutableMap 的作用就是&#xff1a;可以让java代码也能够创建一个对象常量映射&#xff0c;来保存一些常量映射的键值对。 import com.google.common.collect.ImmutableMap;import java.util.Map;/*** 定义一些常量Map<?,?>* <p>* Create…...

编程日记 2025/2/11 16:36:09