vue学习day09-自定义指令、插槽

29、自定义指令

(1)概念:自己定义的指令,可以封装一些dom操作,扩展额外的功能。

(2)分类:

1)全局注册
2)局部注册
3)示例:

让表单元素一进入页面就获取焦点

①全局注册

效果:

②局部注册

(效果和全局注册一样,但作用范围不同)

(3)指令的值

自定义指令可以通过等号赋值的形式传参,这个值可以通过binding.vue获取

示例:

效果:

 

(4)封装v-loading加载中指令

加载中显示

加载完成,显示:

代码逻辑:

30、插槽

(1)默认插槽

1)作用:让组件内部的一些结构支持自定义
2)语法:
①组件内需要定制的结构部分,改用<slot></slot>占位
②使用组件时,<MyDialog></ MyDialog >标签内部,传入结构替换slot
③示例:

逻辑:

(2)后备内容(默认值)

1)概念:封装组件时,可以为预留的’<slot>’插槽提供后备内容(默认内容)
2)语法:在<slot>标签内,放置内容,作为默认显示的内容
3)效果:
        ①外部使用组件时,不传东西,则slot会显示后备内容
        ②外部使用组件时,传东西了,则slot整体会被换掉
4)示例:

 

学累了,记得歇歇嗷!我先歇为敬

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/46516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gorm多表联合查询 Joins方法 LEFT JOIN , RIGHT JOIN , INNER JOIN, FULL JOIN 使用总结

gorm中多表联合查询&#xff0c;我们可以使用Joins来完成&#xff0c;这个Joins方法很灵活&#xff0c;我们可以非常方便的多多表进行联合查询&#xff0c; 我们先来看看这个方法的官方定义和使用示例&#xff1a; Joins方法定义和使用示例 当然我们这里要说的使用方式是官方示…

CUDA编程 - clock 学习记录

clock 学习记录 一、完整代码二、核函数流程三、main 函数流程四、学习总结&#xff08;共享内存的声明和使用&#xff09;&#xff1a;4.1、例子4.2、数据从全局内存复制到共享内存&#xff1a; 该程序利用CUDA并行计算能力&#xff0c;执行归约操作以找到每个块内的最小值&am…

Spark项目通用开发框架

文章目录 1. 大数据项目结构2. 类说明2.1 公共接口类2.2 TaskNameEnum指定每个任务的名称2.3 TaskRunner中编写任务的业务逻辑 3. 任务执行脚本 每个公司内部都有一套自己的架子&#xff0c;一般新人来了就直接在已有的架子上开发业务。 以下仅仅作为记录下自己使用的架子&…

16_网络IPC1-套接字描述符

用户数据报协议(UDP) 与 传输控制协议(TCP) 文件描述符函数使用套接字的行为 禁止套接字IO

vue 自定义滚动条同步拖动(移动端)

实现效果&#xff0c;拖动左右箭头实现图片区域同步滚动&#xff0c;到边缘停止拖动。 HTML代码 <template><div touchstart"onClick"><!--使用draggable组件 图片列表区域--><draggablev-model"select_list"end"onEnd"cl…

[Windows] 无需PS基础也香 Inpaint v10.2高级便携版

描述 对于经常在互联网上进行操作的学生&#xff0c;白领等&#xff01; 一款好用的软件总是能得心应手&#xff0c;事半功倍。 今天给大家带了一款高科技软件 Inpaint v10.2高级便携版 无需额外付费&#xff0c;永久免费&#xff01; 亲测可运行&#xff01;&#xff01; 内容…

AV1 编码标准中帧内预测技术概述

AV1 编码标准帧内预测 AV1&#xff08;AOMedia Video 1&#xff09;是一种开源的视频编码格式&#xff0c;旨在提供比现有标准更高的压缩效率和更好的视频质量。在帧内预测方面&#xff0c;AV1相较于其前身VP9和其他编解码标准&#xff0c;如H.264/AVC和H.265/HEVC&#xff0c;…

EMR 集群时钟同步问题及解决方案An error occurred (InvalidSignatureException)

目录 1. 问题描述2. 问题原因3. 解决过程4. 时钟同步的重要性5. Linux 系统中的时钟同步方式6. 检查 Linux 系统时钟同步状态7. EMR 集群中的时钟同步配置8. 时钟同步对大数据组件的影响9. 监控和告警策略10. 故障排除和最佳实践11. 自动化时钟同步管理12. 时钟同步与数据一致性…

