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.mzph.cn/news/108430.shtml

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

相关文章

如何快速定位BUG?BUG定位技巧及测试人员定位的N板斧

很多测试人员可能会说&#xff0c;我的职责就是找到bug&#xff0c;至于找原因并修复&#xff0c;那是开发的事情&#xff0c;关我什么事&#xff1f; 好&#xff0c;我的回答是&#xff0c;如果您只想做一个测试人员最基本最本分的事情&#xff0c;那么可以这么想。但是&#…

微信批量发朋友圈,多个号同步

近年来&#xff0c;随着数字营销的飞速发展&#xff0c;越来越多的企业开始将客户引至微信&#xff0c;并通过群发广告和发布朋友圈等方式进行产品推广&#xff0c;以实现高效率、低成本和良好的转化效果。随着号多起来了&#xff0c;朋友圈推广工作变得愈发繁琐&#xff0c;需…

Vue3 + Nodejs 实战 ,文件上传项目--实现图片上传

目录 技术栈 1. 项目搭建前期工作(不算太详细) 前端 后端 2.配置基本的路由和静态页面 3.完成图片上传的页面&#xff08;imageUp&#xff09; 静态页面搭建 上传图片的接口 js逻辑 4.编写上传图片的接口 5.测试效果 结语 博客主页&#xff1a;専心_前端,javascript,mys…

TiDB 7.4 发版:正式兼容 MySQL 8.0

MySQL 是全球最受欢迎的开源数据库&#xff0c;长期位于 DB-Engines Ranking 排行榜第二名&#xff0c;在世界范围内拥有数量庞大的企业用户和开发者。然而&#xff0c;随着时间的推移&#xff0c;MySQL 用户正面临新挑战。Oracle 官宣将在 2023 年 10 月终止 MySQL 5.7 版本的…

基于Qt HTTP应用程序项目案例

文章目录 主项目入口项目子头文件httpwindow.hhttpwindow.h源文件httpwindow.cppui文件效果演示主项目入口 main函数创建对象空间,确认窗口的大小和坐标。 #include <QApplication> #include <QDir> #include

2023,简历石沉大海?软件测试岗位真的已经饱和了....

各大互联网公司的接连裁员&#xff0c;政策限制的行业接连消失&#xff0c;让今年的求职雪上加霜&#xff0c;想躺平却没有资本&#xff0c;还有人说软件测试岗位饱和了&#xff0c;对此很多求职者深信不疑&#xff0c;因为投出去的简历回复的越来越少了。 另一面企业招人真的…

【halcon】halcon轮廓总结之select_contours_xld

前言 select_contours_xld 我认为是一个非常常用且实用的算子&#xff0c;用于对轮廓进行筛选。 简介 这段文档描述了一个名为"SelectContoursXld"的操作&#xff0c;用于根据不同特征选择XLD&#xff08;XLD是一种图像数据表示形式&#xff0c;表示轮廓线&#x…

竞赛 深度学习+python+opencv实现动物识别 - 图像识别

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 inception_v3网络5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

Golang学习:基础知识篇(二)—— 数组及切片

Golang学习&#xff1a;基础知识篇&#xff08;二&#xff09;—— 数组及切片 前言什么是Golang&#xff1f;Go语言的基础语法数组声明数组初始化数组访问数组知识点补充 切片定义切片切片初始化len() 和 cap() 函数空(nil)切片切片截取append() 和 copy() 函数知识点补充 前言…

ubuntu20.04安装FTP服务

安装 sudo apt-get install vsftpd# 设置开机启动并启动ftp服务 systemctl enable vsftpd systemctl start vsftpd#查看其运行状态 systemctl status vsftpd #重启服务 systemctl restart vsftpdftp用户 sudo useradd -d /home/ftp/ftptest -m ftptest sudo passwd ftptest…

使用 Python 和蒙特卡罗计算未来股价走势以及历史波动率和隐含波动率

