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

news2024/9/22 5:30:10

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.coloradmin.cn/o/1927468.html

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

相关文章

CV07_深度学习模块之间的缝合教学(2)--维度转换

教学&#xff08;1&#xff09;&#xff1a;链接 1.1 预备知识 问题&#xff1a;假如说我们使用的模型张量是三维的&#xff0c;但是我们要缝合的模块是四维的&#xff0c;应该怎么办&#xff1f; 方法&#xff1a;pytorch中常用的函数&#xff1a;(1)view函数&#xff08;2…

C++基础(三)

1.再探构造函数 之前的构造函数&#xff0c;初始化成员变量主要使用函数体内赋值&#xff0c;构造函数初始化还有一种方式&#xff0c;就是初始化列表&#xff0c;初始化列表的使用方式是以一个冒号开始&#xff0c;接着是一个以逗号分隔开的数据成员列表&#xff0c;每个“成…

系统架构师考点--软件工程(上)

大家好。今天我来总结一下软件工程的相关考点。这部分是考试的重点。在上午场客观题、下午场案例题以及下午场论文都有可能考到&#xff0c;在上午场客观题中大约占12-15分左右。 一、软件工程概述 软件开发生命周期 软件定义时期&#xff1a;包括可行性研究和详细需求分析过…

3d导入模型后墙体变成黑色?---模大狮模型网

在展览3D模型设计领域&#xff0c;技术和设计的融合通常是创意和实现之间的桥梁。然而&#xff0c;有时设计师们会遇到一些技术上的挑战&#xff0c;如导入3D模型后&#xff0c;墙体却突然变成了黑色。这种问题不仅影响了设计的视觉效果&#xff0c;也反映了技术应用中的一些复…

数据结构(4.4)——求next数组

next数组的作用:当模式串的第j个字符失配时&#xff0c;从模式串的第next[j]的继续往后匹配 求模式串的next数组(手算) next[1] 任何模式串都一样&#xff0c;第一个字符不匹配时&#xff0c;只能匹配下一个子串&#xff0c;因此&#xff0c;往后&#xff0c;next[1]都无脑写…

数据库学习作业

使用mysgldump命令备份数据库中的所有表 备份booksDB数据库中的books表 使用mysgldump备份booksDB和test数据库(test数据库自行准备) 使用mysq1命令还原第二题导出的book表 进入数据库使用source命令还原第二题导出的book表 创库&#xff0c;建表 建表的结果 插入数据 使用mysg…

医院同步时钟,构建医院零误差时间环境

在医院这个分秒必争、责任重大的场所&#xff0c;时间的准确性和一致性至关重要。医院同步时钟的应用&#xff0c;为构建医院零误差时间环境提供了坚实的保障。 一、医院同步时钟应用原因 首先&#xff0c;医疗工作的精确性和协同性依赖于统一且准确的时间。从手术的安排到药物…

MySQL篇:事务

1.四大特性 首先&#xff0c;事务的四大特性&#xff1a;ACID&#xff08;原子性&#xff0c;一致性&#xff0c;隔离性&#xff0c;持久性&#xff09; 在InnoDB引擎中&#xff0c;是怎么来保证这四个特性的呢&#xff1f; 持久性是通过 redo log &#xff08;重做日志&…

解析CQRS架构模式

在日常开发过程中&#xff0c;关于如何正确划分操作的边界和职责一直是我们需要考虑的一个核心问题。针对这个问题&#xff0c;业界也诞生了一些新的设计思想和开发模式&#xff0c;其中最具代表性的就是今天要介绍的CQRS。 CQRS的全称是Command Query Responsibility Segregat…

图——图的遍历(DFS与BFS)

前面的文章中我们学习了图的基本概念和存储结构&#xff0c;大家可以通过下面的链接学习&#xff1a; 图的定义和基本术语 图的类型定义和存储结构 这篇文章就来学习一下图的重要章节——图的遍历。 目录 一&#xff0c;图的遍历定义&#xff1a; 二&#xff0c;深度优先…

【java计算机毕设】网上购书管理系统MySQL servlet JSP项目设计源代码 期末寒暑假作业 小组作业

目录 1项目功能 2项目介绍 3项目地址 1项目功能 【java计算机毕设】网上购书管理系统MySQL servlet JSP项目设计源代码 期末寒暑假作业 小组作业 2项目介绍 系统功能&#xff1a; servlet网上购书管理系统包括管理员、用户两种角色。 管理员功能包括订单管理&#xff08;已…

前端Vue组件化实践:自定义加载组件的探索与应用

在前端开发领域&#xff0c;随着业务逻辑复杂度的提升和系统规模的不断扩大&#xff0c;传统的开发方式逐渐暴露出效率低下、维护困难等问题。为了解决这些挑战&#xff0c;组件化开发作为一种高效、灵活的开发模式&#xff0c;受到了越来越多开发者的青睐。本文将结合实践&…

MySQL下载安装使用教程图文教程(超详细)

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 这一章节我们使…

Windows安装和使用Doccano标注工具

简介 开源链接&#xff1a;GitHub - doccano/doccano: Open source annotation tool for machine learning practitioners. Open source annotation tool for machine learning practitioners. Doccano是一款开源的文本标注工具&#xff0c;由人工智能公司Hironsan开发并在G…

uni app 本地打包apk 教程

前言: 各位同学大家好,最近帮别人打包了一个 uni 的项目编译成apk 所以觉得必要分享下。 上效果图 原始工程 这种uni 原始的工程我们直接 这样我们就可以运行到我们的模拟器或者真机上面去 手动打包 开发环境 Android Studio 下载地址:An

1讲8小时!张宇新36讲怎么学效果最大化?

别怕&#xff01;解决以下问题&#xff0c;就能让学习效果最大化。 1. 理解有难度。 如果你习惯传统教学模式&#xff0c;例如武忠祥老师的强化课&#xff0c;可能会觉得张宇36讲信息量太大&#xff0c;难以在短时间内消化和理解。 这是因为&#xff0c;考研数学教学的一端&a…

一个审计人为什么要辞职去日本做码农??

今天翻阅报道的时候&#xff0c;看到一篇记者采访记录&#xff1a; 文章的题目是&#xff1a;“审计人辞职去日本做码农的心路历程”。由于标题吸引住了我&#xff0c;我就点进去了看看。 被采访的对象&#xff1a;她在国内审计行业工作两年多后&#xff0c;自学编程&#xf…

Cesium--获取当前相机中心与地面的射线焦点

本文记录获取当前相机中心与地面的射线焦点的方法&#xff0c;可用于视角缩放过程中&#xff0c;控制视角自动平滑切换到二维等场景&#xff1a; 方法一定是视角中心能与地面有交集&#xff0c;如果对着地平线或对着天空肯定是没效果的。直接放代码&#xff1a; //调整相机到正…

计算机志愿攻略,高考生的必读

高考结束 又一年高考结束了 1342万学子们寒窗苦读十二载 迈入考场的那一刻 既紧张又兴奋 即使过去很多年 我仍然能回忆起当年的情景 当高考结束的铃声响起 所有的紧张和压力仿佛瞬间释放 走出来的那一刻 不管结果如何 我们都为自己能够勇敢地走过这段旅程而感到骄傲 …

基于Three.js实现三维空间中的箭头移动动画

继上一篇文章中实现了三维管道的可视化和流动模拟,最近需要基于曲面做三维物体的移动动画效果,特别是箭头等指向性物体的移动,因此就编写了以下方案,主要实现了三维空间内箭头等物体的创建和指向调整及动画效果等,具体如下: 1.基于Thee.js实现箭头等物体创建-THREE.Arrow…