vue重修【005】自定义路由、插槽

文章目录

  • 版权声明
  • 自定义指令
    • 指令初识
    • 指令中配置项
    • 指令语法
    • 指令值
    • v-loading指令的封装
      • 分析
      • 实现
  • 插槽
    • 默认插槽
    • 插槽默认值
    • 具名插槽
    • 作用域插槽
      • 使用步骤
      • 完整案例

版权声明

  • 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明,所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用,并非商业用途。
  • 我在整理学习笔记的过程中尽力确保准确性,但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。
  • 若您是黑马程序员或相关权利人,如有任何侵犯版权的地方,请您及时联系我,我将立即予以删除或进行必要的修改。
  • 对于其他读者,请在阅读本博客内容时保持遵守相关法律法规和道德准则,谨慎参考,并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人,不代表黑马程序员的立场。

自定义指令

指令初识

  • 内置指令:v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令,可以直接使用

  • 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令

在这里插入图片描述

指令中配置项

  • inserted:被绑定元素插入父节点时调用的钩子函数
  • el:使用指令的那个DOM元素

指令语法

  • 全局注册
//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签,扩展额外功能el.focus()}
})
  • 局部注册
//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签,扩展额外功能el.focus()}}
}

在这里插入图片描述

  • 注意:在使用指令的时候,一定要先注册再使用,否则会报错

  • 使用指令语法: v-指令名。如:<input type="text" v-focus/>

    注册指令时不用v-前缀,但使用时一定要加v-前缀

指令值

  1. 需求
  • 实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
  1. 语法
  • 在绑定指令时,可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>
  • 通过 binding.value 可以拿到指令值,指令值修改会 触发 update 函数
directives: {color: {inserted (el, binding) {el.style.color = binding.value},update (el, binding) {el.style.color = binding.value}}
}

  • 示例
<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data () {return {color1: 'red',color2: 'orange'}},directives: {color: {// 1. inserted 提供的是元素被添加到页面中时的逻辑inserted (el, binding) {el.style.color = binding.value},// 2. update 指令的值修改的时候触发,提供值变化后,dom更新的逻辑update (el, binding) {console.log('指令的值修改了');el.style.color = binding.value}}}
}
</script>

v-loading指令的封装

  • 实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态 => 用户体验不好
  • 需求:封装一个 v-loading 指令,实现加载中的效果

分析

  1. 本质 loading效果就是一个蒙层,盖在了盒子上

  2. 数据请求中,开启loading状态,添加蒙层

  3. 数据请求完毕,关闭loading状态,移除蒙层

实现

  1. 准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层
    .loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
    }
    
  2. 开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可
    • inserted 钩子中,binding.value 判断指令的值,设置默认状态
    • update 钩子中,binding.value 判断指令的值,更新类名状态
data () {return {list: [],isLoading: true,isLoading2: true}}
  1. 结合自定义指令的语法进行封装复用