C++20中的constinit说明符

constinit说明符断言(assert)变量具有静态初始化&#xff0c;即零初始化和常量初始化(zero initialization and constant initialization)&#xff0c;否则程序格式不正确(program is ill-formed)。 constinit说明符声明具有静态或线程存储持续时间(thread storage duration)的…

机器人及其相关工科专业课程体系

机器人及其相关工科专业课程体系 前言传统工科专业机械工程自动化/控制工程计算机科学与技术 新兴工科专业智能制造人工智能机器人工程 总结Reference: 前言 机器人工程专业是一个多领域交叉的前沿学科&#xff0c;涉及自然科学、工程技术、社会科学、人文科学等相关学科的理论…

ozon俄罗斯ceo丨ozon平台数据分析选品神器

ozon俄罗斯ceo是玛依妮加文特。‌作为俄罗斯最大的电子商务公司Ozon Holdings的女首席执行官&#xff0c;‌玛依妮加文特被称为俄罗斯的杰夫贝索斯&#xff08;‌亚马逊CEO&#xff09;‌。‌她在公司中发挥着重要作用&#xff0c;‌不仅负责公司的日常运营和管理&#xff0c;‌…

修改表格颜色

el-table修改表头、列的背景颜色、字体样式_el-table-column背景颜色-CSDN博客 设置表头背景颜色&#xff0c;字体 <el-table :header-cell-style"rowClass" border :data"tableDataTwo" style"width: 100%"><el-table-column width&q…

2. 白盒测试

白盒测试 1. 白盒测试定义 测试软件的内部编码和基础设施&#xff0c;重点是根据预期和期望的输出检查预定义的输入。它基于应用程序的内部工作方式&#xff0c;并围绕内部结构测试。在这种类型的测试中&#xff0c;编程测试用例需要编程技巧。白盒测试的主要目标是通过软件关…

秒懂设计模式--学习笔记(9)【结构型-装饰器模式】

目录 8、装饰器模式8.1 装饰器模式&#xff08;Decorator&#xff09;8.2 装修&#xff08;举例&#xff09;8.3 化妆&#xff08;示例&#xff09;8.4 化妆品的多样化8.5 装饰器8.6 自由嵌套8.7 装饰器模式的各角色定义8.8 装饰器模式 8、装饰器模式 8.1 装饰器模式&#xff…

红色文化3D虚拟数字展馆搭建意义深远

在房地产与土地市场的浪潮中&#xff0c;无论是新城规划、乡村振兴&#xff0c;还是商圈建设&#xff0c;借助VR全景制作、虚拟现实和web3d开发技术打造的全链条无缝VR看房新体验。不仅极大提升了带看与成交的转化率&#xff0c;更让购房者足不出户&#xff0c;即可享受身临其境…

能把进程和线程讲的这么透彻的,没有20年功夫还真不行【0基础也能看懂】

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

SQL Server 创建用户并授权

创建用户前需要有一个数据库&#xff0c;创建数据库命令如下&#xff1a; CREATE DATABASE [数据库名称]; CREATE DATABASE database1; 一、创建登录用户 方式1&#xff1a;SQL命令 命令格式&#xff1a;CREATE LOGIN [用户名] WITH PASSWORD 密码; 例如&#xff0c;创建…

FlinkErr:org/apache/hadoop/hive/ql/parse/SemanticException

在flink项目中跑 上面这段代码出现如下这个异常&#xff0c; java.lang.NoClassDefFoundError: org/apache/thrift/TException 加上下面这个依赖后不报错 <dependency> <groupId>org.apache.thrift</groupId> <artifactId>libthrift</artifactId…

Python绘制相关系数热力图

相关系数热力图是一种可视化工具&#xff0c;用于展示变量之间的相关性。它在数据分析和统计中非常有用&#xff0c;尤其是在探索数据集的内在关系时。本文将介绍如何使用Python绘制相关系数热力图。 一、准备——导入库 使用Pandas来处理数据&#xff0c;Matplotlib和Seabor…

redis笔记2

redis是用c语言写的,放不频繁更新的数据&#xff08;用户数据。课程数据&#xff09; Redis 中&#xff0c;"穿透"通常指的是缓存穿透&#xff08;Cache Penetration&#xff09;问题&#xff0c;这是指一种恶意或非法请求直接绕过缓存层&#xff0c;直接访问数据库或…