- 博客(238)
- 收藏
- 关注
RSS订阅原创 js将时间戳转为时间日期格式
封装方法 getBeforeDate(num, time) { let n = num; let d = ''; if(time) { d = new Date(time); } else { d = new Date(); } let year = d.getFullYear(); let m.
2021-07-08 10:58:52
1122
原创 如何从数组对象中取出一个值存放在数组中
// 获取勾选内容 handleSelectionChange(val) { //当前选中勾选的数组对象 console.log(val) // 数组对象 // eslint-disable-next-line no-unused-vars let arrCode = []; //定义数组 val .map((item) => { //遍历当前的数组对象 arrCode.push(item.p...
2021-07-08 10:43:00
3969
原创 接口返回多个数组对象的方法
mounted() { // 列表参数获取 以及后面传递参数给后台 这里返回过来的上一个数组对象 this.queryList = this.$route.query.list; console.log(this.queryList) }, methods: { batchPushBtn() { // 定义方法 let timeArr = []; // 定义一个数组存放多个数据对象 this.queryList.forEach((item)=>{ ..
2021-07-08 10:25:05
1309
原创 Vue在父组件中改变子组件内的某个样式
<template> <div class="cont"> <footEr></footEr> </div></template><script> import footEr from '../../components/foot.vue' components: {footEr}</script> <style scoped>.
2021-06-09 11:41:33
943
原创 遮罩层出现后不能滚动 添加事件@touchmove.prevent 移动端中的坑和 vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
<div class="maskshow" @click="hidden_video" @touchmove.prevent></div>.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改变js默认的事件机制,默认是..
2021-05-19 12:19:29
7774
1
原创 PC端页面各种状态下的布局
PC端常见的布局技术:一：水平居中1：margin:0 auto ; 自动居中.text{ width: 200px; margin: 0 auto;}优点：兼容性好缺点: 需要指定宽度2：使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元素3：使用table实现.child{.
2021-04-29 09:43:15
1515
原创 echarts 各个配置项详细说明总结
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a'.
2021-04-27 10:16:42
272
原创 总结vue2.0与vue3.0的区别，让你快速上手
1:vue3.0和2.0的区别2.0数据双向绑定方面Vue2.0使用Object.defineProperty原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知// 数据let data = { title: '', // 备份数据 _data: {}}// 定义特性Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取
2021-04-21 11:03:09
31528
14
原创 vue-cli 3中dart-sass替换node-sass
Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代！使用dart-sass代替node-sass，不管你是否使用dart-sass，建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法而且它还是 vue 3.0 中指定的写法。而且原本 /deep/ 的写法也本身就被 Chrome 所废弃使用方法为什么要替换?node-sass仓库在墙外, 且新特性都会先在dart-sass实现怎么替换?
2021-03-23 16:21:08
2762
原创 常用javascript方法封装
1、输入一个值，返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele])
2021-03-02 15:56:55
231
原创 前端性能优化总结
前端指标1、FP，First Paint。2、FCP，First Content Paint。3、FMP，First Meaning Paint。4、ATF，Above The Fold，首屏时间5、TTI，Time To Interact，首次交互时间，可以用DomReady时间。6、资源总下载时间。Load时间 >= DomContentLoaded时间（1）Dom加载完时间，DomContentLoaded。（2）页面资源加载完时间，Load，包括图片，音视频等异
2021-02-19 10:58:46
421
原创 JS中将对象转化为数组
JS中将对象转化为数组前言其实这本来应该是一个很基础的问题了，但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来，但最近再遇到这个问题时竟然又卡主了，所以，关于这个问题，如何把一个对象{'未完成':5, '已完成':8, '待确认':4, '已取消':6}转为[{"未完成":5},{"已完成":8},{"待确认":4},{"已取消":6}]，你已经知道如何操作了，那这篇文章你也就没有必要看了。对象的两种取值方式我们都知道，JS中对象有两种取值方式，通过在.后面直接加属性名取
2021-02-02 09:41:30
1497
原创 Font-AweSome小图标在Vue中的使用
Font-AweSome在Vue项目中的使用看到网上许多的无法使用了，特地来更新一下,图标代码直接在网站里复制更具体的使用官网和其他文章很详细，这里就不再讲Font AweSome中文网.官网安装项目依赖1. npm npm i font-awesome -S2. yarnyarn add font-awesome -S在main.js中引入import 'font-awesome/css/font-awesome.min.css'Vue中使用..
2021-01-29 10:52:18
381
原创 CORS实现跨域资源共享 古老的jsonp ES6本地跨域代理
背景现在的前端开发中都是前后端分离的开发模式，数据的获取并非同源，所以跨域的问题在我们日常开发中特别常见。其实这种资料网上也是一搜一大堆，但是都不够全面，理解起来也不够透彻。这篇文章就结合具体的示例代码以及之前分享的PPT进行整合将跨域的原理梳理一遍。跨域的基本概念什么是跨域，什么时候产生跨域，相信大家都是知道的。咱们这里就长话短说了。不要觉得我夸张了，我是为了强调，强调，强调！！!^_^浏览器为了一定的安全因素，增加了同源策略。有违同源策略的操作都是被禁止的，这个时候就会发生我们.
2021-01-26 14:33:16
228
原创 前端组件化是个撒？
在了解模块化、组件化之前，最好先了解一下什么是高内聚，低耦合。它能更好的帮助你理解模块化、组件化。高内聚，低耦合高内聚，低耦合是软件工程中的概念，它是判断代码好坏的一个重要指标。高内聚，就是指一个函数尽量只做一件事。低耦合，就是两个模块之间的关联程度低。仅看文字可能不太好理解，下面来看一个简单的示例。// math.jsexport function add(a, b) { return a + b}export function mul(a, b) { retur
2021-01-26 14:16:01
143
原创 js遍历对象的几种方法
第一种： for......inconst obj = { id:1, name:'zhangsan', age:18} for(let key in obj){ console.log(key + '---' + obj[key]) }输出结果：第二种：1）、Object.keys（obj）2）、Object.values（obj）参数：obj：...
2021-01-09 11:00:06
597
1
原创 移动端手写tab栏
Demo使用Vue.js实现javascriptnew Vue({el: "#app",data: {//可以手写 可以掉后台接口 二选一eleFileList: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄', '守望先锋'],activeName: '', //选中样式}, //获取接口中的内容mounted() { if (Array.isArray(this.eleFileList) &am.
2021-01-05 17:44:12
481
转载 vue项目如何刷新当前页面
1.场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。2.遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好3.解决方法provide / inject组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。App.vue:声明reloa..
2020-12-25 10:43:48
969
原创 [Vue] 解决vant 无法修改组件的样式问题
首先我们应该知道在scoped里修改是无法做到修改vant样式的，这是外部引入的样式，下面的方法可以解决修改vant样式的同时，使用scoped，防止样式污染第一种：加上父级自己定义的类名.common-container >>>（只作用于css）<style lang="scss" scoped> .common-container >>> .van-pull-refresh__head { color: #fff; }</st.
2020-12-21 10:38:42
2222
原创 Vue无缝滚动
演示展示：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-defaultgithub地址https://github.com/chenxuan0000
2020-12-11 14:55:10
140
原创 Invalid prop: type check failed for prop “orderId“. Expected Number with value 572, got String with
解决组件路由当进入新的页面的时候在会跳回来就出现这种问题用户首次进入未报错当用户点击图片进入新的页面回退回来组件与组件中的传值 当点击展示图片的时候 会跳回来就出现类型强制转换的问题解决办法强制类型转换...
2020-12-02 15:05:32
749
原创 三元表达式多个条件判断
{this.state.walkclassdetailinfo.sexType == 1 ? '均衡' : (this.state.walkclassdetailinfo.sexType==0?'--':'不均衡')}sexType=0 输出 --sexType=1 输出 均衡sexType=2 输出 不均衡var a = 3;var b = a === 1 ? '是1' : (a === 2 ? '是2' : '不是1也不是2')console.log(b); //不是1也...
2020-11-26 14:39:14
3838
原创 vuex重置所有state
在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法：1、页面刷新：window.location.reload()这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，所以我尝试之后就放弃了。2、写一个重置的方法然后调取actions.resetVuex = function() {store.commit(stat..
2020-11-23 11:17:04
2604
原创 封装函数 获取url中的参数值
functiongetUrlkey(url){varparams={},arr=url.split("?");if(arr.length<=1)returnparams;arr=arr[1].split("&");for(vari=0,l=arr.length;i<l;i++){vara=arr[i].split("=");...
2020-11-18 10:14:23
488
原创 JS将两个数组合并成一个对象
将两个数组合并成一个对象数组 let options = []; let times = [30, 60, 120, 300, 420, 540, 720, 900, 1200]; let timesDesc = ["30分钟", "1小时", "2小时", "5小时", "7小时", "9小时", "12小时", "15小时", "20小时"]; options=[ { time: 30, time
2020-11-11 15:13:41
5299
原创 vue中的报错 The node before which the new node is to be inserted is not a child of this node.
The node before which the new node is to be inserted is not a child of this node.今天上线打完包在线上跑，点击element的下拉筛选框突然卡死，控制台报上面的错误vendors~app.f874c403.js:58 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be
2020-10-29 16:07:23
3565
原创 vue3.0总结
vue3.0beta 版本已经发布有一阵子了，是时候上手体验一波了～注意，本文所有演示都是基于 vue3.0 beta 版本，不保证后续正式版 api 不改动。等官方文档出来后，以官网为准。环境搭建直接使用脚手架，如果本地没有安装的可以执行脚手架安装命令：npm install -g @vue/cli如果本地安装过的，可以尝试更新一下：npm update -g @vue/cli测试 vue-cli 版本：vue -V@vue/cli 4.4.1接下...
2020-10-26 14:13:13
611
4
原创 vue3.0中setup使用
一、setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
2020-10-26 11:07:39
65106
37
原创 【Vue】前端规范及工程化
关于前端规范及工程化的分享,具体按自己实际需求而定Github1.前端规范1.1工作流规范1.1.1 版本号规范主版本号：当你做了不兼容的 API 修改， 次版本号：当你做了向下兼容的功能性新增， 修订号：当你做了向下兼容的问题修正。1.1.2 版本控制规范参考git flow协作流程,以功能为主要自下而上的开发流程规范。master(production分支): 只合并其他分支，不能在此分支上开发修改代码，此分支是发布到最近的生产环境中的分支。 develop(开发分支
2020-10-12 16:52:26
270
原创 webpack 中 Module build failed (from ./node_modules/babel-loader/lib/index.js): 的错误解决
在命令行用npm run serve运行vue项目时，一直出现 error in main.js错误Cannot find module '@babel/compat-data/corejs3-shipped-proposals’执行npm install @babel/compat-data 后这个错误就解决了。如果执行继续报错Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Error: Node
2020-10-09 15:40:37
5194
6
原创 SourceTree安装与使用
SourceTree安装与使用 一、简介：一个用于Windows和Mac的免费Git客户端。Sourcetree简化了如何与Git存储库进行交互，这样您就可以集中精力编写代码。通过Sourcetree的简单Git GUI可视化和管理存储库。官网下载地址：Sourcetree | Free Git GUI for Mac and Windows本文介绍的版本为sourcetree 2.5.5;二、使用方法1、安装下载完成后，在安装SourceTree的过程中，需要通过账户登录，但注册或登录.
2020-10-08 23:10:18
753
原创 面试题:从用户在浏览器输入域名,到浏览器显示出页面,这中间发生了什么(工作过程)?
一种解释方式：1.在浏览器中输入地址,如:www.baidu.com2.向DNS服务器查询网站IP地址3.DNS服务器返回网站IP地址(如:119.75.217.56)4.浏览器得到IP地址后.浏览器会把用户输入的域名转化为HTTP服务请求5.服务器接收到请求后,返回网页信息6.客户端浏览器将这些信息组织成用户可以查看的网页形式另一种：浏览器从URL中解析出服务器的主机名； 浏览器把服务器主机名转换为服务器的IP地址； 浏览器从URL中解析出与服务器端通讯的端口号（如果存在）.
2020-09-23 14:05:12
1096
原创 字符串截取slice substring substr的区别
slice()定义和用法slice() 方法可从已有的数组中返回选定的元素。string.slice(start, end)提取一个字符串string.substring(start, end)提取一个字符串,end不支持负数string.substr(start, len)提取一个长度为len的字符串1、slice和substring接收的是起始位置和结束位置(不包括结束位置)，而substr接收的则是起始位置和所要返回的字符串长度。直接看下面例子： var...
2020-09-23 13:51:09
353
原创 vue传递路由的三种方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.
2020-09-23 13:39:39
342
原创 跨域请求代理
解决问题：在本地了开发中，使用线上的数据。url的前三个部分的改变，都会产生跨域的问题，所以webpack-dev-server提供了一些配置，可以解决跨域请求的问题在webpack.config.js中，通过devServer属性来定义webpack-dev-server的配置host 定义域名post 定义端口号open 是否打开浏览器proxy： 定义请求代理，是一个对象key 表示请求地址value 是一个对象，是对该请求的代理配置target 表示目标地址p
2020-09-22 23:01:01
759
原创 vue自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name<template> <div class="hello"> <div v-test='name'></div> </div></template><script>export defau
2020-09-22 22:28:17
99
原创 vue中v-solt插槽的使用
具名插槽slot与v-solt插槽使用插槽分成两步。第一步 在组件元素内。为其它元素设置插槽名称。通过slot属性设置。第二步 在组件模板中，通过slot组件，使用这些元素。通过name属性指令插槽名称如果没有设置name属性，默认会使用剩余的元素。使用插槽的时候，默认会引入slot属性所在的元素，不想引入该元素，我们可以使用template模板元素。使用template模板元素的时候，在新版本中，建议用v-slot指令代替slot属性此时为插槽定义名称的语法是冒号语
2020-09-22 22:18:43
1212
原创 vue组件通信
对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。props和$emit(常用) $attrs和$listeners 中央事件总线（非父子组件间通信） v-model provide和inject $parent和$children vuex1.props和$emit 父组件向子组件传 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的.父组件向子组件通信分成两步第一步 为子组件..
2020-09-22 00:21:13
136
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人