<template><div class="main"><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><div class="box2" v-loading="isLoading2"></div></div>
</template><script>
// 安装axios =>  yarn add axios
import axios from 'axios'export default {data () {return {list: [],isLoading: true,isLoading2: true}},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)},directives: {loading: {inserted (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.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>

插槽

默认插槽

  1. 作用:让组件内部的一些 结构 支持 自定义

在这里插入图片描述

  1. 插槽的基本语法
    1. 组件内需要定制的结构部分,改用<slot></slot>占位
    2. 使用组件时, ****标签内部, 传入结构替换slot
    3. 给插槽传入内容时,可以传入纯文本、html标签、组件
      在这里插入图片描述
  • 插槽组件
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><!-- 1. 在需要定制的位置,使用slot占位 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>
  • App.vue
<template><div><!-- 2. 在使用组件时,组件标签内填入内容 --><MyDialog><div>你确认要删除么</div></MyDialog><MyDialog><p>你确认要退出么</p></MyDialog></div>
</template><script>
import MyDialog from './components/MyDialog.vue'
export default {data () {return {}},components: {MyDialog}
}
</script>

插槽默认值

  • 通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白
    在这里插入图片描述
    在这里插入图片描述

具名插槽

  • 默认插槽:一个的定制位置。如果一个组件内有多处结构,需要外部传入标签,进行定制

  • 具名插槽语法
    • 多个slot使用name属性区分名字
      在这里插入图片描述
    • template配合v-slot:名字来分发对应标签
      在这里插入图片描述
  • v-slot的简写:v-slot写起来太长,vue给我们提供一个简单写法 v-slot —> #
    <template #footer><button>取消</button><button>确认</button></template>

作用域插槽

  • 插槽只有两种——默认插槽&具名插槽,作用域插槽不属于插槽的一种分类。
  • 作用域插槽:定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用
  • 场景:封装表格组件
    在这里插入图片描述

使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>
    
  2. 所有添加的属性, 都会被收集到一个对象中

    { id: 3, msg: '测试文本' }
    
  3. 在template中, 通过 #插槽名= "obj" 接收,默认插槽名为 default

    <MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template>
    </MyTable>
    

完整案例

  • MyTable.vue
<template><table ><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><!-- 1. 给slot标签,添加属性的方式传值 --><slot :row="item" msg="测试文本"></slot></td></tr></tbody></table>
</template><script>
export default {props: {data: Array}
}
</script>
  • App.vue
<template><div><MyTable :data="list"><!-- 3. 通过template #插槽名="变量名" 接收 --><template #default="obj"><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><template #default="{ row }"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'
export default {data () {return {list: [{ id: 1, name: '张小花', age: 18 },{ id: 2, name: '孙大明', age: 19 },{ id: 3, name: '刘德忠', age: 17 },],list2: [{ id: 1, name: '赵小云', age: 18 },{ id: 2, name: '刘蓓蓓', age: 19 },{ id: 3, name: '姜肖泰', age: 17 },]}},methods: {del (id) {this.list = this.list.filter(item => item.id !== id)},show (row) {alert(`姓名:${row.name}; 年纪:${row.age}`)}},components: {MyTable}
}
</script>

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

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

相关文章

【系统与工具】系统环境——VMware安装系统

文章目录 0.1 安装VMware0.2 下载ubuntu镜像0.3 创建系统实例0.4 安装ubuntu0.5 实例配置项0.5.1 安装VMware tools0.5.2 修改静态IP0.5.3 ssh连接 0.6 克隆0.6.1 克隆实例生成MAC地址 0.6.2 修改静态ip0.6.3 修改主机密码名称 参考&#xff1a;https://blog.csdn.net/m0_51913…

Lua快速入门教程

文章目录 1、Linux安装Lua2、语法练习2.1、变量2.2、循环2.3、函数2.4、数组2.5、迭代器2.6、Table操作2.7、Lua 模块与包2.8、加载机制2.9、Lua 元表(Metatable) 3、Lua 协同程序(coroutine)4、文件IO操作4.1、简单模式4.2、完全模式 5、错误处理 内容来源菜鸟教程&#xff0c…

GO 语言的方法??

GO 中的方法是什么&#xff1f; 前面我们有分享到 GO 语言的函数&#xff0c;他是一等公民&#xff0c;那么 GO 语言中的方法和函数有什么区别呢&#xff1f; GO 语言中的方法实际上和函数是类似的&#xff0c;只不过在函数的基础上多了一个参数&#xff0c;这个参数在 GO 语…

AAOS CarMediaService 服务框架

文章目录 前言MediaSessionCarMediaService作用是什么&#xff1f;提供了哪些接口&#xff1f;如何使用&#xff1f;CarMediaService的实现总结 前言 CarMediaService 是AAOS中统一管理媒体播放控制、信息显示和用户交互等功能的服务。这一服务依赖于android MediaSession框架…

Redis入门到实战(四、原理篇)RESP协议

目录 2、Redis内存回收-过期key处理3、Redis内存回收-内存淘汰策略 Redis是一个CS架构的软件&#xff0c;通信一般分两步&#xff08;不包括pipeline和PubSub&#xff09;&#xff1a; 客户端&#xff08;client&#xff09;向服务端&#xff08;server&#xff09;发送一条命令…

linux常见命令-文件目录类

9.4 文件目录类 &#xff08;1&#xff09;pwd 指令:显示当前工作目录的绝对路径 &#xff08;2&#xff09;Is指令:查看当前目录的所有内容信息 基本语法&#xff1a; ls [选项,可选多个] [目录或是文件] 常用选项:-a:显示当前目录所有的文件和目录&#xff0c;包括隐藏的…

ES6 Symbol 数据结构

1. Symbol概念以及引入原因 ES6 引入了的一种新的原始数据类型Symbol&#xff0c;表示独一无二的值。它是 JavaScript 语言的第七种数据类型&#xff0c;前六种是&#xff1a;undefined、null、布尔值&#xff08;Boolean&#xff09;、字符串&#xff08;String&#xff09;、…

Stanford CS224N - word2vec

最近在听Stanford放出来的Stanford CS224N NLP with Deep Learning这门课&#xff0c;弥补一下之前nlp这块基础知识的一些不清楚的地方&#xff0c;顺便巩固一下基础知识&#x1f601; 关于word2vec&#xff1a; 1.为什么要把单词表示成向量 一开始人们造了一个类似于词典表…

Squeeze-and-Attention Networks for Semantic Segmentation

0.摘要 最近&#xff0c;将注意力机制整合到分割网络中可以通过更重视提供更多信息的特征来提高它们的表征能力。然而&#xff0c;这些注意力机制忽视了语义分割的一个隐含子任务&#xff0c;并受到卷积核的网格结构的限制。在本文中&#xff0c;我们提出了一种新颖的squeeze-a…

Linux不间断会话服务

9.2.3远程传输命令 家里有2台电脑&#xff0c;一台是ubuntu虚拟机&#xff0c;另一台是rhel8虚拟机器&#xff0c;两台虚拟机都是通过桥接的方式&#xff08;桥接方式就是虚拟机直接和路由器连接&#xff09;上网。然后现在用ubuntu来使用sshd服务登录rhel8系统。 用ip addr命…

Arcgis聚合工具——实现简单的升尺度

找到Aggregate工具 按如下设置进行操作 注意&#xff1a;如有需要对应的低分辨率影像&#xff0c;必须点开右下角环境Environments选项&#xff0c;进行栅格的捕捉选项设置&#xff0c;以防止升尺度后的影像与需对应的低分辨率影像的栅格单元存在偏移。 点击OK&#xff0c;即可…

算法--排序算法效率比较

《算法设计与分析》课程实验报告 &#xff08; 实验一&#xff09; 实验名称&#xff1a;排序算法效率比较 实验地点&#xff1a; 所使用的开发工具及环境&#xff1a; PC机&#xff0c;DEV 一、实验目的&#xff1a; 比较至少 4 种排序&#xff08;从小到大排&#xff09…

大数据Flink(九十七):EXPLAIN、USE和SHOW 子句

文章目录 EXPLAIN、USE和SHOW 子句 一、EXPLAIN 子句 二、USE 子句

Ruby和面向对象技术

Ruby和许多极为流行的编程语言都是面向对象的。多数的面向对象编程语言&#xff0c;每个对象都是一个样例或者既定类的实例以及独立对象的行为。 一、创建一个通用对象 创建一个通用对象 obj Object.new定义通用对象的行为 def obj.talk puts "I am an object"p…

VMware——VMware17安装WindowServer2012R2环境(图解版)

目录 一、WindowServer2012R2镜像百度云下载二、安装 一、WindowServer2012R2镜像百度云下载 下载链接&#xff1a;https://pan.baidu.com/s/1TWnSRJTk0ruGNn4YinzIgA 提取码&#xff1a;e7u0 二、安装 打开虚拟机&#xff0c;点击【创建新的虚拟机】&#xff0c;如下图&…

直接插入排序

排序——先写单个——再衍生到整体 单个插入排序——在插入前数组里面的数是有序的&#xff0c;然后来了一个数据&#xff0c;就要用这个数组从后往前和这个数比较&#xff0c; 整体的话就是&#xff0c;end从0开始&#xff0c;循环n-1次 void TnsertSort(int* a,int n) {in…

SpringCloud: sentinel链路限流

一、配置文件要增加 spring.cloud.sentinel.webContextUnify: false二、在要限流的业务方法上使用SentinelResource注解 package cn.edu.tju.service;import com.alibaba.csp.sentinel.annotation.SentinelResource; import com.alibaba.csp.sentinel.slots.block.BlockExcept…

【Python】文件操作

一、文件的编码 思考:计算机只能识别:0和1&#xff0c;那么我们丰富的文本文件是如何被计算机识别&#xff0c;并存储在硬盘中呢? 答案:使用编码技术( 密码本)将内容翻译成0和1存入 编码技术即:翻译的规则&#xff0c;记录了如何将内容翻译成二进制&#xff0c;以及如何将二…

nginx平滑升级添加echo模块、localtion配置、rewrite配置

nginx平滑升级添加echo模块、location配置、rewrite配置 文章目录 nginx平滑升级添加echo模块、location配置、rewrite配置1.环境说明&#xff1a;2.nginx平滑升级原理&#xff1a;3.平滑升级nginx&#xff0c;并添加echo模块3.1.查看当前nginx版本以及老版本编译参数信息3.2.下…

【MyBatis】MyBatis日志信息配置

目录 什么是MyBatis相关的日志&#xff1f; 标准日志信息配置&#xff1a; 配置logback日志信息&#xff1a; 什么是MyBatis相关的日志&#xff1f; 首先什么叫做与MyBatis相关的日志呢&#xff1f;就是我们在执行sql语句的时候&#xff0c;如果没有MyBatis相关的日志&…