一、简介 预测金融市场是定量精度和全球经济细微差别的复杂融合。在这一探索中,蒙特卡罗模拟脱颖而出,成为首要的统计工具,指导我们对未来股票价格的理解。 这种方法以摩纳哥著名的蒙特卡洛赌场命名,并不依靠运气,而是植根于严格的概率模型。想象一下在受控环境中精心策划…

【SA8295P 源码分析 (一)】55 - ifs2_la.img 镜像加载解析过程分析

【SA8295P 源码分析】55 - ifs2_la.img 镜像加载解析过程分析 一、startupmgr 可执行程序分析1. startupmgr\src\script.c 入口 main 函数:调用 init_loader_and_launcher 解析 scripts 数组二、ifsloader镜像加载流程分析:2.1 init_loader_and_launcher() :初始化rlimit rl…

Leetcode 【477. 汉明距离总和】

两个整数的 汉明距离 指的是这两个数字的二进制数对应位不同的数量。 给你一个整数数组 nums&#xff0c;请你计算并返回 nums 中任意两个数之间 汉明距离的总和 。 示例 1&#xff1a; 输入&#xff1a;nums [4,14,2] 输出&#xff1a;6 解释&#xff1a;在二进制表示中&am…

vue3后台管理框架之技术栈

vue3全家桶技术 基础构建&#xff1a; vue3vite4TypeScript 代码格式 &#xff1a; eslintprettystylelint git生命周期钩子&#xff1a; husky css预处理器&#xff1a; sass ui库&#xff1a; element-plus 模拟数据: mock 网络请求&#xff1a; axios 路由&#xff1a; vue…

SAP MM学习笔记37 - 请求书照合中的 追加请求/追加Credit 等概念/ 请求书的取消

有关请求书照合&#xff0c;之前学习了一部分&#xff0c;现在再来学其中的一些概念。 其实这些概念也许并不常用&#xff0c;但是你又不能不知道&#xff0c;因为客户会问。 有关请求书&#xff0c;贴一些以前学习的文章&#xff0c;以方便阅读。 SAP MM学习笔记33 - 请求书…

38.迪杰斯特拉(Dijkstra)算法

概述 我们在上一篇中面对修路的问题讲述了普利姆算法的实现方式&#xff0c;本篇我们参照迪杰斯特拉算法来对修路问题做进一步拆解。 我们回顾一下之前的问题&#xff1a; “要想富&#xff0c;先修路”&#xff0c;郝乡长最近为了德胜乡修路的事情愁白了头。 得胜乡有A、B、C…

力扣--第三大的数

给你一个非空数组&#xff0c;返回此数组中 第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&#xff1a;[3, 2, 1] 输出&#xff1a;1 解释&#xff1a;第三大的数是 1 。 示例 2&#xff1a; 输入&#xff1a;[1, 2] 输出&#xff1…

[USACO11MAR] Brownie Slicing G题解(二分+二维前缀和+矩阵分割)

[USACO11MAR] Brownie Slicing G 题目地址 P3017 [USACO11MAR] Brownie Slicing G 思路 二分最大化最小值 切割思路&#xff1a; 一行一行进行切割&#xff0c;如果这一行可以切割出b块大于等于mid的块&#xff0c;就开始切割下一行 如果无法切割出b块&#xff0c;就把正在…

构造函数和原型

构造函数和原型 目录 构造函数和原型 1.构造函数和原型 1.1对象的三种创建方式--复习 1.2静态成员和实例成员 1.2.1实例成员 1.2.2静态成员 1.3构造函数的问题 1.4构造函数原型prototype 1.5对象原型 1.6constructor构造函数 1.7原型链 1.8构造函数实例和原型对象…

《3D 数学基础》几何检测-最近点

目录 1. 直线上的最近点 2. 射线上的最近点 3. 点到平面的距离 4. 圆或球上的最近点 5. AABB上的最近点 1. 直线上的最近点 q是距离q的最近点&#xff0c;也就是q在直线上的投影。 其中p是直线上的点&#xff08;向量表示&#xff09;&#xff0c;n是直线的法向量&#x…