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

VUE---自定义指令

自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能。可分为全局注册与                        局部注册。

全局注册(main.js中注册):

Vue.directive('指令名称',{

        bind(ele,binding) {},  // 只执行一次;DOM渲染之前执行,里面可以进行样式操作

        inserted(ele,binding) {},  // 只执行一次;DOM渲染之后执行,里面可以进行行为操作                                                 --常用

        update(ele,binding) {}, // 数据更新后执行--常用

        componentUpdated(ele,binding) {}, // 父子组件都更新后执行

        unbind(ele,binding) {}, // 指令解绑的时候执行

})

 局部注册(main.js中注册):

export default {

        Vue.directive('指令名称',{

                bind(ele,binding) {},  // 只执行一次;DOM渲染之前执行,里面可以进行样式操作

                inserted(ele,binding) {},  // 只执行一次;DOM渲染之后执行,里面可以进行行                                                               为操作--常用

                update(ele,binding) {}, // 数据更新后执行--常用

                componentUpdated(ele,binding) {}, // 父子组件都更新后执行

                unbind(ele,binding) {}, // 指令解绑的时候执行

        })

}

指令值的语法:
        ① v-指令名 = "指令值" ,通过 等号 可以绑定指令的值
        ② 通过 binding.value 可以拿到指令的值
        ③ 通过 update 钩子 ,可以监听指令值的变化,进行dom更新操作

 

示例1---打开页面时,输入框自动获取焦点(全局注册,main.js)

// vue页面
<input type="text" v-focus />// main.js
Vue.directive('focus', {// 获取焦点inserted(ele, binding) {console.log(ele) // 绑定指令的元素console.log(binding) // 指令的相关信息(指令的值等)ele.focus() // 让元素获取焦点},
})

结果如下: 

控制台打印的消息如下:

示例2--改变页面字体颜色(局部注册,在页面中注册): 

// vue页面
<h3 v-color="color">需求2:Ajax请求数据,并设计loading指令</h3><script>
export default {data() {return {color: 'red',}},directives: {color: {inserted(el, binding) {el.style.color = binding.value},update(el, binding) {el.style.color = binding.value},},},
}
</script>

结果如下:

修改color变量的值后,页面字体颜色自动更新如下

相关文章:

VUE---自定义指令

自定义指令&#xff1a;自己定义的指令&#xff0c;可以封装一些dom操作&#xff0c;扩展额外功能。可分为全局注册与 局部注册。 全局注册&#xff08;main.js中注册&#xff09;&#xff1a; Vue.directive(指令名称,{ bind(ele,binding) {}, // 只执…...

开发安全之:Cross-Site Scripting (XSS) 漏洞

近期&#xff0c;我会结合研发云陆续发布开发安全相关的文章&#xff0c;欢迎大家关注&#xff01; Overview echo json_encode($arr)&#xff1a;向一个 Web 浏览器发送了未验证的数据&#xff0c;从而导致该浏览器执行恶意代码。 Details Cross-Site Scripting (XSS) 漏洞…...

代码随想录算法训练营第二十四天| 77. 组合

77.组合 public List<List<Integer>> combine(int n, int k) {if (n < k) {return null;}List<List<Integer>> list new ArrayList<>();List<Integer> path new ArrayList<>();backSource(n, path, list, k);return list;}pu…...

虚拟歌姬学习:DiffSinger,让GitHub下载快的方法!

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam&#xff0c;有时只是慢&#xff0c;但是还是…...

What is `StringEscapeUtils.escapeHtml4` does?

StringEscapeUtils.escapeHtml4 作用是将特殊字符转换为它们对应的HTML实体形式&#xff0c;从而防止这些字符在网页中被解析为HTML标签或脚本&#xff0c;有助于防止跨站脚本攻击&#xff08;XSS, Cross-Site Scripting&#xff09; 依赖 <!--org.apache.commons.text.St…...

Dubbo 的心脏:理解和应用多种协议【十三】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Dubbo 的心脏&#xff1a;理解和应用多种协议【十三】 前言<dubbo:protocol> 基础<dubbo:protocol> 的定义和作用微服务中协议的重要性支持的协议类型配置示例 配置基本配置参数高级配置选…...

操作系统实验报告

目录 目录 实验一 一、实验结果 实验二 使用信号量实现进程互斥与同步 一、实验结果 1. 使用信号量实现有限缓冲区的生产者和消费者问题 2. 使用信号量实现读进程具有优先权的读者和写者问题 实验三 死锁和预防 一、实验要求 二、实验内容 三、实验结果 实验四 内…...

IPv6--ACL6(IPv6访问控制列表--基本ACL6配置)

