vue
深圳最菜的前端
这个作者很懒,什么都没留下…
展开
-
前端分页的实现
硬写版本(没有组件)思路:将返回的列表数据根据每页显示的数量进行切割,分别展示// html部分<div class="table"> <div v-for="(item,index) in currentPageData" :key="index"> {{item.name}} </div></div><div class="footer"> <button @click="prevPage()">上一页.原创 2022-05-27 15:32:57 · 397 阅读 · 0 评论 -
typescript学习笔记《安装使用、热更新以及基本数据类型》
安装使用、热更新以及基本数据类型安装一、热更新二、数据类型安装 npm install -g typescript一、热更新在写typescript的时候,很容易需要一个功能,就是保存后自动编译,因为typescript是不支持浏览器的,只能编译成浏览器熟悉的es5或者是es6才能被识别到,所以需要进行设置运行指令: tsc --init,安装init文件,然后在安装好的tsconfig.json文件中,找到"outDir": "./",保存后生成的js文件,然后自己修改路径,这样保存后的原创 2022-04-14 14:50:42 · 603 阅读 · 0 评论 -
对循环出来的表单,进行校验
如图所示重点代码: props<template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" prop="principal" :rules="rules.principal"> <el-input v-model="form.principal"></el-input> </e原创 2022-03-28 14:18:29 · 1245 阅读 · 0 评论 -
package.json 与 package-lock.json 的关系
模块化开发在前端越来越流行,使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块。package.json 用来描述项目及项目所依赖的模块信息。那 package-lock.json 和 package.json 有啥关系和联系呢?package.json管理包大家都知道,package.json 用来描述项目及项目所依赖的模块信息。,就是帮我们管理项目中的依赖包的,让我们远离了依赖地狱。通过 npm 管理,使用一些简单的命令,自动生成package.json, 安装包依赖原创 2022-03-25 09:34:32 · 376 阅读 · 0 评论 -
el-table合并单元格的正确食用方法
如图所示,当前的表格hover效果的时候,变成了选中2行原创 2022-03-08 14:22:10 · 2270 阅读 · 0 评论 -
vue项目配置eslint保存自动格式化
vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症1,用户设置和工作区设置2,如何找到配置文件3,setting.json4,需要安装的插件5,设置默认格式化程序在VSCode中,两个层级的设置分别为:用户设置:应用于所有工作区的全局设置。工作区设置:只对当前工作区有效的设置。相比之下,工作区设置具有更高的优先级,即当工作区设置与用户设置相冲突时,以工作区设置为准,但是一个用户设置就够了如何找到配置文件位置方法一:Ctrl + Shift + P 然后搜索..原创 2022-03-07 17:29:17 · 6277 阅读 · 0 评论 -
组件传值之数据穿透(响应式)
vue实现传值很多,什么props,provide/inject,bus,vuex,等等,但是最近遇到一个业务场景组件A是父级组件,组件B是子组件,组件C是孙子组件,关系是相互引用关系,A组件中引用了B组件,B组件引用了C组件1)那么问题来了,就是当前三个组件之间传值,用props一个传一个吗,有点麻烦,万一我嵌套四个,五个呢2)用vuex的话,又觉得大材小用了,就一个内部传值,而且就传递一个ID3)用localStorage也许是一个不错的选择,但是万一这样的场景很多呢,全部存本地也不太好S原创 2022-01-12 16:38:36 · 1010 阅读 · 0 评论 -
高德地图正确食用方法(持续更新)
刚好最近有写一些地图,但是在网上,关于谷歌地图的使用方法其实并不多,所以今天就直接记录一下初始化一个简易地图在谷歌API中,有一个简易的创建地图的步骤准备快速上手NO1:初始化...原创 2021-12-27 14:39:14 · 2607 阅读 · 0 评论 -
JavaScript localeCompare() 方法
业务中经常遇到根据某个参数进行排序对比// sort排序let data = [1,2,4,3]data = data.sort((a,b)=> b-a)console.log(data,'data') // [4, 3, 2, 1]这个是最简单的数组排序了但是往往在业务中,遇到的排序情况稍微复杂一些let listInfo = [{name: '张三',age: 13},{name:'李四', age: 15},{name: '王三', age: 12}]listInfo.原创 2021-11-19 18:28:06 · 406 阅读 · 0 评论 -
echarts使用姿势(持续更新)
好久没有更新博文了,加上最近写了很多大屏项目,用到echarts挺多的也踩了很多很多坑,刚好最近稍微有点空,就做个总结把根据返回数据来进行echarts渲染,但是会出现echarts已经渲染了,但是才拿到数据解决思路,将echarts单独提成一个组件,然后在调用页面通过ref的形式进行,实参形参的格式进行数据传递。拿到数据以后再进行渲染// echarts组件<template> <div ref="charts" class="charts"></div&原创 2021-11-08 13:34:02 · 619 阅读 · 0 评论 -
vue实现伪3D切换滚动(附代码)
今天写项目,遇到一个滚动需求,贴出来,做一个记录这个是最终的一个效果,点击左右小箭头,实现滚动效果原创 2021-07-12 11:08:32 · 940 阅读 · 0 评论 -
异步问题(记录)
执行顺序// 同步主线程 => 异步线程 => 微任务 => 宏任务 => 宏任务里再循环 => 微任务 => 宏任务//核心理解 //promise 是同步的,只有relove出去的才是异步 //promise 是微任务 //setTimeout ajax异步回调是宏任务setTimeout(() => { console.log('1') // 宏任务}, 0);Promise.relove() .then(()=> {原创 2021-06-11 11:38:26 · 66 阅读 · 1 评论 -
vue清除默认样式css表
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, e原创 2021-05-28 15:53:05 · 521 阅读 · 0 评论 -
vue自定义指令
vue中很多指令,v-modle,v-for,v-if,等等,但是因为业务需要,一般的指令已经不够了,所以可以让开发自己根据业务去新增使用vue的全局API: Vue.directive( id, [definition] )就可以完成自定义指令子定义指令钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可.原创 2021-05-28 10:08:32 · 89 阅读 · 0 评论 -
vue extend + promise封装全局弹窗组件
因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理实现后的效果// components/confirm文件<template> <div class="popup-wrap" v-if="showPopup"> <div class="popup-center"> <div class="popup-content"> <div clas原创 2021-05-27 17:57:17 · 848 阅读 · 0 评论 -
provide && inject
一般我们在vue中用的比较多的,都是子组件和父组件相互传值,或者是跨组件的vuex父子组件通信// 父组件<template> <div> <Confirm :data="btnList"></Confirm> </div></template><script>import Confirm from "@/components/confirm"export default { components原创 2021-05-25 16:20:33 · 2083 阅读 · 0 评论 -
混入mixins
具体合并策略:mixins中的data会合并到data中,有冲突的话,data中数据覆盖mixins中的数据mixins中的钩子函数也会执行,先执行mixins中的钩子函数methods、components 和 directives会执行,但有冲突时,原methods、components 和 directives会覆盖mixins中的methods、components 和 directives如何使用在src目录下,新建一个mixins文件,然后在文件下新建一个common.js//原创 2021-05-25 14:52:16 · 451 阅读 · 4 评论 -
使用vue canvs绘制圆环
很多时候,会有绘制圆环的要求,比如渐变,圆环等等所以现在封装了一个方法,可以直接绘制绘制样子大概这样的// html<div class="medium-graph"> <canvas id="medium-graph-canvas" width="292" height="292" /></div>// js mounted() { var medium_canvas = document.getElementById('medium-graph原创 2021-04-23 15:51:58 · 600 阅读 · 1 评论 -
vue-filter全局和当前页面使用情形
一般在vue项目中,使用filter过滤器,有全局和局部两种使用方式局部使用实现一个效果,将实时输入的英文首字母变成大写,如果有空格,就空格后第一个首字母大写// index.vue<template> <el-input v-model="input" placeholder="请输入内容,如果连续输入,请以空格隔开" style="width: 300px"></el-input> <span>{{ input | capitalize原创 2020-12-07 17:32:48 · 270 阅读 · 0 评论 -
Vue中登录成功保存token,并每次请求携带并验证token
在登录请求成功后,会返回一个token值,用loaclStorage保存localStorage.setItem('token',res.data.token)一般会在main.js或者是单独的request.js中设置全局请求头和响应回来的判断//设置axios请求头加入tokenAxios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localSt原创 2020-11-19 14:49:32 · 2939 阅读 · 0 评论 -
VueX(Vue状态管理模式)
一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的,所以在下文出现的项目的目录请参照VueCl原创 2020-10-13 16:44:01 · 290 阅读 · 0 评论 -
vue + element + echars柱状图
今天写管理后台,用到了一个echarts柱状图,要求在tooltips鼠标悬浮的时候,自定义展示内容如图所示:在原本的tooltips中,展示内容只有对应的数据,没有后面的百分比,这个时候就需要自定义了思路:在echars中,tooltips有一个属性叫做formatter,一般都是默认,但是它是可以写成一个方法,就是在回调中去拿到当前柱状图的所有数据信息,然后在回调里面用模板字符串来实现自定义展示内容,因为我这边业务,数据是固定的四条,所以就直接就用params[0],这种方式来取到对应的值,原创 2020-10-13 16:01:57 · 1491 阅读 · 0 评论 -
element Table el-tooltip
今天实现一个功能,要在table表格做一个el-tooltip大概长这样然后贴一下代码,做一个记录<el-table :data="statisticsTable" border style="width: 100%" :default-sort="{order: 'descending'}" @sort-change="changeStatistics"> <el-table-column fixed prop="storeName" label="门店名称" />原创 2020-09-18 17:20:12 · 2320 阅读 · 0 评论 -
vue储存storage时含有布尔值的问题
今天遇到一个问题,需要将后台返回的true和false存到storage中去,然后用储存的这个值进行逻辑判断,但是一直判断都是错误的,后面查阅了一下资料才发现在localstorage中储存数据的时候,储存的boolean值都会变成字符串,而不是刚开始储存进去的boolean值都变成了字符串那么怎么解决呢一:前端进行一次转化if (localStorage.getItem('布尔值') == 'true') { // 重新赋值为新的值 '布尔值' = true}或者是在储存的时候,原创 2020-08-15 15:55:03 · 919 阅读 · 0 评论 -
this.$set() vue + element
这几天写管理后台,遇到一个问题,刚好记录一下以下是功能截图这个功能是放在一个弹窗中的,截图的位置是一个数组,点击添加一个tag,就新增一个对象,删除tag,就删除了这个数组对应的那个对象,关闭弹窗的时候,需要将整个数组清空,并且还原成图一的样子// 点击新增tagaddStep: function () { this.form.experts.push({ fileLists: [], avatar: '', name: '',原创 2020-08-13 10:20:16 · 1050 阅读 · 0 评论 -
[Vue warn]: Cannot read property ‘getAttribute‘ of null“
今天遇到一个这个问题记录一下运行vue出现的问题,后面网上搜了一下,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的说直接点就是加载顺序的问题,然后找到了一个解决办法,使用vue的ref和$refs来解决一般的写法,都是使用ID去绑定,比如// html<div id="charts"> // xxxx</div>// jsdrawCharts () { let previewChart = this.$echarts.init原创 2020-08-06 15:36:14 · 1132 阅读 · 0 评论 -
vue 定义和修改全局变量
// main.jsnew Vue({ el: '#app', router, store, render: h => h(App), data: ()=>{ return { ISROOT: '13', // 全局变量 } }})如何修改和使用呢this.$root.ISROOT = '15' // 进行修改let newRoot = this.$root.ISROOT // 使用有一个坑如果我在页面修改了全局变量并且进行原创 2020-07-29 17:48:45 · 1532 阅读 · 0 评论