Vue2到3 Day5 全套学习内容，众多案例上手（内付源码）

简介：

Vue2到3 Day1-3 全套学习内容，众多案例上手（内付源码）_星辰大海1412的博客-CSDN博客本文是一篇入门级的Vue.js介绍文章，旨在帮助读者了解Vue.js框架的基本概念和核心功能。Vue.js是一款流行的JavaScript前端框架，被广泛用于构建现代、响应式的Web应用。通过深入浅出的方式，文章将介绍Vue.js的基本概念，如组件、指令、双向数据绑定等，并演示如何使用Vue.js开发一个简单的示例应用。无论您是初学者还是有经验的前端开发者，本文都将为您提供一个良好的起点，让您能够迅速上手并充分利用Vue.js的强大功能https://blog.csdn.net/m0_61662775/article/details/131949855?spm=1001.2014.3001.5501
Vue2到3 Day4 全套学习内容，众多案例上手（内付源码）_星辰大海1412的博客-CSDN博客通过这篇文章了解Vue的响应式数据机制，以及如何使用data属性来实现数据驱动的界面更新。学习如何使用计算属性、侦听器等处理数据逻辑。https://blog.csdn.net/m0_61662775/article/details/132221004?spm=1001.2014.3001.5501

接下里的学习内容如下： 

吾生也有涯，而知也无涯。学无止境，然犹需沉潜。兢兢业业，方能于浩瀚知识的汪洋中，稍觉安宁。加油！

一、自定义指令

1.指令介绍：

  • 内置指令：v-html、v-if、v-bind、v-on... 这都是Vue内置的一些指令，可以直接使用

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

    每个指令都有自己各自独立的功能

2.自定义指令：

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

📜示例：

需求: 当页面加载时，让元素将获得焦点

（autofocus 在 safari 浏览器有兼容性）

操作dom:  dom元素.focus()

mounted () {this.$refs.inp.focus()
}

3.自定义指令语法

1️⃣全局注册-语法：

//在main.js中
Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()}
})

 2️⃣局部注册-语法：

//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}}
}

  • 使用指令

    ⭕注意：在使用指令的时候，一定要先注册，再使用，否则会报错
    使用指令语法： v-指令名。如：

    <input v-指令名 type="text">

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

 

 代码示例：

//main.js 文件import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// // 1. 全局注册指令
// Vue.directive('focus', {
//   // inserted 会在 指令所在的元素，被插入到页面中时触发
//   inserted (el) {
//     // el 就是指令所绑定的元素
//     // console.log(el);
//     el.focus()
//   }
// })new Vue({render: h => h(App),
}).$mount('#app')

<template><div><h1>自定义指令</h1><input v-focus ref="inp" type="text"></div>
</template><script>
export default {// mounted () {//   this.$refs.inp.focus()// }// 2. 局部注册指令directives: {// 指令名：指令的配置项focus: {inserted (el) {el.focus()}}}
}
</script><style></style>

4.指令中的配置项介绍：

inserted:被绑定元素插入父节点时调用的钩子函数

el：使用指令的那个DOM元素

 

5.代码示例：

需求：当页面加载时，让元素获取焦点（autofocus在safari浏览器有兼容性）

6.总结：

1.自定义指令的作用是什么？

2.使用自定义指令的步骤是哪两步？

自定义指令-指令的值 

 

 

1.需求：

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

 

 

2.语法：

①在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<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}}
}

3.代码示例：

<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) {// console.log(el, binding.value);// binding.value 就是指令的值el.style.color = binding.value},// 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑update (el, binding) {console.log('指令的值修改了');el.style.color = binding.value}}}
}
</script><style></style>

4.📜总结：

1.通过指令的值相关语法，可以应对更复杂指令封装场景
2.指令值的语法：

① v-指令名 ="指令值"，通过 等号 可以绑定指令的值

② 通过 binding.value 可以拿到指令的值

③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作

 

 

自定义指令 - v-loading 指令的封装

 

1.场景：

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

2.需求：

封装一个 v-loading 指令，实现加载中的效果

 

3.分析：

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

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

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

4.实现：

1.准备一个 loading类，通过伪元素定位，设置宽高，实现蒙层

2.开启关闭 loading状态（添加移除蒙层），本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

.loading:before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url("./loading.gif") no-repeat center;
}

5.代码示例：

<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'// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
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.通过指令相关语法，封装了指令 v-loading 实现了请求的 loading 效果
2.核心思路:
(1)准备类名 loading，通过伪元素提供遮罩层
(2)添加或移除类名，实现loading蒙层的添加移除
(3)利用指令语法，封装 v-loading 通用指令

  • inserted 钩子中，binding.value 判断指令的值，设置默认状态
  • update 钩子中，binding.value 判断指令的值，更新类名状态

 

二、①插槽-默认插槽

 

1.作用：

让组件内部的一些 结构 支持 自定义

 

2.需求：

将需要多次显示的对话框,封装成一个组件