ACL基本原理 ACL由一系列规则组成,通过将报文与ACL规则进行匹配,设备可以过滤出特定的报文。 ACL的组成 ACL编号: 在网络设备上配置ACL时,每个ACL都需要分配一个编号,称为ACL编号,用来标识ACL。不同分类的ACL编号范围不同,这个后面具体讲。 规则: 前面提到了,一个AC…...

C和指针课后答案

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 第八章课后答案 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…...

C语言——大头记单词

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 每一发奋努力的背后&#xff0c;必有加…...

根据自己修改后的容器制作镜像并上传docker hub

要将自己的镜像上传到Docker Hub&#xff0c;可以按照以下步骤进行操作&#xff1a; 首先&#xff0c;确保已经在本地构建好了需要上传的 Docker 镜像。如果还没有构建&#xff0c;可以使用 docker build 命令来创建镜像。 登录到 Docker Hub 账号。打开终端或命令提示符&…...

Maven 基础安装配置及使用

大家好我是苏麟 , 今天聊聊Maven . Maven Maven , 是Apache公司下基于Java开发的开源项目 . 我们构建一个项目需要用到很多第三方的类库&#xff0c;需要引入大量的jar包。一个项目Jar包的数量之多往往让我们瞠目结舌&#xff0c;并且Jar包之间的关系错综复杂&#xff0c;一…...

redis 持久化机制

client redis[内存] -----> 内存数据- 数据持久化-->磁盘 Redis官方提供了两种不同的持久化方法来将数据存储到硬盘里面分别是: RDB 快照(Snapshot) AOF (Append Only File) 只追加日志文件 1 快照(Snapshot) 1. 特点 这种方式可以将某一时刻的所有数据都写入硬盘中…...

MySQL(视图,存储函数,存储过程)

作业1&#xff1a; 作业实现&#xff1a; 首先创建学生表&#xff0c;课程表&#xff0c;以及学生选课表。 CREATE TABLE Student (Sno INT PRIMARY KEY,Sname VARCHAR(20) NOT NULL,Ssex CHAR(1) CHECK (Ssex IN (男, 女)),Sage INT,SDept VARCHAR(20) DEFAULT 计算机 );CRE…...

rockchip 平台 linux FIT 打包格式介绍

1 基础介绍 FIT&#xff08;flattened image tree&#xff09;是U-Boot⽀持的⼀种新固件类型的引导⽅案&#xff0c;⽀持任意多个image打包和校 验。FIT 使⽤ its (image source file) ⽂件描述image信息&#xff0c;最后通过mkimage⼯具⽣成 itb (flattened image tree blob) …...

虚拟机安装宝塔的坑

问题&#xff1a; 在虚拟机中centos7和centos8中安装宝塔之后&#xff0c;无法访问面板。 解决&#xff1a; 1.先关闭防火墙&#xff08;如果本机能够ping通相关端口&#xff0c;则不用关闭防火墙&#xff09; 2.最新的宝塔会自动开启ssl协议&#xff0c;需要手动关闭。…...

Ubuntu使用QtCreator + CMake 开发C/C++程序

平台 OS: Ubuntu 20.04 cmake: 3.16.3 IDE: Qt Creator 4.11.1 Based on Qt 5.14.1 (GCC 5.3.1 20160406 (Red Hat 5.3.1-6), 64 bit) Built on Feb 5 2020 12:48:30 From revision b2ddeacfb5 Copyright 2008-2019 The Qt Company Ltd. All rights reserved. The program …...

【分布式监控】zabbix与grafana连接

1.在zabbix- server服务端安装grafana&#xff0c;并启动服务 先在官网下载软件 https://grafana.com/grafana/download/9.4.7?editionenterprise&pggraf&plcmtdeploy-box-1#可以翻译成中文介绍&#xff0c;很详细的教程 yum install -y https://dl.grafana.com/ent…...

02-编程猜谜游戏

本章通过演示如何在实际程序中使用 Rust&#xff0c;你将了解 let 、 match 、方法、关联函数、外部crate等基础知识。 本章将实现一个经典的初学者编程问题&#xff1a;猜谜游戏。 工作原理如下&#xff1a;程序将随机生成一个介于 1 和 100 之间的整数。然后&#xff0c;程序…...

Web3解密:区块链技术如何颠覆传统互联网

随着区块链技术的崛起&#xff0c;Web3正逐渐成为新一代互联网的代名词。它不再依赖中心化的权威机构&#xff0c;而是通过去中心化、透明、安全的特性&#xff0c;为用户带来更为开放和公正的互联网体验。本文将深入解密Web3&#xff0c;揭示区块链技术如何颠覆传统互联网的基…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

爬虫基础学习day2

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

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...