💥Vue💥
文章平均质量分 64
此专栏记录的正是现阶段火爆的框架Vue.js,都是自己在实际工作中总结和遇到问题的文章,希望给大家带来帮助,
张清悠
学会不为过程的缓慢而焦虑,即使暂时未能如你所愿,但只要你在努力,你就在不断成长!
展开
-
Vue使用Input大文件上传切片、修改file文件上传控件样式、清空已选择文件
最近重构公司项目核心内容就是大文件的上传功能,文件基本上都是几个G的,着手的是原生的input标签file,大文件我们首先考虑到一个分片上传这样的功能我们先来说一说分片的好处分片上传的好处是将一个大请求分成多个小请求来执行,这样当其中一些请求失败后,不需要重新上传整个文件,而只需要上传失败的分片就可以了 .可想而知如果不分片会造成文件的丢失,下一次上传从新开始上传,极大的浪费资源一方面给用户体验也不是很好修改前:修改前是和其他表单共用的弹窗。原创 2023-02-22 15:48:53 · 1309 阅读 · 1 评论 -
Vue考试倒计时和计算考试用时
【代码】倒计时1111。原创 2022-11-04 16:12:52 · 395 阅读 · 0 评论 -
Vue考试题单选、多选、判断页面渲染和提交
这几天在写简易版的学生考试,当我们获取到后端返给我们的试题如何再提交给后端呢?这里我的题目只有单选、多选、判断题目首先我们看一下获取试题的数据结构,(这里的字段命名就不要吐槽了啊,哈哈哈哈哈…)分为两层一层是题目第二层是选项。原创 2022-11-12 12:19:50 · 2145 阅读 · 3 评论 -
Vue实例生命周期(全面解析)
前言:Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运 行业务逻辑。本文将详细介绍Vue实例的生命周期一、图例解析下图是Vue实例生命周期的图示:二、解析生命周期含义接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明【beforeCreate】在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化【created】在实例创建之后调用。此时已完成数据观测、事件方法,但尚未开原创 2021-09-28 14:50:06 · 628 阅读 · 0 评论 -
深入了解Vuex的核心
文章目录前言一、Vuex的概念理解二、Vuex的使用1.简介总结前言主要介绍了Vuex新手的理解与使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定 的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧一、Vuex的概念理解提到vuex,就不能不先提vue.我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时 候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改原创 2021-09-28 11:55:33 · 80 阅读 · 0 评论 -
vue组件间通信六种方式(总结篇下)
文章目录前言一、Vue组件通信后三种?二 、 $attrs / $listeners1.简介2.示例代码三 、 provide/inject1.简介2.示例代码四 、 $parent / $children 与 ref1.简介2.示例代码总结前言上篇文章我们说到了props、emit/emit/emit/on、vuex这三种组件之间的通信关系,本篇继上篇我们来说说attrs/attrs/attrs/listeners、provide/injedt、parent/parent/parent/c原创 2021-09-28 11:35:45 · 298 阅读 · 0 评论 -
vue组件间通信六种方式(总结篇上)
文章目录前言一、Vue组件是什么?二、具体介绍2.1方法一、 props / $emit2.2方法二、 $emit / $on2.3方法三、 vuex总结前言组件是 vue.js最强大的功能之一 ,而组件实例的作用域是相互独立的 ,这就意味着不同组件之间的数据无法相互引用。 一般来 说 ,组件可以有以下几种关系 :一、Vue组件是什么?组件是 vue.js最强大的功能之一 ,而组件实例的作用域是相互独立的 ,这就意味着不同组件之间的数据无法相互 引用。 这篇文章主要介绍vue组件间原创 2021-09-27 20:28:50 · 602 阅读 · 2 评论 -
Vue组件与复用详解
系列文章目录Vue组件与复用详解文章目录系列文章目录前言一、什么是组件?二、使用步骤2.1 全局注册后,任何Vue 实例都可以使用。如:2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如2.3 data必须是函数总结前言组件 (Component) 是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主 要介绍了vue组件与复用,需要的朋友可以参考下一、什么是组件?组件需要注册后才可以使用,原创 2021-09-27 17:10:34 · 4434 阅读 · 0 评论 -
Vue实现商品放大镜效果
一、前言:在这个鼎盛的电商时代各种直播带货或者自主逛宝购物,我们对商品的认知和了解进一步查看详情,发现我们的商品可以放大观看,于是心血来潮运用前端技术Vue框架,写了一个类似放大镜的功能二、 实现思路:对原图的显示空间(left) 可以将显示原图可 img 换成canvas,来对图片行进行保护 ,跟随鼠标移动时显示放大的指示区(鼠标层罩top) ,显示层罩区域选中放大的显示空间(right)三、效果展示四、具体实现逻辑代码template (记得改图片路径)<template>原创 2021-09-25 11:34:18 · 4151 阅读 · 3 评论 -
Vue手写搜索防抖代码
前言:众所周知搜索这一功能是一个高消耗服务器的功能,每一次的请求都是在给服务器增压,避免频率过快,导致功能下降,服务器崩溃,我们需要做一些限制的解决方案。今天我们的主题就是——防抖的使用什么是防抖?在固定的时间内没有触发事件,会在固定时间结束后触发,如果固定时间内触发事件了,会在延长固定时间再触发 防抖主要利用定时器实现一、先上案列:以上就是我们平常的搜索功能,快速的点击,一次次的去请求我们的服务器接口,没有加防抖来限制我们的请求二、示范我们可以看到加完防抖之后,再规定的时间内多次点击没有多原创 2021-09-16 15:14:01 · 285 阅读 · 0 评论 -
微信小程序获取日期补零和比较时间大小提示不同
if (res.data.data == "success") { var startDate = res.data.taskTypeList[0].startDate //获取接口返回开始日期 var kstartTime = res.data.taskTypeList[0].startTime //获取接口开始时间 var zongtime = kstartTime.slice(0, 2) //截取接口开始时间前两位例 09:00 取0...原创 2021-09-11 11:13:16 · 1223 阅读 · 0 评论 -
vue+element ui 写分页器
分页器vue+element ui<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-25 14:48:52 · 94 阅读 · 0 评论 -
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
一、话不多说先看实际效果二、直接上源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-07-08 11:51:35 · 1617 阅读 · 5 评论 -
前端拿到后端接口字段为null时,一行代码为你解决
一、 直接上案例1.如下图是前端拿到的后端接口2.我们可以看到有三个字段为 null ,我们前端要拿字段渲染到页面不可能把null 渲染出去,如下图:像这样金额不可能给用户体验为 -¥null 完全没有一点用户体验二、解决方法1.仅需加上非空判断即可,当值为null时 将转换成0.00 toList() { var that = this axios.post(api.contractApplyList,原创 2021-07-07 15:44:11 · 2069 阅读 · 0 评论 -
前端开发想跳槽?不可缺少的准备
一、总结建议1.平时的积累很重要:工作中遇到的一些问题及其解决方式,我们可以记录下来,抽空做个总结。最好就是找个平台写博客,掘金、GitHub、博客园、CSDN都可以,好记性不如烂笔头,自己写一遍比看一遍好使的多。在线博客不进方便自己查阅,面试玩意碰到记不太清的知识点还能说——我博客上有总结过。2.简历不要给自己挖坑:会啥就写啥,写啥就会啥。正常的面试官都会根据简历来提问,所以简历上不要出现自己不懂的名词——不懂就去查,去背,哪怕不特别理解到时候也能说个一二三来。不然一问三不知真的尴尬。3.面试之前要转载 2021-06-16 17:12:36 · 628 阅读 · 0 评论 -
前端vue解析多重嵌套的json数据格式
1.先上数据格式看看,这数据格式让我花费了近一上午才解决的1.这是控制台带你出来的数据格式applicableFormatsQt: "[{\"storeCode\":\"012002\",\"storeName\":\"购物商场\",\"dedicatedSiteFee\":\"4254.90\"}]"2.这是复制过来的数据格式"[{"storeCode":"012002","storeName":"购物商场","dedicatedSiteFee":"4254.90"}]"3.控制原创 2021-06-12 17:39:57 · 3529 阅读 · 0 评论 -
Vue计算加减法和取小数点后两位
计算加法 methods: { subscript(){ this.a = 30, this.b = 30, this.jieguo = parseInt(this.a) + parseInt(this.b) //parseInt 取整 },计算减法 methods: {原创 2021-05-18 19:15:17 · 1854 阅读 · 0 评论 -
解析后端返回数据格式,双层for循环遍历
格式原创 2021-04-21 19:59:53 · 382 阅读 · 0 评论 -
vue写分页器
话不多说上代码 <template> <div> <el-main> <el-table :data="showList" :border="true" stripe style="width: 100%"> <el-table-column fixed prop="date" label="日期"></el-table-column> <e原创 2020-10-24 13:30:09 · 265 阅读 · 0 评论 -
Vue局部过滤器使用方法
需求:过滤API接口中的数字,不同数字转换不同等级Filters局部过滤器渲染到的数据:转换之后:代码如下: <el-table :data="tableData" style="width: 100%" > <el-table-column type="index" align="center" label="#" width="80"></el-table-column> <el-table-colu原创 2020-09-13 20:20:56 · 2429 阅读 · 0 评论 -
vue 循环根据index动态绑定css样式
一、html部分<ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)"> <router-link :to="item.path" :class="{ 'active-class': nowIndex === index }"> <img :src="item.icon原创 2020-09-11 21:38:42 · 1542 阅读 · 0 评论 -
App实现登录页面切换头像的流程
一、需求:在APP的登录操作中头像可根据用户需求自定义上传图片二、分析:技术栈.熟练em、rem、flex移动端布局.掌握原生Javascipt掌握axios请求方式三、流程:上传已有图片或拍照图片选择图片并设置图片更新图片四、项目分析:1、上传文件表单:<input type="file" accept="image/*" capture="camera" >a.type=“file” 上传文件表单b. accept=“image/*” 上传文原创 2020-08-27 21:07:46 · 2341 阅读 · 0 评论 -
Vuex数据持久化与Vant插件sass样式穿透
1原创 2020-08-24 20:56:22 · 529 阅读 · 0 评论 -
Vue的常用指令详细解析
1.自定义事件的事件名字大小写问题跟组件和 prop 不同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<my-component v-on:my-event="doSomething"></my-component>跟组件和 prop 不同,事件名不会被用作一个 J原创 2020-09-09 20:17:24 · 487 阅读 · 0 评论 -
Vue生产、开发环境如何切换及过滤器的使用
一、生产环境,开发环境切换开发环境:开发环境就是在 /config/index.js下配置proxyTable生产环境:打包项目后代理就失效啦,所以再生产环境下要重新配置一下1.第一种方法:通过配置.env文件来实现参考:https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步:通过创建不同环境js文件,再通过cross-env来切换 config dev.js prod.js dev.jsmodu原创 2020-08-19 20:39:34 · 1402 阅读 · 0 评论 -
什么是Vue及搭建的全部过程
一、认识vue-cli1、安装最新版本脚手架vue-cli官网:https://cli.vuejs.org/zh/目前版本:v4.5.x安装:npm install -g @vue/cli2.使用vue脚手架创建项目第一种命令行vue create 项目名(字母开头,不要大写) 回车default (自动安装)manually (建议:手动安装)第二种:以图形界面方式创建vue ui3.vue-cli4.5目录结构publicindex.html —入口html页面静态资源–原创 2020-09-09 20:21:15 · 301 阅读 · 0 评论 -
Vue使用PostCSS怎样使用sass
为什么要使用PostCss众所周知转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题。然后简单的介绍下。安装指令 $ npm install @ moohng / postcss-px2vw --save-dev使用方法首先创建一个.po原创 2020-09-09 20:20:26 · 943 阅读 · 0 评论 -
教你搭建基础的webpack环境(一)
一、前端构建工具gruntgulpwebpack(主流,https://webpack.js.org/)Fis3(百度)二、webpack是什么webpack 是一个现代 JavaScript 应用程序的静态模块打包器 webpack稳定版本:v4.44三、如何使用webpack搭建前端环安装node.js( v12.x)注意:如果npm安装一些包由于网速原因,安装慢切换一下镜像源改成淘宝镜像:npm config set registry https://registry.原创 2020-08-17 14:33:20 · 2350 阅读 · 0 评论 -
为什么要用深浅拷贝、什么是深浅拷贝、以及如何实现
一、深拷贝和浅拷贝首先我们要明白一点,js中数据类型分为:基本数据类型 (Number, String, Boolean, Null, Undefined, Symbol)对象数据类型 ( Object )引用数据类型的值是保存在栈内存和堆内存中的对象。栈区内存保存变量标识符和指向堆内存中该对象的指针。当寻找引用值时,解释器会先寻找栈中的地址。然后根据地址找到堆内存的实体。二、深浅拷贝的区别:浅拷贝是将原始对象中的数据型字段拷贝到新对象中去,将引用型字段的“引用”复制到新对象中去,不把“引用的转载 2020-08-15 10:01:03 · 6662 阅读 · 0 评论 -
响应式布局+Vux=小米商城列表+小米商城购物车
列表页<template> <div class="home"> <div class="header"> 头部 <div class="xia"> <button @click="jia">升序</button> <button @click="jia">降序</button> </div> </div&原创 2020-07-10 20:00:17 · 921 阅读 · 1 评论 -
电商APP:axios封装+Vuex=列表页面+详情页面+购物车
1、axios封装在src 中创建network文件夹并创建三个文件2、创建core文件放主接口 ,创建APIConfig存放数据接口,创建index文件放请求方式 ,并抛出在main.js中设定core文件//网络模块核心代码import axios from "axios";import {Loading,Message} from "element-ui";import {METHOD} from "./APIConfig";//创建配置axios实例const intance原创 2020-07-05 20:32:43 · 616 阅读 · 0 评论 -
Vue项目上传gitee 分支、合并
1、点击gitee中的“+”,看到新建仓库2、自定义名称 根据需求 选择私密和公开 进行创建3、用cmd打开vue项目所在位置 输入指令4输入成功后 vue项目上传成功5、点击分支6、点击新建分支 自定义分支名字 提交 成功后分支名出现7、先删除默认分支的 vue项目框架 然后进行克隆到分支上面 执行git clone 加地址8、切换分支 git checkout +分支名字9、修改vue 中任意文件 进行 git status(查看状态) 然后 git add . (暂原创 2020-06-29 19:49:14 · 2167 阅读 · 0 评论 -
Vue中路由封装重复使用
路由封装在router中创建两个文件 config.js和homeMoudule.js1、在config.js中写入配置路径并抛出import Home from '../views/Home.vue'const router = { home:{ path: '/', name: 'Home', component: Home }, about:{ path:"/about", name:"About", component:() =&原创 2020-06-28 19:40:34 · 255 阅读 · 0 评论 -
Vue中封装axios的GET和POST请求
在vue项目中创建一个文件夹network1.创建一个core.js文件,封装axios GET POST请求代码如下:import {GET,POST} from "./config"import axios from "axios";const instance = axios.create({ baseURL:"https://api.it120.cc",//发送请求时,会在url前拼接baseUrl timeout:8000}) //封装GET POSTexport原创 2020-06-28 19:18:24 · 1768 阅读 · 2 评论 -
todolist最简单的待办事项列表
代码展示在这里插入代码片```<template> <div class="box"> <!-- 输入框 --> Todolist <input type="text" v-model="inputValue" @keydown.enter="submit" placeholder="添加TODO" class="q1"/> <!-- 提交按钮 --> <!-- <button @cli原创 2020-06-04 20:37:21 · 1066 阅读 · 0 评论 -
Vue待办事件 实时留言事件
vue待办事项在这里插入代码片<template> <div class="about"> <input type="text" v-model="inputvalue" /> <button @click="submit">提交</button> <h3>未完成 ({{nolist.length}})</h3> <ul id="q1"> <li v-f原创 2020-06-01 20:53:47 · 272 阅读 · 0 评论