- 博客(91)
- 收藏
- 关注
RSS订阅原创 Vue3_2024_9天【vue3中初次使用ts】
TypeScript（简称TS）是微软开发的一种自由和开源的编程语言，它是JavaScript的一个超集，通过添加静态类型定义等特性来扩展JavaScript的语法。TypeScript的主要目的是解决JavaScript的“痛点”，如弱类型和缺乏命名空间导致的模块化难题。它引入了JavaScript中没有的“类”和“模块”的概念，允许开发者将声明、数据、函数和类封装在模块中。此外，TypeScript的类型安全功能能在编码期间检测错误，为开发人员提供了一个更高效的编码和调试过程。
2024-04-06 12:22:12
685
原创 Vue3_2024_8天【vue2中的标签ref和vue3中的标签ref的区别】
和vue2一样，可以用来给标签或组件打标记，不一样的是：*用在标签上，获取的是dom节点 *用在组件上，获取的是组件实例（要想获取节点，需要使用defineExpose转换一下，现比vue2中使用稍微麻烦一点）在上面的示例中，ref=“myDiv” 被添加到了一个 div 元素上。ref放标签上：在标签上使用 ref，你可以通过引用直接访问该 DOM 元素。ref放组件上 : 在组件上使用 ref对于组件，使用 ref 可以让你获取子组件的实例，从而能够调用其方法或访问其属性。第二：Vue3中的ref。
2024-04-05 09:54:57
355
原创 Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续
2.watchEffect【相对于使用watch，watchEffect默认页面初始加载，有点类似加配置：立即执行 immediate】1.watch【使用上一章写法，监听两个属性，然后执行相应操作…
2024-04-04 06:58:24
283
原创 Vue3_2024_7天【回顾上篇watch常见的后两种场景】
例如：watch(参数1：箭头函数，参数2：监听变化箭头函数)例如：watch(参数1：箭头函数，参数2：监听变化箭头函数，参数3：监听配置对象{deep：true})
2024-04-02 22:31:11
289
原创 Vue3_2024_6天【回顾上篇watch常见的前三种场景】另两种待补
1.引入watch2.格式：watch（基本数据类型数据，监视变化的回调函数）注意点：2.1.watch里面第一个参数，是数据~~【监视的基本类型变量名】，不需要.value，（前面说过，ref定义的数据，使用都需要.value,当这里使用数据，不是值！2.2.watch里面第二个参数，是回调函数，因为setup中没有this，所以这里回调函数使用箭头函数；3.代码举例：watch(console.log ( '数据变化了',newValue,oldValue);1.引入watch。
2024-03-07 21:58:39
841
原创 Vue3_2024_5天【vue2（3种）和vue3（5种）中watch的使用场景】watch、computed
watch概念：允许你在数据变化时执行特定的逻辑（方法），从而实现更复杂的数据处理和业务逻辑。
2024-03-05 23:28:26
646
原创 Vue3_2024_4天【computer、watch、method在Vue2~3中的说明】未完待补
1.概念： 计算属性是基于响应式依赖进行缓存的属性，只有在相关依赖发生改变时才会重新求值。它们类似于具有缓存的函数。2.使用场景： 适用于依赖于其他数据或状态的属性，例如：购物车的结算计算价格、动态表格数据-表头和表体关系处理显示问题，（还例如：数据进行过滤、排序或计算衍生值等场景）。语法： 在Vue实例中使用computed对象定义计算属性，并以函数的形式返回计算结果。
2024-03-04 23:27:49
665
原创 Vue3_2024_3天【Vue3组合式API~响应式及toRefs】
（注意：ref在template可直接使用属性值，在js逻辑层面需要.value去拿，并且console打印被包裹类型为，，，ref(value:‘…’)）注：若怕使用rer包裹获取值，忘记.value，也可以使用volar插件自动添加.value（vscode插件），好处：系统帮你判断，帮你加上，同时自己别太依赖，自己要知道！将属性、方法、计算属性、监听器（统称-组合式api）都写到setup中，，现比在vue2中直接使用原生setup函数，语法糖避免将属性、方法。【前面文章说过了，省略】
2024-03-03 22:36:16
301
原创 Vue3_2024_2天【Vue3组合式setup用法及响应式ref和reactive】
5 vue3的组合式api，也就是setup函数，特点如下：*可将属性定义、方法、计算属性、监听器都写在这一个函数内，将需要在template中要使用的，进行return出去，如：return {a,b,getInfon,deletePeo}【这一种了解许可（避免他人写你能看懂），是setup最原始写法，不推荐使用，后续使用基于–语法糖setup写法】没错，这里有疑问了，明明setup内部没有this，这里如何使用，其实也很好理解，4.（正如之前说过的，vue3兼容vue2代码，但尽量别混合写），
2024-03-02 19:00:59
437
原创 Vue3_2024_1天【Vue3创建和响应式，对比Vue2】
Vue3对比Vue2版本，它在性能、功能、易用性和可维护性方面都有显著的提升和改进。性能优化：模板编译器的优化、对Proxy的支持以及使用了更加高效的Virtual DOM算法等。这使得Vue3的打包大小减少了41%，初次渲染提速55%，更新渲染提速133%，内存减少54%，比Vue2更快将近两倍。源码升级：Vue3使用Proxy代替defineProperty实现响应式，重写了虚拟DOM的实现和采用了Tree-Shaking技术，从而帮助减小了包的大小。
2024-03-01 20:38:52
930
原创 Vue初步使用_01(概念、脚手架搭建项目、对比vue2.0)
因为vue3技术的成熟，官网已经开始默认使用3的版本了，而vue2.0开始不维护了，所以让我们开始学习之路吧，，，
2023-06-14 06:47:27
141
原创 MySql Workbench图形化工具导入sql文件
从上述的描述，我们可以知道workbench图形化工具和我之前使用的Navicat功能大致差不多，两者区别就是前者是MySQL官网推出的（另：整体页面看起来比较旧），后者你懂的（另：页面相对前面的还是比较好的），MySQL Workbench是为MySQL设计的ER/数据库建模工具。是著名的数据库设计工具DBDesigner4的继任者。具有设计和创建新的数据库图示，建立数据库文档，以及进行复杂的MySQL 迁移的作用。【操作步骤：file – open sql soript】选择需要导入的sql文件。
2023-04-27 16:43:25
1204
2
原创 Window系统下安裝Redis非关系型数据库
redis-server : 无法将“redis-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径 ，请确保路径正确，然后再试一次。成功指令： redis-server.exe redis.windows.conf。前言：因为官网上只有Linux能安裝的包，本地需要安裝redis数据库，则需要去。百度找方法有人说没有配置环境变量，抱着尝试手动配置了，推荐使用zip格式下载。
2023-04-26 18:13:44
163
原创 在编辑操作时，el-select多选下拉组件，选中label标签后，框中无法回显选中的label,,,
3.柳暗花明：在网上寻觅方案无法解决之后，我冷静下来思考，为什么新增的时候我不出现这种问题，编辑的时候下拉组件就无法选中新的label进行显示，后面我想应该是出在数据格式有啥问题，排查代码，最后突然想到是不是我在封装表格数据渲染完成后依旧使用的是浅拷贝方式，导致一直引用的是同一个内存地址，导致后面下拉组件点击新的时候，无法做到回显最新，而依旧使用老的内存里值展示？想着，反正就是死马当活马医，试试看，然后，，，，，啊啊啊，正常了！，而change事件中监听已获取最新选中的Label。
2023-04-01 10:04:50
1072
原创 Axios的两种请求类型的区别（ application/json；charset=utf-8 、x-www-form-urlencoded）
前言问：Axios中（请求头中里面的）请求类型（Content-Type）是做什么的？答：前端在请求接口（api）服务时，需要将api所需要的参数传递给后端，那么使用何种方式传参给api，就是由请求类型定义的，请求类型就是一个规范，这个规范由后端同事在写接口时定义好的，所以前端需要请求接口时，需要保持请求类型和传参的格式与后端接口定义的一致，否则请求接口不成功！亲身体验在vue项目中使用axios请求登陆api接口时，请求返回状态码401？当时第一时间以为是token失效？想着不对劲，感觉
2022-04-14 21:11:47
10120
原创 Object.defineProperty()【待更新】
js中对象的方法Object.defineProperty() 方法概念*MDN：会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。*我的理解：可以为对象添加新的属性并赋值，并且可以设置当前赋值后，是否允许后续其他形式的赋值。第一次探索使用：Object.defineProperty(obj, prop, descriptor)，这里的三个形参分别对应对象、对象的属性、属性描述 ，而最后的属性描述属于是一个对象类型，里面可以定义属性的值，并且可以使用【第一
2022-02-17 17:23:05
309
原创 使用VuePress+GitHub搭建个人博客
1.创建项目文件夹2.使用包管理器初始化项目执行命令：npm init 【生成】package.json文件作用：生成package.json文件，该文件会记录下我们当前项目安装过的第三方插件，方便版本迭代或项目多人开发时，他人可以通过npm install 安装package.json中的插件。3.安装VuePress为本地依赖npm install -D vuepress注意：若安装报：npm ERR! Unexpected end of JSON input while
2022-02-12 17:39:35
641
原创 webstorm软件使用汉化包
前言自己上传jar包，CSDN管理人员没给通过，再次来这里记录！若在给不通过就算了！GitHub下载地址：https://github.com/pingfangx/TranslatorX （先看这篇,在下载，两篇是有关联的！）https://github.com/pingfangx/jetbrains-in-chinese （汉化包下载地址）...
2022-01-28 14:39:25
1489
原创 element中el-tree和级联菜单
<template> <div> <el-container> <!--头--> <el-header style="background-color: #00c355" class="header">Header</el-header> <!--中--> <el-container>
2022-01-24 09:29:56
1090
原创 JavaScript的filter（）方法---待更新案例
概述：filter（）用于筛选数组中符合过滤条件的元素，若符合筛选条件，则返回true，过滤器就会将这个元素放到新的数组中，若返回false则不会将元素放入到新数组。注：无论元素是否筛选到符合条件，filter（）都会创建一个数组，所以若有通过筛选的元素，直接将其放到新数组，若数组中所有元素都未通过筛选条件，则最终返回一个空的数组。如：【array.filter（callback）】array是需要进行过滤的数组，filter是过滤方法，过滤方法里面是callback回调函数，我们通过cal
2022-01-21 15:59:06
414
原创 vue中表单验证必传字段
致自己：你自己想要的必须自己争取！步入主题：*rules 定义表单哪些字段属于必填字段或其他判断字符长度等… 作用：若为真则放行请求api，否则拦截不继续下执行！*ref 作用：就是后续表单点击提交按钮时，通过这个ref的拿到表单对象，进行置空操作，第1步：form表单上定义规则rules，和定义表单标识ref ，注意：这两个是放在最外面的form表单上面！！！别放错位置！第2步：定义规则必须与表单对象的属性名称保持一致！第3步：使用prop给表单属性添加校验规则！
2022-01-20 11:13:13
1230
原创 关于Vue中及时清空表单校验规则和重置表单
其一1.关于及时清空表单校验规则的必要。【设置prpo的规则清空】我们会在创建表单时，对应一些必传的属性进行添加校验规则，vue中我们给表单必填字段做校验，同时我们需要在没有使用表单时，进行清空表单校验。为什么需要这样做？解：例如我们做新增操作，未填写必传字段，就点击保存按钮，然后关闭form表单了，第一次进来后页面仍旧会显示上一次操作的表单校验规则！一般用于表单api服务请求成功后，关闭form页面时，触发！其二2.关于vue表单进行提交后，及时重置表单的必要。【页面的属性ngm
2022-01-20 10:42:58
4648
3
原创 vue中我们更新数组中的对象，在业务层看到了数据更新了，而在视图层我们的数据仍旧没有发生改变
致自己：遇到问题，只有深入探索理解结合实践，才能巩固记忆变成自己的！场景：修改列表中某一条数据后，我们使用静态更新数据方式，将后端返回更新后得对象覆盖旧对象，业务层（js代码层）打印日志可以看到数组中旧对象已经被更新，而页面上（视图层）这条数据没有改变！步入主题：1.我们在列表中进行某一个员工的编辑，当我们做了修改，点击提交！2.前端调取修改员工的服务，请求成功后，后端会返回我们修改这个员工对象，3.我们需要将这个对象，去覆盖列表中的旧对象，因为ID是不可变得条件，4.我们依次为条件，去数
2022-01-20 10:11:53
550
原创 js中filter()和indexO一起使用能做啥
分开使用第一：js中indexof（）检测字符在字符串中出现的位置，注意：检测的字符不能为空哦，否则会返回第一个字符的下标。第二：js中的filter的方法，筛选数组中符合条件的，将每一次符合条件的字符放入新数组中！结合使用场景一：去除数组中重复字符场景2：去除数组对象中的重复对象...
2021-12-16 17:00:10
677
原创 JSON知识总结
JSON相关知识总结JSONJSON的几种表现形式JSON概念：一种数据交换的格式，可以表示数字、布尔值、字符串、null、数组，以及由这些值组成的对象（字符串与值的映射 ，“键和值一一对应”）JSON的几种表现形式前言：JSON中如果加引号，那只能是双引号！1.JSON对象示例：{ “name”:“Bill Gates”, “age”:62, “car”:null }要求：对象中只能属性名必须使用双引号包裹，注意：JSON对象和js原生对象是不一样，原生js对象的属性名可以不加引
2021-12-16 16:24:10
520
原创 el-tree的初次使用总结
el-tree数据格式：我实现的效果图单页面代码：<template> <el-container style=" min-height: 0px; max-height: 100%; border-right: 1px solid #eeeeee; border-left: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; ">
2021-11-24 16:42:20
1626
原创 请求一直处于padding状态，一段时间后控制台报：Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.f.
遇到问题：场景：上传超过2M大小图片时，请求API一直处于padding状态，约两分钟后，控制台报此错误！控制台报错：Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.f.on解决问题：前端：难道我使用的element中的上传组件，有默认设置图片上传大小？官方文档细看了，并未设置上传图片的默认大小，然后我想那我设置一下吧，发现自己的上传的校验图片大小的方法，没生效？后端：请求没过来啊.
2021-10-14 09:48:37
3493
原创 多个菜单时，选中的菜单进行样式修改，选中另一个时，前一个恢复原有样式
业务场景：当用户点击某一个选项（分类）时，改变其原有的样式，在点击另一个时，前一个恢复之前状态。前提准备：样式方面：菜单被选中后，展示的样式，先定义好；思考：如何从遍历的对象中，标识出当前选中的菜单选项，进行样式替换？奔入主题：第一步：菜单的遍历展示lk第二步：遍历菜单数组，给每一个对象添加一个属性，作为标识k第三步：在菜单的点击事件中，将当前的菜单的下标传递过去，遍历数组找到当前对象，将其标识属性值修改成true，结合dom元素上的三元运算符，则可以实现（点击菜单，修改菜单的.
2021-10-09 16:32:19
338
原创 Vue报错：Unknown custom element: ＜RosterListChildren＞ - did you register the component correctly? For r
问题场景：创建了一个新组件A（页面），打算将其放到另一个组件B中展示，然后再父组件(A)中，引入路径然后，注册到component中，最后使用！解决：写在最后：很多细节问题，不注意最后就是一个个问题why?还记得经常在写路由跳转代码时：this.$route.push( { path:’ ’ })毫不犹豫选择route，人家正确的是选router啊...
2021-08-31 17:13:55
283
原创 vue中父组件与子组件互相传值
前言：A person often meets his destiny on the road he took to avoid it.一个人常常在逃避命运的路上遭遇命运。缘由：项目内一个页面分类太多太多，一共八个分类（其中某些分类，还可以继续追加，如：工作经历、培训经历、教育经历等），就搭建完这个页面，就存静态代码都两千行了，所以学习父子组件互相传值，记录总结。实例演示页面包含关系的体现：目录层级体现：前提：搞清！谁是父组件？谁是子组件？举例说明：A组件（页面）内，
2021-08-26 08:49:24
376
原创 Css预编译处理器~less知识小结（待更新）
知识体系的缺失，效率就不会上去！什么是Css预编译处理器？为什么不使用原生css~而去使用less?less编译工具：less中的注释：less的使用及特点什么是Css预编译处理器？1.概念：用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用。2.分类：Sass：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于Less。Less：是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mi
2021-08-17 12:06:07
304
原创 Vue页面如何~及时更新页面数据
Vue页面如何~及时更新页面数据前言：什么是Vue单页面正题：如何让单页面二次（后续）访问页面，数据渲染（更新）We need to be thinking about tomorrow. So we keep going.我思想明日，是故吾继。前言：什么是Vue单页面代码层面，可以将一个页面HTML、JS、CSS代码统一写在一个 .Vue文件里。页面展示：通过控制当前页面路径#号后面的路由名称，来达到控制（切换）不同页面的展示效果，请记住：这样显隐方式~页面不会重新请求api。补充：（凡
2021-08-11 10:25:54
6046
原创 Vue中hash和history两种路由模式的区别
Vue中的两种路由模式Hash和HistoryHash模式History模式Vue文档对路由模式~阐述Hash模式属于Vue路由的默认模式。访问的路径中包含#号，#后面就是对应页面的路由名称。支持页面刷新。获取当前页面路由某个参数值，使用js中split()进行截取获取。History模式另一种vue路由模式，路径中没有#号，访问路径看起来像api请求一样。需要将前端对应路由，配置到后端数据库，否则直接配置history模式，页面无法刷新（404）获取当前页面路由某个参数值，使用th
2021-08-11 09:27:46
1370
原创 通过配置代理解决跨域
Do everything you can right now, and then decide.全力以赴，历而后择。直入主题首先创建vue.config.js并~加入如下配置：（红色部分）将上一步的配置到axios.defaults.baseURL中最后，重启项目（vue.config.js重启才会被加载）注：以上两步实现配置代理，后续请求API直接填写API名称即可，前缀已配置在vue.config.js中！知识扩展！浏览器的同源策略：保证浏览器的安全性给出的请求地址，.
2021-07-21 10:26:23
450
2
原创 axios最原始的使用（待更新）
There is always hope.希望永存。axios官网：https://www.npmjs.com/package/axios//get 请求function onQuery() { /** * axios.get(a,b)分别代表： * 1.api请求url(地址); * 2.api所需参数，params:请求地址url上传递; */ this.axios.get( 'http://greg-zhong.
2021-07-15 17:38:25
228
原创 浏览器内核及存储方式（待更新）
浏览器~内核：浏览器最重要或者最核心的部分~“渲染引擎”（排版渲染引擎），习惯称为“浏览器内核”。概念：* 将网页语法进行解释并渲染（显示）到网页。* 所以说渲染引擎决定了~浏览器如何显示网页的内容以及页面的格式。* 而不同的浏览器所使用的内核也不一样，所以对网页编写语法的解释也各不相同。* 这就是为什么前端程序员需要将编写好的网页，在不同浏览器下进行调试（测试~不同浏览器下的网页兼容性）。其次密不可分的就是~“JavaScript引擎” 负责
2021-07-14 11:36:12
84
原创 一名前端开发~对栈内存和堆内存的总结
前言于过往的理解~结合网上的概述 成就此文！To travel is better than to arrive.路途之美，远甚终点。栈内存由程序（编译器）自动分配内存；是一块连续的内存；存放基本数据类型；存取顺序：先进后出；存储量相对较小 1~2M，自由度小 (基本数据类型？你还想干嘛？)；使用完，自动销毁；堆内存由程序员手动分配内存；存放引用数据类型（对象和数组）；以数组为例：var a=[ 1,2,3 ]；（将右边的数组，赋值给左边的变量）；* 
2021-07-12 17:43:44
227
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人