3.问题：

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办？？

 

4.插槽的基本语法：

  1. 组件内需要定制的结构部分，改用<slot></slot>占位
  2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot
  3. 给插槽传入内容时，可以传入纯文本、HTML标签、组件

 

5.代码示例：

MyDialog.vue

 

<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><script>
export default {data () {return {}}
}
</script><style scoped>
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>

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><style>
body {background-color: #b3b3b3;
}
</style>

📜总结：

场景：组件内某一部分结构不确定，想要自定义怎么办

使用：插槽的步骤分为哪几步？

场景:  当组件内某一部分结构不确定，想要自定义怎么办?
        用插槽 slot占位封装
使用:  插槽使用的基本步骤?
1.先在组件内用 slot占位
2.使用组件时，传入具体标签内容插入

 

②插槽-后备内容（默认值）

 

1.问题：

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白

 

能否给插槽设置 默认显示内容 呢？

2.插槽的后备内容：

封装组件时，可以为预留的`<slot>` 插槽提供后备内容（默认内容）。

3.语法：

在<slot> </slot> 标签内，放置内容, 作为默认显示内容

4.效果：

 

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

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

相关文章

类与对象(加深)

类与对象(加深)

目录 1.类的6个默认成员函数 2. 构造函数 2.1 概念 2.2 特性 3.析构函数 3.1 概念 3.2 特性 4. 拷贝构造函数 4.1 概念 4.2 特征 5.赋值运算符重载 5.1 运算符重载 5.2 赋值运算符重载 6.const成员 7.取地址及const取地址操作符重载 1.类的6个默认成员函数 如果…
阅读更多...
Mysql 和Oracle的区别

Mysql 和Oracle的区别

、mysql与oracle都是关系型数据库&#xff0c;Oracle是大型数据库&#xff0c;而MySQL是中小型数据库。但是MySQL是开源的&#xff0c;但是Oracle是收费的&#xff0c;而且比较贵。 1 2 mysql默认端口&#xff1a;3306&#xff0c;默认用户&#xff1a;root oracle默认端口&…
阅读更多...
shell脚本开发

shell脚本开发

shell脚本语言属于弱类型的语言&#xff0c;无需声明变量类型&#xff0c;直接定义使用 shell语言定义的变量&#xff0c;数据类型默认都是字符串类型 调用历史记录命令&#xff1a;&#xff01; 历史记录id
阅读更多...
vue3+vue-simple-uploader实现大文件上传

vue3+vue-simple-uploader实现大文件上传

vue-simple-uploader本身是基于vue2实现，如果要使用vue3会报错。如何在vue3中使用，可参考我的另一篇文章：解决vue3中不能使用vue-simple-uploader__Jyann_的博客-CSDN博客 一.实现思路 使用vue-simple-uploader组件的uploader组件，设置自动上传为false，即可开启手动上传。…
阅读更多...
netty基础与原理

netty基础与原理

Netty线程模型和Reactor模式 简介&#xff1a;reactor模式 和 Netty线程模型 设计模式——Reactor模式&#xff08;反应器设计模式&#xff09;&#xff0c;是一种基于 事件驱动的设计模式&#xff0c;在事件驱动的应用中&#xff0c;将一个或多个客户的 服务请求分离&#x…
阅读更多...
【ARM Cache 系列文章 9 -- ARM big.LITTLE技术】

【ARM Cache 系列文章 9 -- ARM big.LITTLE技术】

文章目录 big.LITTLE 技术背景big.LITTLE 技术详解big.LITTLE 硬件要求 big.LITTLE 软件模型CPU MigrationGlobal Task SchedulingGlobal Task Scheduling比CPU Migration的优势 转自&#xff1a;https://zhuanlan.zhihu.com/p/630981648 如有侵权&#xff0c;请联系删除 big.L…
阅读更多...
Leetcode 21. 合并两个有序链表

Leetcode 21. 合并两个有序链表

题目描述 题目链接&#xff1a;https://leetcode.cn/problems/merge-two-sorted-lists/description/ 思路 两个链表都是升序链表&#xff0c;新建一个链表&#xff0c;引入伪头节点作为辅助节点&#xff0c;将各节点添加到伪节点之后&#xff0c;再用一个cur节点指向新链表的…
阅读更多...
2022年03月 C/C++（一级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年03月 C/C++（一级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题：双精度浮点数的输入输出 输入一个双精度浮点数，保留8位小数，输出这个浮点数。 时间限制：1000 内存限制：65536 输入 只有一行，一个双精度浮点数。 输出 一行，保留8位小数的浮点数。 样例输入 3.1415926535798932 样例输出 3.14159265 下面是一个使用C语言编写的双精…
阅读更多...
51单片机学习--红外遥控（外部中断）

51单片机学习--红外遥控（外部中断）

