Vue2五、自定义指令,全局局部注册、指令的值 ,插槽--默认插槽,具名插槽 ( 作用域插槽)

一、自定义指令

使用步骤

1. 注册 (全局注册 或 局部注册) ,在 inserted 钩子函数中,配置指令dom逻辑
2. 标签上 v-指令名 使用

1、自定义指令(全局)

 Vue.directive("指令名",{   指令的配置项  inserted ()  { }    }

2、自定义指令(局部)

directives: { "指令名": { inserted (  ) {    可以对 el 标签,扩展额外功能 el.focus( )       } } }

3、指令的值

 指令值的语法:

① v-指令名 = "指令值" 可以绑定指令的值 ② 通过 binding.value 拿到指令的值
③ 通过 update 钩子 指令的值被修改的时候自动触发update钩子
参数1:当前加了指令的标签。参数2:获取指令值,binding.value
<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加载中...

核心思路:
(1) 准备类名 loading,通过伪元素提供遮罩层
(2) 添加或移除类名,实现loading蒙层的添加移除
(3) 利用指令语法,封装 v-loading 通用指令
inserted 钩子中, binding.value 判断指令的值, 设置默认状态
update 钩子中, binding.value 判断指令的值, 更新类名状态
<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:具名插槽 

具名插槽语法:

1. 多个slot插槽用name区分。
2. template配合v-slot: 插槽名 (可以简化成 #插槽名 )名字来对应不同的name

3 :插槽 - 作用域插槽

作用域插槽传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用

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

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

相关文章

一次BC站点渗透实录

初探 打开首页 简单信息收集: IP地址&#xff1a;美国加利福尼亚洛杉矶 无CDN 中间件:Nginx 80端口直接突破&#xff0c;故未进行端口扫描 渗透思路 一般这种BC站点&#xff0c;有几种思路可以切入&#xff1a; 1&#xff09;通过SQL注入查到管理员账号密码&#xff0c;扫描…

java 集合对象

Java 基础之集合_java集合继承关系图-CSDN博客 集合可以有序或无序&#xff0c;重复或不能重复&#xff0c;空或不能空。 List<> 集合&#xff0c;是有序&#xff0c;允许重复元素&#xff0c;允许空元素 1、ArrayList<> 非线程安全 2、LInkedList<> 非线…

深入探索 ClickHouse:性能优化之道

在大数据处理的广袤天地里&#xff0c;ClickHouse 宛如一颗璀璨的明星&#xff0c;以其卓越的性能为海量数据的存储与查询提供了强大助力。但要想让 ClickHouse 发挥出极致效能&#xff0c;性能优化至关重要。今天&#xff0c;就让我们一同深入探寻 ClickHouse 的性能优化之路。…

web实操8-cookie

会话技术 会话&#xff1a; 一次会话中包含多次请求和响应。 客户端浏览器访问服务器的资源&#xff0c;只要客户端或者服务器端不关闭&#xff0c;这始终在一次会话范围内&#xff0c;这一次会话范围内可以包含多次请求并且收到多次相应。 一次会话&#xff1a;浏览器第一…

Day50 图论part01

图论理论基础 大家可以在看图论理论基础的时候&#xff0c;很多内容 看不懂&#xff0c;例如也不知道 看完之后 还是不知道 邻接矩阵&#xff0c;邻接表怎么用&#xff0c; 别着急。 理论基础大家先对各个概念有个印象就好&#xff0c;后面在刷题的过程中&#xff0c;每个知识…

VMWare 的克隆操作

零、碎碎念 VMWare 的这个克隆操作很简单&#xff0c;单拎出来成贴的目的是方便后续使用。 一、操作步骤 1.1、在“源”服务器上点右键&#xff0c;选择“管理--克隆” 1.2、选择“虚拟机的当前状态”为基础制作克隆&#xff0c;如下图所示&#xff0c;然后点击“下一页” 1.3、…

JVM性能优化一:初识内存泄露-内存溢出-垃圾回收

本文主要是让你充分的认识到什么叫做内存泄露&#xff0c;什么叫做内存溢出&#xff0c;别再傻傻分不清了&#xff0c;别再动不动的升级服务器的内存了。 文章目录 1.基本概念1.1.内存泄露1.2.内存溢出1.3.垃圾回收1.4.内存泄露-垃圾回收-内存溢出三者的关系关系 2.代码示例2.…

dockfile镜像加速

运行给的终端命令 全覆盖法 {"registry-mirrors": ["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://dockerhub.azk8s.cn","https://mirror.ccs.tencentyun.com","https://registry.cn-han…

【RK3588 Linux 5.x 内核编程】-内核中断与ThreadedIRQ

内核中断与ThreadedIRQ 文章目录 内核中断与ThreadedIRQ1、Threaded IRQ介绍2、Threaded IRQ相关API3、驱动实现4、驱动验证当 Interrupt 触发时,Interrupt handler 应该执行得非常快,它不应该运行更多的时间(它不应该执行耗时的任务)。 如果我们有执行更多任务的中断处理程…

如何正确使用人工智能:开启智慧学习与创新之旅

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;已如影随形地融入我们的学习、工作与生活。从智能学习辅助工具到创意生成引擎&#xff0c;AI 为我们带来了前所未有的便利与机遇。然而&#xff0c;如同任何强大的工具&#xff0c;正确使用人工智能至关重要。本…

数据结构经典算法总复习(下卷)

第五章:树和二叉树 先序遍历二叉树的非递归算法。 void PreOrderTraverse(BiTree T, void (*Visit)(TElemType)) {//表示用于查找的函数的指针Stack S; BiTree p T;InitStack(S);//S模拟工作栈while (p || !StackEmpty(S)) {//S为空且下一个结点为空&#xff0c;意味着结束遍…

Windows系统上创建Flask服务器

为什么需要掌握服务器搭建技能&#xff1f; 掌握服务器搭建技能对于任何需要在线提供服务或平台的个人创意者来说都至关重要。服务器的作用是确保全球任何地方的用户都能顺利访问你的平台。因此&#xff0c;了解如何搭建和维护服务器&#xff0c;不仅能提升平台的稳定性和访问…

SonarQube 概述

**SonarQube ** 1. SonarQube 概述 SonarQube 是一个开源的代码质量管理平台&#xff0c;广泛用于持续检查代码的质量&#xff0c;包括检测代码中的错误、漏洞和不符合最佳实践的代码。SonarQube 可以与 CI/CD 流程结合&#xff0c;自动化地对代码进行静态分析&#xff0c;帮…

SMMU软件指南SMMU编程之全局错误和最小配置

安全之安全(security)博客目录导读 目录 一、全局错误 二、最小配置 一、全局错误 与编程接口相关的全局错误会报告到适当的 SMMU_(*_)GERROR 寄存器&#xff0c;而不是通过基于内存的事件队列。这些错误通常是严重的&#xff0c;例如导致 SMMU 停止向前推进。例如&#xf…

ISP用到的一些名词简介

这里主要记录一下在学习ISP时遇到的一些名词。 图像质量(Picture Quality) 1.锐度&#xff08;Acutance&#xff09; 锐度常用于描述边界处图像信息过渡的快慢。高反差图像过渡速度非常快&#xff0c;可以形成非常明确的边缘&#xff0c;而低反差图像存在一定的过渡缓冲&#…

SqlSugar查询达梦数据库遇到的异常情况(续)

之前的文章提到在SqlSugar的Where函数中使用!string.IsNullOrEmpty函数查询达梦数据库时&#xff0c;明明数据库中有数据但就是查不出来&#xff0c;但相同的代码在另一台电脑上就可以正常返回数据。   以下图中的两张表数据为例&#xff0c;执行下面的SQL语句无法查询到数据…

深度学习试题及答案解析(二)

1. 神经风格转换中&#xff0c;优化算法的每次迭代更新的是什么&#xff1f; 神经风格转换&#xff08;Neural Style Transfer, NST&#xff09;是一种使用深度学习技术&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;来将一幅图像的风格应用到另一幅图…

thinkphp 多选框

视图 <div class"form-group"><label for"c-flag" class"control-label col-xs-12 col-sm-2 col-md-4">{:__(Flag)}</label><div class"col-xs-12 col-sm-8 col-md-8"><!--formatter:off--><select …

Spark优化----Spark 性能调优

目录 常规性能调优 常规性能调优一&#xff1a;最优资源配置 常规性能调优二&#xff1a;RDD 优化 RDD 复用 RDD 持久化 RDD 尽可能早的 filter 操作 常规性能调优三&#xff1a;并行度调节 常规性能调优四&#xff1a;广播大变量 常规性能调优五&#xff1a;Kryo 序列化 常规性…

找数字-T3

小明看到了一个字符串&#xff0c;这个字符串只包含大小写字母和数字&#xff0c;他想把这个字符串里的数字全部找出来。比如“23y4y8Gg48gt001eDGER”&#xff0c;里面的数字就是23,4,8,48,1。注意001要变成1输出。并且保证所有数字不会太大&#xff08;小于1000000&#xff0…