Vue2五、自定义指令,全局局部注册、指令的值 ,插槽--默认插槽,具名插槽 ( 作用域插槽)
一、自定义指令
使用步骤
1、自定义指令(全局)
Vue.directive("指令名",{ 指令的配置项 inserted () { } }
2、自定义指令(局部)

3、指令的值
指令值的语法:
<div v-color="color">我是内容</div>
directives: {//color自定义指令名
//参数1:当前加了指令的标签
//参数2:获取指令值,binding.value
----------------------------------------------------------
color: {
//------------------------------------------加载在标签上-----
inserted (el, binding) {
el.style.color = binding.value
},
//指令的值被修改的时候自动触发update钩子-----------改值--------
update (el, binding) {
el.style.color = binding.value
}
}
}
v-loading指令封装-简单练

App.vue
<template><div id="app"><h1 v-color="color1">自定义指令</h1><h1 v-color="color2">自定义指令</h1></div>
</template><script>
export default {
data(){return{color1:'red',color2:'blue',}
},
//自定义指令的值
directives:{color:{// 指令加载在标签时//参数1:加自定义指令的标签(当前加了指令的便签),参数2:获取指令值,binding.valueinserted(el,binding){console.log(el,binding)// <h1>自定义指令</h1> redel.style.color=binding.value},// 指令的值被修改的时候自动触发update钩子update(el,binding){el.style.color=binding.value}}
}
}
</script>
<style>
</style>
例:v-loading加载中...

<template><div class="box" v-loading="isLoading">//----------------------使用自定义命令------<ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div>
</template>
<script>
// 用添加删除类名loading的方式控制是否加载 → 布尔数据控制添加删除类 → 指令值 默认是true 请求回数据false
// 指令要修改值 → 指令得有值 → 2个钩子都要写----// 安装axios => yarn add axios
import axios from 'axios'
// 接口地址:http://hmajax.itheima.net/api/news
// 请求方式:get
export default {data () {return {list: [],isLoading: true//----------------------------默认刚打开页面是加载中------}},//------------------------------------封装自定义指令----------------------directives: {loading: {inserted (el, binding) {// isLoading值为true 添加类名,否则删除类名// this.isLoading ? el.classList.add('loading') : el.classList.remove('loading')binding.value ? el.classList.add('loading') : el.classList.remove('loading')},//值被修改时---------------------等请求回数据时,移除加载中图片的显示()update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中,用于页面渲染 v-forthis.list = res.data.datathis.isLoading = false}, 2000)}
}
</script><style>
/* 通过css添加一个伪元素 → 假的标签 */
.loading::before {/* 必填属性 */content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* center 一个center表示背景图位置 水平和垂直都居中 */background: #fff url(./loading.gif) no-repeat center;
}
.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>
二、插槽
作用:让组件内部的一些 结构 支持 自定义。只有两种插槽(默认+具名)
没有名字的(默认插槽),有名字的(具名插槽)name="xxx"
当组件内某一部分结构不确定--------用插槽 slot 占位封装
1:默认插槽
2:具名插槽
具名插槽语法:
3 :插槽 - 作用域插槽
作用域插槽:传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用。


相关文章:
Vue2五、自定义指令,全局局部注册、指令的值 ,插槽--默认插槽,具名插槽 ( 作用域插槽)
一、自定义指令 使用步骤 1. 注册 (全局注册 或 局部注册) ,在 inserted 钩子函数中,配置指令dom逻辑 2. 标签上 v-指令名 使用 1、自定义指令(全局) Vue.directive("指令名",{ 指令的配置项 insert…...
Pika Labs技术浅析(五):商业智能技术
Pika Labs 的商业智能旨在通过联机分析处理(OLAP)和数据仓库(Data Warehouse)等技术,帮助企业用户高效地进行数据分析和决策支持。 一、商业智能技术模块概述 Pika Labs 的商业智能技术模块旨在通过集成数据仓库和联机…...
YOLO-World:Real-Time Open-Vocabulary Object Detection
目录 摘要 Abstract YOLO-World 1 模型架构 1.1 Text Encoder 1.2 YOLO Backbone 2 RepVL-PAN 2.1 T-CSPLayer 2.2 I-Pooling Attention 2.3 预测 3 消融实验 3.1 预训练数据 3.2 RepVL-PAN的消融实验 3.3 文本编码器 4 效果展示 4.1 零样本 4.2 根据词汇表检…...
Fastjson <= 1.2.47 反序列化漏洞复现
0x01 前言 Fastjson 是一个 Java 语言编写的高性能功能完善的 JSON 库,可以将 Java 对象转换为 JSON 格式,也可以将 JSON 字符串转换为 Java 对象,在中国和美国使用较为广泛。 0x02 漏洞成因 Fastjson < 1.2.68 版本在处理反序列化对象时…...
鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用
鸿蒙项目云捐助第二十一讲云捐助项目物联网IoT模拟器的使用 在前面的内容中,已经实现了云捐助物联网IoT的产品及设备设置,并且使用华为云Iot设备的在线调试工具进行命令下发的调试,这里也可以通过华为Iot物联网提供的MQTT模拟器进行连接。 …...
大数据技术原理与应用期末复习-知识点(二)
HBASE Hbase与传统关系数据库的对比分析 1.数据类型: 关系型数据库采用关系模型 Hbase采用更简单的数据模型(把数据存储为未经解释的字符串) 2.数据操作: 关系数据库:增删改查等 Hbase:插入 查询 删…...
高效准确的PDF解析工具,赋能企业非结构化数据治理
目录 准确性高:还原复杂版面元素 使用便捷:灵活适配场景 贴心服务:快速响应机制 在数据为王的时代浪潮中,企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速,企业所积累的数据量呈爆炸式增长…...
C/C++ 数据结构与算法【栈和队列】 栈+队列详细解析【日常学习,考研必备】带图+详细代码
一、介绍 栈和队列是限定插入和删除只能在表的“端点”进行的线性表,是线性表的子集,是插入和删除位置受限的线性表。 (操作受限的线性表) 二、栈 1)概念: 栈(stack)是一个特殊的线性表,是限…...
读书笔记~管理修炼-缄默效应
缄默效应:学会正确批评下属 员工明明犯了错误,却不及时告知你,总是拖到最后一刻无法弥补时才不得不承认出了问题——你遇到过这样的问题吗? 这其实是缄默效应在发挥作用。 在职场中,即使再扁平化的环境&…...
视频会议系统会前预约模块必须包含哪些功能?
视频会议系统会前预约模块必须包含哪些功能? 视频会议系统的会前预约模块是企业高效管理会议资源、提升会议效率的重要工具。一个完善的会前预约模块必须包含一系列功能,以确保会议的顺利进行和资源的合理分配。以下是对视频会议系统会前预约模块必须包…...
RabbitMQ中的Topic模式
在现代分布式系统中,消息队列(Message Queue)是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个广泛使用的开源消息代理,支持多种消息传递模式,其中 Topic 模式 是一种灵活且强大的模式,允许生产者…...
tslib(触摸屏输入设备的轻量级库)的学习、编译及测试记录
目录 tslib的简介tslib的源码和make及make install后得到的文件下载tslib的主要功能tslib的工作原理tslib的核心组成部分tslib的框架和核心函数分析tslib的框架tslib的核心函数ts_setup()的分析(对如何获取设备名和数据处理流程的分析)函数ts_setup()自身的主要代码ts_setup()对…...
Ubuntu vi(vim)编辑器配置一键补全main函数
1.打开对应的配置文件 vi ~/.vim/snippets/c.snippets 2.按G将光标定位到文件末尾 3.按i进入插入模式 以tab键开头插入下的内容,空行也要加 tab键 4.:wq保存退出 5.再打开任意一个新的 .c文件后,插入模式输入 main 然后按tal键就能补全了...
验证码机制
偶然间看到了验证码机制,顺便总结一下: 首先,验证码是从后端生成的,随机生成; 【后端永远认为前端有可能会被伪造】 1.后端调用相关的绘图第三方类库,或是(平台PHP、.NET、java)系…...
【CVE-2024-56145】PHP 漏洞导致 Craft CMS 出现 RCE
大多数开发人员都同意,与 15 年前相比,PHP 是一种更加理智、更加安全和可靠的语言。PHP5早期的不良设计已让位于更好的开发生态系统,其中包括类、自动加载、更严格的类型、更理智的语法以及一大堆其他改进。安全性也没有被忽视。 register_globals一些老读者可能还记得和的…...
使用FakeSMTP创建本地SMTP服务器接收邮件具体实现。
以下代码来自Let’s Go further节选。具体说明均为作者本人理解。 编辑邮件模版 主要包含三个template: subject:主题plainBody: 纯文本正文htmlBody:超文本语言正文 {{define "subject"}}Welcome to Greenlight!{{end}} {{def…...
【网络安全】逆向工程 练习示例
1. 逆向工程简介 逆向工程 (RE) 是将某物分解以了解其功能的过程。在网络安全中,逆向工程用于分析应用程序(二进制文件)的运行方式。这可用于确定应用程序是否是恶意的或是否存在任何安全漏洞。 例如,网络安全分析师对攻击者分发…...
Oracle Database 21c Express Edition数据库 和 Sqlplus客户端安装配置
目录 一. 前置条件二. Win10安装配置Oracle数据库2.1 数据库获取2.2 数据库安装2.3 数据库配置确认2.4 数据库访问 三. Win10配置Oracle数据库可对外访问3.1 打开文件和打印机共享3.2 开放1521端口 四. 端口与地址确认4.1 查看监听器的状态4.2 Win10查看1521端口是否被监听4.3 …...
arcgisPro将面要素转成CAD多段线
1、说明:正常使用【导出为CAD】工具,则导出的是CAD三维多线段,无法进行编辑操作、读取面积等。这是因为要素面中包含Z值,导出则为三维多线段数据。需要利用【复制要素】工具禁用M值和Z值,再导出为CAD,则得到…...
相机内外参知识
已知相机的内外参数矩阵,可以求得相机在世界坐标系下的原点坐标。这里需要理解几个概念: 内参数矩阵(Intrinsic Matrix): 描述相机本身的属性,比如焦距、主点位置等。外参数矩阵(Extrinsic Matrix…...
多层PCB板层叠结构详解:如何选择适合你的设计?
多层PCB板层叠结构详解:如何选择适合你的设计? 在电子设计领域,PCB(印制电路板)是连接各种电子元器件的核心载体。随着电子产品功能的日益复杂,简单的单层或双层PCB已无法满足现代设计需求,多层…...
BurpSuite导入P12证书遇到密码问题?3种无密码解决方案实测
BurpSuite导入P12证书遇到密码问题?3种无密码解决方案实测 在企业安全测试和渗透评估过程中,客户端证书认证是常见的防护机制。当BurpSuite提示需要P12证书密码而您又无法获取时,整个测试流程可能陷入僵局。本文将分享三种经过实战验证的解决…...
VS Code 效率技巧:符号导航快速定位代码
推荐阅读 技术总监悄悄秀了一把 VS Code 神技,被我狠狠学到了! VS Code 又发布了一个 Agent 新玩具! VS Code 1.110 官宣 AI 新特性:AI 直接调试浏览器! VS Code 2026 效率秘籍:学完无敌!…...
如何高效突破内容付费墙:Bypass Paywalls Clean浏览器扩展深度技术解析
如何高效突破内容付费墙:Bypass Paywalls Clean浏览器扩展深度技术解析 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字内容访问受限的时代,Bypass Payw…...
Winhance中文版:图形界面驱动的Windows系统优化解决方案
Winhance中文版:图形界面驱动的Windows系统优化解决方案 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-…...
ruoyi-vue-pro源码部署实战:如何选择稳定版本并快速搭建开发环境
RuoYi-Vue-Pro 稳定版部署指南:从版本选择到开发环境搭建全解析 第一次接触 RuoYi-Vue-Pro 这个 Java 快速开发框架时,我像大多数开发者一样直接克隆了 master 分支,结果编译阶段就遭遇了各种依赖冲突和接口报错。后来才发现,这个…...
Ostrakon-VL-8B惊艳效果:同一界面内对比原始图/热力图/标注图三视图
Ostrakon-VL-8B惊艳效果:同一界面内对比原始图/热力图/标注图三视图 1. 像素特工终端:重新定义零售视觉分析 想象一下,当你走进一家零售店铺,能瞬间"扫描"出所有商品的位置、价格标签和货架状态。这正是Ostrakon-VL-8…...
网页资源下载革新工具:ResourcesSaverExt高效使用指南
网页资源下载革新工具:ResourcesSaverExt高效使用指南 【免费下载链接】ResourcesSaverExt Chrome Extension for one click downloading all resources files and keeping folder structures. 项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt …...
MTK平台录音杂音怎么来的?从AudioALSACaptureDataClientAurisysNormal的mDropPopSize说起
MTK平台录音杂音问题深度解析:从硬件初始化到算法优化的全链路解决方案 在移动设备音频开发领域,MTK平台的录音杂音问题一直是困扰开发者的典型痛点。特别是录音起始阶段出现的"爆破音"或"电流声",不仅影响用户体验&…...
实战应用:基于快马开发企业内软件合规性与安全拦截演示工具
今天想和大家分享一个在企业IT支持场景中非常实用的工具开发经验——基于InsCode(快马)平台开发的软件合规性检查演示工具。这个工具特别适合用来做内部培训或用户教育,帮助大家理解系统弹出的"智能应用控制已阻止可能不安全的应用"这类安全警告背后的逻辑…...



