前端 终端 实战vue
一文解锁vue3中hooks的使用姿势
## vue3 中的 hooks 是什么? 简单来说如果你的函数中用到了诸如 ref,reactive,onMounted 等 vue 提供的 api 的话,那么它就是一个 hooks 函数,如果没用到它就是一个普通工具函数。至于它为什么叫 hooks,我的理解则是 > 它可以通过特定的函数将逻辑 ......
vue3如何监听 props 的变化?
背景 实际开发过程中,当需要通过 watch 监听传入的 props 的某个值的变化,来动态改变组件内部的样式,实现方式如下: export default { name: 'countdown', props: { showBox: { type: Boolean, required: true, ......
前端实现轮询
/** * * @param callback 需要轮询的函数 * @param interval 轮询的间隔时间 * @returns */ export function pollFn(callback, interval = 1000) { let timerId; //是否停止轮询 let ......
如何在移动终端上安装kali系统
一、起因 很久之前,移动端的终端软件出来的时候,感觉很是新奇,再加上对linux的浓烈兴趣,于是一是兴起,就玩了一会,还记的那款软件叫busybox,当时印象很是深刻,后面又断断续续玩过几次,似乎都没什么成果,感到很是遗憾,于是乘近期有时间,重新拿起,顺便学习一下网络安全相关的知识!接下来,小编带你 ......
vue语言中的keep-alive的作用
在前端Vue语言中,keep-alive是一个抽象组件,用于在Vue组件树中缓存动态组件。它可以有效地保留组件的状态,以避免在组件之间切换时重复渲染和销毁组件,从而提高性能。 使用keep-alive包裹动态组件后,当动态组件被切换时,它将会被缓存,而不是被销毁。这样,组件的状态、DOM以及所有的子 ......
【前端】Layui动态数据表格拖动排序
目的:使用Layui的数据表格,拖动行进行排序。 使用插件:layui-soul-table 和 Layui 1.layui-soul-table文档:https://soultable.yelog.org/#/zh-CN/component/start/install 2.layui文档:Layu ......
小白最近比较闲,于是整理了一些日常使用的VUE组件
1.VUE中给Dom元素动态添加样式 VUE中,给 Dom 元素动态添加样式。 比如判断通过页面传递过来的值和env文件中配置的值是否一致,来动态添加元素的类,同时类的样式在 Style 中已经写好。 此时动态类名需要在 Dom 元素加载完成前添加上,否则样式可能添加不上。 这种情况下可以在 com ......
vue项目新建 端口更改
#### vue项目新建步骤 vite创建vue3项目: 在需要的文件目录中输入cmd命令,打开命令窗口,在当前文件目录下创建项目(直接打开命令窗口,默认C盘创建项目) ``` 第一步:npm init vite-app vue-code //code为项目名 第二步:cd ./vue-code / ......
vue3.0 el-table 动态合并单元格
<el-table v-resize:34 style="margin: 10px 0 10px" :data="tableData" :header-cell-style="{background: '#F6F6F6', height: '10px','text-align':'center'}" ......
数据可视化【原创】vue+arcgis+threejs 实现立体光圈闪烁效果
本文适合对vue,arcgis4.x,threejs,ES6较熟悉的人群食用。 效果图: 素材: 主要思路: 先用arcgis externalRenderers封装了一个ExternalRendererLayer,在里面把arcgis和threejs的context关联,然后再写个子类继承它,这部 ......
购物车的实现 前端按钮 , 一次就是加一次数量吧
后端实现都是查询list集合 ,查询list集合条件是userID 物品id ,list集合其实查询出的就是一个 因为 物品id是唯一的 。。, 另外思想有点像批量删除,和单个删除有点类似 用in来实现 in里面传入的也是list集合, 非常的类似 看了淘宝,美团外卖,多多买菜的基本都是查询list ......
Vue3带来的新变化
Vue3带来的新变化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积变小 更好的Typescript支持 Composition API (重点) 在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题 相关阅读: Vue3 中文文档 https ......
antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7天)
<a-range-picker :value="hackValue || dateArr" :disabled-date="disabledDate" style="width: 240px" separator="~" :allow-clear="false" @change="onChange" ......
Vue2 中vuex和store基本用法——取值之this.$store.getters.getValue & 修改值之this.$store.commit(‘setValue‘, paramVal)
参考:https://blog.csdn.net/weixin_44867717/article/details/124133304 项目实例: ......
前端 文件流下载blob
1.axios请求携带 responseType: 'blob' export function getCreateReport(id) { return request({ url: `${apiPrefix}/bus/proposal/evaluation/${id}`, method: 'Ge ......
前端之外
## 编程语言 [PHP](http://php.net/):PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域 [NodeJS](htt ......
Web前端编程范式
## Event-Driven Programming - **[Comparison Between Different Observer Pattern Implementations](https://github.com/millermedeiros/js-signals/wiki/Comp ......
Web前端设计模式
- [CSS Modules](https://github.com/css-modules) : A CSS Module is a CSS file in which all class names and animation names are scoped locally by defaul ......
从零开始一个vue3前端项目day04-头部导航篇
在实际开发项目中通常会把头部导航栏写成一个通用组件,这里来具体说一下实现思路 1:front-header组件就是我们的头部导航栏,路由我们已经配置好了,把每个导航的首页路径,配置成navList(包含name,path),这样就通过遍历navList就能写出一个首页导航组件 2:导航的选中状态实现 ......
前端工程化
## 前端打包工具 ### Source Map - **[combine-source-map](https://www.npmjs.org/package/combine-source-map)**: Add source maps of multiple files, offset them ......
如何再vue项目中使用cdn(以使用天地图得cdn获取当前位置为例)
# 一、了解天地图 http://lbs.tianditu.gov.cn/api/js4.0/examples.html 在其中可以了解天地图的基本使用教程 但其中的教程均为h5引入cdn的方式 以h5定位为例来改成vue项目 源码: ```html5 天地图-地图API-范例-H5定位 本示例演示 ......
vue3 甘特图(二):甘特图时间轴切换
vue3 甘特图(二):gantt时间轴切换 1.固定时间轴缩放级别 gantt.config.scale_unit = "month"; //时间轴单位 gantt.config.step = 1;//单位数 gantt.config.date_scale = "%Y年%M";//时间轴展现方式 ......
直播带货源码,vue 身份证校验js及其***显示
直播带货源码,vue 身份证校验js及其***显示 校验js const idCardRule = (rule, value, callback) => { let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/i if (value & ......
前端项目环境搭建笔记
@[toc] ## 简介 技术栈:vue3、TypeScript、vue-router、pinia、element-plus、axios、echarts等 ## 一、vue3组件通信方式 **通信仓库地址:https://gitee.com/jch1011/vue3_communication.gi ......
前端实现图片验证效果
效果图: // 页面执行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" style="width: 200px;height ......
vue——配置代理无效问题
参考: 1.webpack proxy 不生效 https://segmentfault.com/q/1010000020677598 2.vue开发环境配置代理 https://blog.csdn.net/weixin_50576800/article/details/125055213 3.we ......
vue项目全局api接口封装
项目通常情况下,api封装放在src 下utils 文件下 request.js // 安装 axios cnpm install axios --save // 新建request.js// 通常项目的拦截,封装方法都封装在这里 import axios from 'axios' const in ......
Vue3 CompositionAPI如何优雅封装第三方组件
Vue3 CompositionAPI如何优雅封装第三方组件 HexOr 2022-04-11 01:037052 | 收录于专栏: Vue 前言✨ 对于第三方组件,如何在保持第三方组件原有功能(属性props、事件events、插槽slots、方法methods)的基础上,优雅地进行功能的扩展了? ......
element vue表单form下多个form-item项循环校验
效果图: ps:重点注意 prop 值 <el-form ref="fromRef" :model="formData" :rules="rules" label-width="100px" > <el-row v-for="(item,index) in formData.allopatricCo ......