- 博客(50)
- 收藏
- 关注
RSS订阅原创 CSS与WXSS的区别
WXSS 和 CSS 的语法在大多数情况下是相似的，但 WXSS 有一些特定的扩展和限制。例如，WXSS 支持一些特定的选择器，如 .class、#id、element、element,element、:pseudo-class、::pseudo-element 等，但它不支持 CSS 的某些高级选择器，如属性选择器 [attribute]。WXSS 针对微信小程序的组件进行了样式支持的优化，一些样式属性在小程序中有特殊的表现，如 flex 布局在微信小程序中得到了更好的支持。4. 组件和属性的支持。
2024-05-24 08:27:31
220
原创 JS中重排与重绘的区别
重排指的是更改了 DOM 树的结构或者元素的样式，导致浏览器重新计算元素的位置和大小，然后再绘制在屏幕上。而重绘则是当元素样式的改变不影响其在文档流中的位置和大小，只影响其外观时，浏览器会执行重绘操作，重新绘制这些元素。重排和重绘是网页性能优化中需要重点关注的问题，合理的布局和样式设计可以减少不必要的重排和重绘，提升网页的渲染性能和用户体验。3.将需要多次重排的元素，position 属性设为 absolute 或 fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。重排优化有如下五种方法。
2024-05-24 08:17:56
358
原创 JS中的匿名函数（自执行函数）
语法：自执行函数的语法是将函数定义放在一对括号中，然后在后面再加上一对括号来立即执行该函数，例如：(function() { // code })();自执行函数经常用于实现模块化开发。避免全局污染：自执行函数可以将变量和函数封装在函数作用域内，避免了对全局作用域的污染，有助于保持代码的整洁和可维护性。避免命名冲突：自执行函数中的变量和函数都是在函数作用域内，可以避免与全局作用域中的同名变量和函数发生冲突。通过自执行函数，可以将一段代码封装起来，形成一个独立的作用域，这有助于提高代码的可读性和可维护性。
2024-05-24 08:14:46
670
原创 微信小程序开发 懒加载+瀑布流+排序功能
来控制列数，但很快发现，这样的瀑布流的顺序是从上到下后再从左到右，与原型图的要求并不符合，况且在加上懒加载后，由于整体的数据数量发生了变化，整个瀑布流相当于又重新加载了一次，不仅不能实现功能，还加大了加载的压力。最后需要注意的是，在触发切换事件导致排序发生变化时，应当手动将左右两侧的列表的高度清空，防止重新识别高度时产生的错判导致左右换位。在小程序的开发过程中，遇到了这样的功能需求：在保持瀑布流布局的情况下，使用懒加载来渲染页面，并且要求对其中的属性添加排序功能。注意需要为左右两个列表设置浮动。
2024-05-23 14:11:31
724
原创 微信小程序开发 图片压缩功能
在微信小程序的开发过程中，为了防止用户在上传图片时出现过大文件的情况，造成后台的加载负担，我们通常会在前台加上大小的限制或在上传时就对图片进行压缩。但仔细查看后我们发现，这个API在iOS端仅支持压缩JPG格式的图片，显然不太符合我们的需求。经过一番查阅后，决定采用canvas绘图的方式来对图片重新进行绘制，从而达到压缩的效果。首先，创建一份画布，如果不需要图片的显示的话可以直接移出可视范围。顺带再加一个解析上传图片的方法，方便我们进行转换。
2024-05-23 08:46:40
947
原创 Vue路由导航守卫
Vue路由导航守卫是Vue Router提供的一种机制，它可以让你在路由跳转之前或之后执行一些自定义逻辑，例如：鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。Vue路由导航守卫是Vue Router提供的一种机制，可以让你在路由跳转之前或之后执行一些自定义逻辑，例如：鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫，每种守卫都有自己的使用场景。在使用守卫时，需要注意它们的执行顺序和next函数的使用，避免出现无限循环的情况。
2024-03-31 09:53:43
1139
原创 Vue中的MVVM
下面是一个简单的Vue.js的代码示例，演示了Vue.js的模板引擎、双向数据绑定和组件化特性。Vue.js是一个响应式框架，它使用了MVVM架构模式，通过双向数据绑定，将模型和视图联系起来，实现了数据的实时更新和UI的自动同步。Vue.js拥有自己的模板引擎，可以用来生成HTML标签，在模板中使用指令和表达式，绑定数据和事件，实现数据的动态更新和视图的响应式渲染。Vue.js支持双向数据绑定，当数据改变时，视图会自动更新，当视图改变时，数据也会更新，这种双向绑定大大简化了开发流程。
2024-03-31 09:49:30
1076
原创 Vue的生命周期总结
Vue.js 的实例生命周期指的是 Vue 实例在创建、更新和销毁过程中的一系列事件和钩子函数，允许在不同阶段执行自定义操作。created：实例已经创建完成，数据观测和事件配置都已完成，但虚拟 DOM 尚未创建，不能访问 $el。mounted：在实例被挂载后调用，可以访问 $el，此时实例已经成为 DOM 树上的一个节点。destroyed：在实例销毁后调用，可以访问实例的数据，但不再能访问 $el。beforeUpdate：在数据更新时调用，但在 DOM 重新渲染之前。
2024-03-31 09:39:12
559
原创 Vue3.0中的ref与reactive
ref和reactive是Vue 3中用于创建响应式数据的两个重要函数。通过使用这些工具，我们可以轻松地创建响应式对象，并实现自动更新视图的效果。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。希望这篇博客能对您有所帮助。
2024-03-31 09:36:25
1045
原创 Vue3.0中Composition API的引入
Vue.js 3.x版本带来了许多全局API的调整，其中包括Composition API的引入、全局API的移除和替代、插件机制的改进以及对TypeScript的增强支持。这些调整旨在提高代码的可读性、重用性和可维护性，为开发者提供更好的开发体验。无论是新项目还是迁移现有项目，理解这些调整并灵活运用它们将有助于开发出更加优雅和高效的Vue.js应用程序。希望这篇博客能为您带来一点帮助。
2024-03-31 09:30:50
505
原创 Vue中的双向数据绑定
同时，当数据对象中的值变化时，v-model 会自动将最新的值反映到表单元素上，保持视图和模型的同步。它通过监听用户的输入事件和数据对象的变化事件，实现了视图和模型之间的双向同步。当数据对象中被绑定的属性的值发生变化时，Vue 会通过之前注册的事件监听器，将最新的值反映到表单元素上，确保视图和模型保持同步。当用户输入内容时，触发相应的事件监听器，通过这些监听器将用户输入的值更新到数据对象中对应的属性上。同时，Vue 的响应式数据系统会监听数据对象中属性的变化，并立即通知相关联的视图进行更新。
2024-03-31 09:26:50
757
原创 Vue中computed与watch的区别
使用 computed 的好处是，它可以通过定义简单的函数来处理复杂的逻辑，并且只在需要的时候进行计算。而且，由于 computed 是响应式的，当依赖的数据发生改变时，相关的 computed 属性会自动更新。与 computed 不同的是，watch 提供了更为细粒度的控制，可以在数据变化时执行异步或复杂的操作。在实际开发中，根据具体需求选择合适的方式。在上面的代码中，我们通过 watch 监听 num 的变化，在 num 值发生改变时，执行定义的回调函数来更新 watchResult 的值。
2024-03-31 09:24:23
503
原创 Pure-admin框架 Pure-table中获取所选中的内容的信息
最近在尝试使用Pure-admin框架来进行开发，正好遇到了多选表格需要获取选中项的id的情况，因为平台介绍说是二次封装 element-plus 的 Table ，直接拿el-table的方法来试。能发现是通过事件selection-change来获取所选中的值，那就很好处理了。在table上设置属性ref="multipleTableRef"出现了报错，原因是没找到方法getSelectionRows()没有兼容方法，只能去看看框架是怎么处理这种情况的了。照葫芦画瓢直接拿来，成功拿到了数据。
2024-01-18 22:00:14
2609
原创 Vue3导出el-table为word文件（含图片）
这种写法的另一个好处是，表格中的图片转word只能通过原生的属性设置来控制大小，而我们通常在表格中使用的是带有图片预览的组件，不存在原生属性，导出后的样式控制十分麻烦。之前整理了el-table转excel文件的写法，但是如果表格中包含图片，excel是不能正常显示出来的，所以我们可以换成word文件来导出。但是分成两个表格的话，外面可以正常使用图片预览组件，导出用的表格就换原生的img标签啦（反正也没人看）同样，我们仍然是一个表格用于分页展示。另一个隐藏的表格用于导出功能。这样就可以正常导出了。
2024-01-09 21:29:20
1006
3
原创 Vue3导出el-table为execl文件
而用于导出的表格使用总数据，并且将display设置为none，不影响页面，这样在保证了搜索与排序功能不受影响的同时可以完整的导出所有的数据。在开发时遇到了这样的需求，整理之后向大家分享一下，欢迎积极讨论与指正哦。正常显示的表格使用分页后的数据。接下来是导出部分的实现。
2024-01-09 20:56:49
955
原创 axios的post请求，数据为什么要用qs处理？什么时候不用?
在使用 axios 发送 POST 请求时，有时候需要将数据进行序列化处理。这是因为在发送 POST 请求时，一般会使用请求体（body）来传递参数数据。axios默认的content-type是application/json,即json格式，但后台大多接收的是formData格式的数据则需要使用qs.stringify解析后，content-type是application/x-www-form-urlencoded,即form表单格式，后台可以使用实体进行接收。
2024-01-06 22:00:03
685
原创 axios的七大特性
4、拦截请求和响应；（修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法）3、基于 promise 的 HTTP 库，支持promise所有的API。1、在浏览器中发送 XMLHttpRequests 请求；5、转换请求和响应数据,响应回来的内容自动转换；2、在 node.js 中发送 http请求；7、客户端支持保护安全免受 XSRF 攻击；6、自动转换 JSON 数据；
2024-01-05 22:06:33
842
原创 为什么避免 v-if 和 v-for 一起用？
当 Vue2 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历 列表中的每个值。在vue2中，v-for的优先级是高于v-if的，如果作用在同一元素上，输出的渲染函数中可以看除会先执行循环再判断条件，哪怕只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会造成性能的浪费。因为两者作用在同一个元素时，优先级是不同的。而在vue3中，v-if的优先级时高于v-for的，因此v-if执行时要调用的变量可能还不存在，会导致报错。
2024-01-05 22:04:54
417
原创 vue是如何进行监听数据变化的？vue2和vue3分别是什么？vue3为什么要更换？
监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升。vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势。Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。的双向数据绑定是利用ES5 的一个。的 ProxyAPI 对数据代理。vue是通过监侦器进行监听数据变化。可直接实现对象属性的新增/删除。可直接监听数组类型的数据变化。
2024-01-02 10:17:00
433
原创 Vue2.0和Vue3.0有什么区别
可以看到，Vue 3.0 对生命周期进行了一些小的调整，并不影响使用，而且增加了一些新的钩子函数，极大的方便使用者进行开发和维护。onBeforeUnmount：在卸载之前被调用，与 Vue 2.0 中的 beforeDestroy 类似。onBeforeUpdate：在更新之前被调用，与 Vue 2.0 中的 beforeUpdate 类似。onBeforeMount：在挂载之前被调用，与 Vue 2.0 中的 beforeMount 类似。activated：在组件章节中深入讨论过，这里不做详细讲解。
2024-01-02 10:13:42
440
原创 vue中导航守卫有哪三种？分别有什么作用
（3）.组件内的守卫（In-Component Guards）：通过在Vue组件中定义beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等生命周期钩子函数来添加。（2）.路由独享的守卫（Per-Route Guards）：通过在路由配置中使用beforeEnter属性添加，只在特定的路由切换前执行。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。作用是路由跳转前对路由进行判断,防止未登陆的用户跳转到其他页面去。to：目标路由对象；
2024-01-02 08:32:44
665
原创 v-show和v-if指令的共同点和不同点?
相同点：v-show和v-if都能控制元素的显示和隐藏。v-show本质就是通过设置css中的display设置为none，控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素在初始渲染时，v-show指令不会对元素的显示和隐藏进行判断，而是直接按照CSS属性来展示；而v-if指令会在初始渲染时根据条件判断是否需要显示元素。由于v-show指令只控制CSS属性，因此切换元素的显示和隐藏的性能较高；
2023-12-29 23:50:18
432
原创 V-for中 key 值的作用
(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。b. 旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到到页面。(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM。简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，会产生错误DOM更新 ==> 界面有问题。
2023-12-29 23:48:31
325
原创 vue 长按保存图片事件
vue没有封装真正的长按事件，所以我们这里用@touchstart，@touchmove，@touchend事件来代替。直接上代码，中间这里是用的是保存canvas的方法。
2023-12-28 22:11:06
879
原创 Vue项目在上传宝塔后 除首页外页面刷新出现404
控制台打开网络可以看到首次进来的时候是正常的刷新一次后请求网址发生了变化，并且出现404这是因为在项目打包后，dist文件中只存在一个index网页，当我们从网址进去后通过路由跳转到达其他页面，关键在这里，当我们在其他页面执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况。
2023-12-24 08:16:05
1029
原创 Vue 判断当前时间是否在某一区间中（HH:MM:SS）
大致思路是，获取当前的标准时间，然后将起始时间和终止时间(HH:MM:SS)都转换成标准时间，进行比较后区分出三种情况。
2023-12-24 08:00:00
1746
原创 Vue 高德地图开发平台 标签icon在上传后出现404问题
在使用高德地图组件开发中，遇到了在本地明明可以正常运行，但上传到宝塔网站后，自定义icon中的图片url却报了404，，在进行了一番排查后，发现icon的url是这样的。貌似并不是对应的在项目中的位置，但是更改后图标又不会正常显示了，最后选择用引入的方式将图片显示，上传后正常运行。
2023-12-23 21:30:08
456
1
原创 Vue 拼音排序索引栏列表
在练习的过程中，存在一个需要根据拼音来排序城市的索引栏功能，由于后端接口并没有给出拼音，所以在网上自己整合了一些代码实现，向大家分享一下。为数据添加pinyin属性（list为城市数据）计算出所用到的大写字母（索引栏右侧用）首先需要安装pinyin.js库。在要用到的vue项目中引入。排序并列出首字母大写。
2023-12-23 21:20:29
689
1
原创 Vue问题小结
渐进式框架的特点是模块化、可重用性、可扩展性和灵活性。当其依赖的属性的值发生变化的时，计算属性会重新计算。计算属性和vue中的其它数据一样， 都是响应式的，只不过它必须依赖某一个数据实现， 只有它依赖的数据的值改变了，它才会更新。计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数。methods中一般都是定义的需要事件触发的一些函数，每次只要触发事件，就会执行对应的方法。
2023-12-22 22:33:38
542
原创 Vue3在高德地图JS API的简单使用
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。在使用高德地图API之前，我们首先需要注册开发者账号登录高德地图开发者平台，注册开发者账号创建自己的key这样就可以正式开始使用了。
2023-12-22 22:30:11
650
原创 Vant组件库的初始与使用
Vant 是一个，于 2017 年开源。目前 Vant 官方提供了和，并由社区团队维护和。通过这片文章，将帮助您了解Vant的安装与简单使用通过npm安装在现有项目中使用 Vant 时，可以通过npm当然，你也可以通过yarnpnpm或bun。
2023-12-21 22:09:05
794
1
原创 Vue的生命周期
destroyed 组件销毁之后（Vue2）unmounted 组件销毁之后（Vue3）beforeDestroy 组件销毁之前（Vue2）beforeUnmount 组件销毁之前（Vue3）beforeCreate 组件创建之前。beforeMount 组件挂载之前。beforeUpdate 数据更新之前。
2023-11-02 22:00:42
63
原创 什么是渐进式框架
但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。渐进式框架是一种用于构建用户界面的渐进式开发框架，它允许开发人员在同一个代码库中同时开发桌面、手机、平板电脑等不同平台的应用程序。它通常包括一组构建工具和插件，可以自动化应用程序的开发和部署过程。渐进式框架可以帮助开发人员快速构建功能强大的应用程序，并可以轻松地部署到不同的设备和操作系统上。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。
2023-11-02 21:43:15
263
原创 什么是vue，作用是什么，有哪些优缺点
Vue.js是一种现代化的JavaScript框架，它为开发者提供了一种简单、灵活和高效的方式来构建交互式的Web应用程序。作为一门渐进式的框架，Vue.js可以被用于创建从简单的静态页面到复杂的单页面应用程序（SPA）的各种规模的项目。一、Vue是什么？全称为Vue.js，是一种用于构建用户界面的渐进式JavaScript框架。它由尤雨溪（Evan You）在2014年创建，并于2014年2月首次发布。Vue.js的目标是通过尽可能简单的API，实现响应式的数据绑定和组合的视图组件。
2023-11-02 21:30:50
2671
原创 初始Vue，购物车demo制作
不得不感叹新技术的强大，在之前需要费力处理的信息在vue的帮助下游刃有余，看来还是需要更加努力的学习知识。最近进行了vue的基础学习，拿之前JS时写的代码改了改，用Vue的方法写了出来，在这里与大家分享一下。具备了基本的增删改信息功能。希望能为你带来帮助~
2023-11-01 22:04:05
85
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人