需要利用下面这个红外接收头&#xff0c;OUT口会发出红外信号对应的高低电平&#xff0c;由于发送的速度很快&#xff0c;所以需要把OUT引脚接在外部中断引脚上&#xff0c;当OUT一旦产生下降沿&#xff0c;马上进中断&#xff0c;这样响应会更及时。 外部中断引脚位于P3_2和P…
阅读更多...
全球八分之一的河流受到缺氧影响

全球八分之一的河流受到缺氧影响

一项全球研究发现&#xff0c;世界各地河流中的溶解氧含量低得危险。缺氧的真实发生率可能更高。 小型、低梯度的城市河流&#xff0c;例如图中北卡罗来纳州的那条河流&#xff0c;是最容易缺氧的河流之一。图片来源&#xff1a;乔安娜布拉扎克 2023 年 3 月&#xff0c;《卫报…
阅读更多...
学生管理系统（Python版本）

学生管理系统（Python版本）

class Student:def __init__(self, id, name, age):self.id idself.name nameself.age ageclass StudentManagementSystem:def __init__(self):self.students []def add_student(self, student):self.students.append(student)print("学生信息添加成功&#xff01;&qu…
阅读更多...
大脑营行｜“福安市华龙教育基金”支持家乡教育事业发展

大脑营行｜“福安市华龙教育基金”支持家乡教育事业发展

8月8日&#xff0c;福安市松罗中学举行“福安市华龙教育基金”中考奖学金颁发仪式。福安市松罗乡党委书记钟文、乡长郑仁寿、福安市人民政府教育督导室副科级督导员&#xff08;片区领导&#xff09;陈秦、校长张明亮、各村支部书记、家长代表、受奖学生&#xff0c;校领导班子…
阅读更多...
UG NX二次开发（C#）-采用PK函数与NXOpen的效率对比

UG NX二次开发（C#）-采用PK函数与NXOpen的效率对比

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 1、前言2、创建一个测试项目2.1 创建工程2.2 添加引用2.3 添加PK函数代码2.4 添加NXOpen.net的代码2.5 在mn函数中调用这两个方法2.6 生成dll3、测试代码3.1 在UG NX11.0中创建一个part3.2 调用tes…
阅读更多...
vue中$bus全局事件总线

vue中$bus全局事件总线

1.介绍 说明&#xff1a;Vue中&#xff0c;$bus 指的通常是一个全局事件总线&#xff0c;它是一种用于在不同组件之间进行通信的模式。它允许你在一个组件中发出事件&#xff0c;而其他组件可以监听并响应这些事件。 2.main.js 说明&#xff1a;为什么在beforeCreate钩子函数…
阅读更多...
@RequestHeader使用

@RequestHeader使用

RequestHeader 请求头参数的设置 GetMapping("paramTest/requestHeader")public String requestHeaderTest(RequestHeader("name") String name){return name;} 在Postman的Headers中添加请求头参数&#xff0c;不过貌似不能加中文
阅读更多...
实现两个列表对应数值相乘、相除、相加等

实现两个列表对应数值相乘、相除、相加等

实现两个列表对应数值相乘、相除、相加等 利用循环实现两个列表相乘使用zip()方法在Python中实现两个列表相乘使用numpy.multiply()方法在Python中实现两个列表相乘使用map()函数在Python中实现两个列表相乘1、利用循环实现两个列表相乘 for循环遍历两个列表元素&#xff0c;…
阅读更多...
基于FPGA的PID算法理论详解（1）

基于FPGA的PID算法理论详解（1）

基于FPGA的PID算法理论详解（1） 1 概述 比例-积分-微分（PID）控制是业内最常见的控制算法，在工业控制领域有很高的接受度。PID控制器的广泛应用得益于其在多种操作条件下稳定的性能，以及易操作的特性。工程师可以用简单直观的方式实现PID控制。PID控制有三个基本要件：比…
阅读更多...
百川智能发布首个530亿参数闭源大模型，今年追上GPT-3.5

百川智能发布首个530亿参数闭源大模型，今年追上GPT-3.5

4月官宣创业&#xff0c;6月15日发布第一款7B开源模型&#xff0c;7月11日发布第二款13B、130亿参数开源模型。 平均保持2个月一个版本发布速度&#xff0c;8月8日&#xff0c;百川智能发布了创业以来的首个530亿参数闭源大模型——Baichuan-53B&#xff08;以下简称“53B”&a…
阅读更多...
LeetCode 热题 100 JavaScript -- 74. 搜索二维矩阵

LeetCode 热题 100 JavaScript -- 74. 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非递减顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 …
阅读更多...
无涯教程-Perl - glob函数

无涯教程-Perl - glob函数

描述 此函数返回与EXPR匹配的文件的列表,这些文件将由标准Bourne shell进行扩展。如果EXPR未指定路径,请使用当前目录。如果省略EXPR,则使用$_的值。 从Perl 5.6开始,扩展是在内部完成的,而不是使用外部脚本。扩展遵循csh(以及任何派生形式,包括tcsh和bash)的扩展方式,其翻译…
阅读更多...
最新文章

Copyright @ 2022~2023