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)示例:

 

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端Vue组件化实践:自定义银行卡号格式化组件的探索与应用

在前端开发中&#xff0c;随着业务逻辑的复杂化和应用规模的扩大&#xff0c;传统的一体式开发方式逐渐显露出其局限性。任何微小的改动或新功能的增加都可能牵一发而动全身&#xff0c;导致整体逻辑的修改&#xff0c;进而增加了开发成本和维护难度。为了解决这一问题&#xf…

Java软件设计模式-单例设计模式

目录 1.软件设计模式的概念 2.设计模式分类 2.1 创建型模式 2.2 结构型模式 2.3 行为型模式 3.单例设计模式 3.1 单例模式的结构 3.2 单例模式的实现 3.2.1 饿汉式-方式1&#xff08;静态变量方式&#xff09; 3.2.2 懒汉式-方式1&#xff08;线程不安全&#xff09; 3.…

数据结构之初始二叉树(2)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 二叉树的前置知识&#xff08;概念、性质、、遍历&#xff09; 通过上篇文章的学习&#xff0c;我们…

STM32第十八课:SPIFlash

目录 需求一、SPI概要二、SPI配置1.开时钟2.配置IO3.配置&使能SPI 三、FLash操作函数1.SPI发送数据2.FLASH写使能3.FLASH等待操作完成4.FLASH页写操作5.FLASH读操作6.FLASH扇区擦除 四、需求实现 需求 通过SPI控制FLash进行数据的保存和删除。 一、SPI概要 在我们使用UA…

oracle控制文件详解以及新增控制文件

文章目录 oracle控制文件1、 控制文件包含的主要信息如下&#xff1a;2、查看目前系统的控制文件信息&#xff0c;主要是查看相关的字典视图 oracle新增控制文件 oracle控制文件 控制文件是一个很小的二进制文件(10MB左右)&#xff0c;含有数据库结构信息&#xff0c;包括数据…

(leetcode学习)15. 三数之和

给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 示例 1&a…

浅谈全量微调和PEFT高效微调(LoRA)

浅谈全量微调和LoRA微调 全量微调Full Fine-Tuning 全量微调是指在预训练的大型模型基础上调整所有层和参数&#xff0c;‌使其适应特定任务的过程。‌这一过程使用较小的学习率和特定任务的数据进行&#xff0c;‌可以充分利用预训练模型的通用特征 高效微调 高效微调&…

PyQt5图形界面--基础笔记

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QToolTip, QLabel, QLineEdit from PyQt5.QtGui import QIcon, QFont, QPixmap import sys https://www.bitbug.net/ 将图片转换为ico格式, 用来更改打包的文件图标 -F 只产生exe文件, 其他临时文件不产生 -…

深度学习论文: XFeat: Accelerated Features for Lightweight Image Matching

深度学习论文: XFeat: Accelerated Features for Lightweight Image Matching XFeat: Accelerated Features for Lightweight Image Matching PDF:https://arxiv.org/pdf/2404.19174 PyTorch: https://github.com/shanglianlm0525/PyTorch-Networks 1 概述 本文创新性地推出了…

kubernetes——Istio(三)

一、安全 将单一应用程序分解为微服务可提供各种好处&#xff0c;包括更好的灵活性、 可伸缩性以及服务复用的能力。但是&#xff0c;微服务也有特殊的安全需求&#xff1a; 为了抵御中间人攻击&#xff0c;需要流量加密。为了提供灵活的服务访问控制&#xff0c;需要双向 TL…

大语言模型可以处理图问题吗?

为了探讨大型语言模型&#xff08;LLM&#xff09;在处理自然语言描述的图结构问题上的能力&#xff0c;提出了NLGraph基准测试集&#xff0c;包含29,370个涉及不同复杂度的图推理任务。这些任务从简单的连通性和最短路径到复杂的最大流和图神经网络模拟。评估结果显示&#xf…

【C语言初阶】探索编程基础:深入理解分支与循环语句的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C语言 “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C语言入门 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀分支与循环语句 &#x1f4d2;1.…

uniapp-day2

目录 1.在uniapp中显示视图有三种方式 2.scss和less的区别&#xff1f; 1. 语法差异 2. 变量和常量 3. 嵌套规则 4. 混合&#xff08;Mixins&#xff09; 5. 继承和扩展 6. 注释 7. 导入其他文件 8. 生态系统和社区支持 9. 其他特性 3.新建页面&#xff1a;要在page…

Transformer模型:scaled self-attention mask实现

前言 视频链接&#xff1a;20、Transformer模型Decoder原理精讲及其PyTorch逐行实现_哔哩哔哩_bilibili 文章链接&#xff1a;Transformer模型&#xff1a;WordEmbedding实现-CSDN博客 Transformer模型&#xff1a;Postion Embedding实现-CSDN博客 Transformer模型&#xff…

一文读懂近场通信NFC

近场通信&#xff08;Near Field Communication&#xff0c;简称NFC&#xff09;&#xff0c;NFC是在非接触式射频识别(RFID)技术的基础上&#xff0c;结合无线互连技术研发而成. 是一种新兴的技术&#xff0c;使用了NFC技术的设备&#xff08;例如移动电话&#xff09;可以在彼…

基于vite的vue脚手架工具整合:ts、jsx、eslint、prettier、stylelint、tailwind...

为了帮助vue新手更高效的学习vue3的基础知识、组件开发以及项目方案整合&#xff0c;小卷给大家整理了一个10分钟搞定《基于vite的vue脚手架工具整合》的教程。所有工具都是目前最新的版本&#xff0c;实践和调试过&#xff0c;没有一行多余的配置。

数据库基本查询(表的增删查改)

一、增加 1、添加信息 insert 语法 insert into table_name (列名) values (列数据1&#xff0c;列数据2&#xff0c;列数据3...) 若插入时主键或唯一键冲突就无法插入。 但如果我们就是要修改一列信息也可以用insert insert into table_name (列名) values (列数据1&am…

【JVM基础03】——组成-详细介绍下Java中的堆

目录 1- 引言&#xff1a;堆1-1 堆是什么&#xff1f;(What)1-2 为什么用堆&#xff1f;堆的作用 (Why) 2- ⭐核心&#xff1a;堆的原理&#xff08;How&#xff09;2-1 堆的划分2-2 Java 7 与 Java 8 的堆区别 3- 小结&#xff1a;3-1 详细介绍下Java的堆&#xff1f;3-2 JVM …

FPGA:基于复旦微FMQL10S400 /FMQL20S400 国产化核心板

复旦微电子是国内集成电路设计行业的领军企业之一&#xff0c;早在2000年就在香港创业板上市&#xff0c;成为行业内首家上市公司。公司的RFID芯片、智能卡芯片、EEPROM、智能电表MCU等多种产品在市场上的占有率位居行业前列。 今天介绍的是搭载复旦微 FMQL10S400/FMQL20S400的…

Python从0到100(三十九):数据提取之正则(文末免费送书)

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…