vue
小小亮01
这个作者很懒,什么都没留下…
展开
-
vue前端拿到后端pdf与zip等重新打包为一个新的zip包
【代码】vue前端拿到后端pdf与zip等重新打包为一个新的zip包。原创 2023-09-11 09:55:25 · 353 阅读 · 0 评论 -
vue3 实现截图当前dom节点为图片与下载为pdf文件
【代码】vue2封装一个方法判断是否含有()或者(),若是仅有一个(),则提取()中的内容。原创 2023-06-02 16:29:11 · 308 阅读 · 0 评论 -
vue2封装一个方法判断是否含有()或者(),若是仅有一个(),则提取()中的内容
【代码】vue2封装一个方法判断是否含有()或者(),若是仅有一个(),则提取()中的内容。原创 2023-06-02 14:06:47 · 183 阅读 · 0 评论 -
vue2实现vuedraggable实现可拖拽表格
【代码】vue2实现vuedraggable实现可拖拽表格。原创 2023-04-27 17:09:43 · 774 阅读 · 1 评论 -
vue2实现前端ping 后端给的ip地址是否可以ping通
【代码】vue2实现前端ping 后端给的ip地址是否可以ping通。原创 2023-04-25 18:22:22 · 1086 阅读 · 1 评论 -
vue之日期组件时间戳设置为 结束时间 23:59:59这个的时间戳
目录vue之日期组件时间戳设置为 结束时间 23:59:59这个的时间戳最后结束时间end设置为当天的23:59:59的时间戳,类似+24小时vue之日期组件时间戳设置为 结束时间 23:59:59这个的时间戳最后结束时间end设置为当天的23:59:59的时间戳,类似+24小时 <el-date-picker v-model="ruleForm.datePicker" type="daterange" format = 'timestamp' r原创 2023-03-22 19:45:04 · 50 阅读 · 0 评论 -
vue2之XMLHttpRequest原生请求与 前端发起XML请求,校验下载文件是否可下载
【代码】vue2之XMLHttpRequest原生请求与 前端发起XML请求,校验下载文件是否可下载。原创 2023-03-22 19:37:27 · 329 阅读 · 0 评论 -
vue2之动态class与动态class组件的封装
【代码】vue2之动态class与动态class组件的封装。原创 2023-03-22 19:26:01 · 226 阅读 · 0 评论 -
vue2之下载功能的实现
【代码】vue2之下载功能的实现。原创 2023-03-22 19:17:59 · 1010 阅读 · 0 评论 -
vue前端后端实现WebScoket 即时通讯和主动断开链接
vue前端后端实现WebScoket 即时通讯和主动断开链接原创 2023-03-12 12:51:01 · 2059 阅读 · 0 评论 -
echarts之水球图与响应式
echarts之水球图与响应式原创 2023-03-10 18:20:52 · 238 阅读 · 0 评论 -
vue之防抖函数与节流函数的使用
目录js之防抖函数与节流函数的使用js之防抖函数js之节流函数js之防抖函数与节流函数的使用防抖:就是在规定时间内200ms,录入数据,那么在200ms后,输出最后录入的结果;假如你在规定200ms时间内,一直录入,里面的时间就会重新计算之,在录入结束时,过了200ms才起效果作用1:就是输入框的时候,录入数据,对应的时间内,不会重复发起请求节流设定的时间固定执行一次函数,比如200ms一次,不管怎么样操作,只是再规定时间内,触发一次效果作用:可以用来限制,提交按钮的重复提交情况原创 2022-03-29 21:21:16 · 471 阅读 · 0 评论 -
vue异步组件的使用
目录vue异步组件的使用如何设置浏览器的网络vue异步组件的使用使用场景:你引入了一个子组件,子组件叫list,但这个list特别大,页面每次渲染的时候都会同步加载这个list,这样导致你页面特别卡,那有没有一种方法,可以让我在需要的时候才加载这个list呢?这就是异步组件的作用,可以按需加载组件。示例代码如下:<template> <div> <div>home</div> <div @click="btn" class=原创 2022-02-08 15:59:31 · 1509 阅读 · 0 评论 -
vue-cli4之vue.config.js打包优化
目录vue之cli之中的vue.config.js配置文件publicPath - 打包后 访问基础路径outputDir - 打包后输入的文件夹使用gzip压缩打包的文件大小 - compression-webpack-plugin配置别名压缩js代码 - uglifyjs-webpack-pluginvue之cli之中的vue.config.js配置文件官网publicPath - 打包后 访问基础路径假设部署路径再 https://www.my-app.com/xzl/ 因此需要设置:p原创 2022-01-20 11:49:47 · 4322 阅读 · 2 评论 -
vue项目之eslint的配置
.eslintrc.jsmodule.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'prod原创 2021-12-26 20:06:48 · 876 阅读 · 0 评论 -
vue之菜单的递归渲染思想
目录vue之菜单的递归渲染思想TreeMenu.vueMenuItem.vueSubMenu.vueResubItem.vue综合使用组建为树型菜单vue之菜单的递归渲染思想TreeMenu.vue树型菜单组件,用于承接菜单项<template> <div class="tree-menu"> <slot></slot> </div></template><script>export d原创 2021-12-05 11:49:32 · 511 阅读 · 0 评论 -
vue之打印表格的实现
目录vue之打印表格的实现实现简单的打印vue之打印表格的实现安装:yarn add vue-print-nb局部引入:import print from "vue-print-nb";挂载指令:directives: { print, },实现简单的打印操作:1:<button v-print="'#printTable'">打印table</button>2:<div id="printTable"></div><t原创 2021-12-01 21:46:34 · 2156 阅读 · 0 评论 -
echarts之响应式的实现
目录echarts之响应式的实现BarChart.vue使用组件echarts之响应式的实现BarChart.vue<template> <div ref="chartP" class="bar-chart-wrap"> <div :id="id" class="chart"></div> </div></template><script>export default { name: "Ba原创 2021-11-29 11:30:43 · 993 阅读 · 0 评论 -
vue之内置的动画效果
目录vue之内置的动画效果fade 过度显示隐藏动画效果精简写法1vue之内置的动画效果fade 过度显示隐藏动画效果精简写法1<template> <div class="home"> <button @click="btnShow">点击显示</button> <!-- transition包裹一个元素后,这个元素的显示和隐藏就会自动添加一些类名 --> <transition name="dialog原创 2021-11-27 20:58:47 · 468 阅读 · 0 评论 -
vue之echarts世界地图七大州分布
目录vue之echarts世界地图七大州分布world.vue使用该组件世界地图七大州的数据vue之echarts世界地图七大州分布world.vue<template> <div ref="chartP" class="pie_chart"> <div :id="wroldChartId" class="chart" ref="my_pie_chart" style="width: 100%; height:原创 2021-08-06 14:20:17 · 4288 阅读 · 1 评论 -
vue项目使用 md5加密
目录vue项目使用 md5加密处理这唯一标志 sign.js请求拦截之中vue项目使用 md5加密安装:npm i --save js-md5作用:就是针对前端请求的参数添加唯一的标志,还有进行单次加密每一次请求之中,在浏览器那边都会生成一个标志 (也就是 sign && _t)因此,我们在路由拦截的时候,根据不同的请求,把对应的数据 + Query String Paraments 这个对象的下的(_t && sign ),一起组合为一个对象,再发送到后端即原创 2021-04-26 09:57:24 · 2034 阅读 · 0 评论 -
vue + ele 二次封装 tabel
vue + ele 二次封装 tabelTableCom.vue<template> <div class="table_wrap"> <!-- 判断是否需要选中某行 --> <template v-if="tableclickRowConfig"> <el-table ref="multipleTable" :data="tableData" border :row-c原创 2021-03-18 09:44:56 · 162 阅读 · 0 评论 -
vue 使用 base64对 传入后端的数据进行加密
vue 使用 base64对 传入后端的数据进行加密安装:npm install --save js-base64let Base64 = require('js-base64').Base64;export function singelAdd(json){ let jsonData = JSON.stringify(json); // 对base 64 的使用 let tempJSon = Base64.encode(jsonData); // console.log('新增原创 2021-03-12 16:42:54 · 475 阅读 · 0 评论 -
vue 之 watch的使用方式
目录vue 之 watch的使用方式watch的书写方式1watch的书写方式1vue 之 watch的使用方式watch监听的使用场景,最为频繁的还是,父组件数据更新的时候,子组件数据却是没有更新,因此使用watch监听的方式,监听从父组件传递的数据,实现实时更新!一般来说,有着两个参数,newV, oldVwatch的书写方式1直接监听对象的属性 或者 监听 简单数据类型父组件向子组件 传递一个 addDetailsShow 属性,子组件使用props去接受,为了实现实时更新,需要使原创 2021-03-11 16:44:32 · 228 阅读 · 0 评论 -
浅谈vue3.0之Proxy
目录vue3.0数据响应式的原理对象方式数组方式vue3.0数据响应式的原理原理:使用Proxy来实现响应式数据需求:把obj中的属性转化为响应式属性对象方式let obj = { name: "ppp", age: 20}//参数1:需要包装的对象,参数2:如何监听的获取和赋值let state = new Proxy(obj, { get(obj, key) { // 获取的话,一般都是使用 对象的属性拿到的值,因此直接返回一个属性值即可! // con原创 2020-10-07 21:32:47 · 2188 阅读 · 0 评论 -
Vue封装一个TabBar选项卡
目录TabBar选项卡需求:TabBar选项卡需求:原创 2020-09-13 21:25:38 · 604 阅读 · 1 评论 -
浅谈$router、$route的区别¶ms和query的区别
目录router、router、router、route的区别$router$route一个简单的点击按钮,打印出两者的区别关于query和params传递参数router、router、router、route的区别$routerrouter:其实就是router对象,就是我们在引入vue−router的时候,会创建一个路由对象(router)‘constrouter=newVueRouter();‘通过事件的输入的时,发觉,这个router:其实就是router对象,就是我们在引入vue-rou原创 2020-08-26 11:30:58 · 702 阅读 · 0 评论 -
浅谈Vue之生命周期
目录生命周期创建阶段运行阶段销毁阶段常用的生命周期函数生命周期概念:生命周期,就似乎人的一生,出生下来,由哺乳期到孩童,慢慢成长到青年,中年,老年,最后落叶归根,化为尘埃! 而Vue实例也是存在一个生命周期,从创建前,创建后,挂载前,挂载后,(按需更新前,更新后),最后销毁前,销毁后,化为虚无!也就是vue实例走向生命的尽头!官网: 链接: linkVue实例的阶段:主要分为3个阶段,创建实例,使用实例,销毁实例在这些阶段之间的处理函数,称之为生命周期函数(钩子函数)!创建阶原创 2020-08-08 21:34:58 · 248 阅读 · 0 评论