- 博客(43)
- 收藏
- 关注
RSS订阅原创 watch深度监听失效解决方案以及原因
总结：watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。案发情况：首先，watch监听一般都这么写：watch: { obj(newVal, oldVal) { // todo console.log(newVal, oldVal) }}复制代码但是w...
2021-12-07 15:08:06
6977
4
原创 vue或者ui组件table中render函数配置，超简单一目了然
前端-vue-render函数的渲染总结：// render配置render: (h, param) => { return h('h-button', { // 与 `v-bind:class` 的 API 相同， // 接受一个字符串、对象或字符串和对象组成的数组 class: { hiddenDom: true, showDom: false }, ...
2021-11-20 13:19:55
1497
原创 前端-插件-数据精度以及计算
总结： 如果要进行公式计算： math.evaluate('1.2 * (2 + 4.5)') // 7.8复制代码 实现高精度： import * as math from 'mathjs'// 正常的使用，仍旧会出现这种情况0.1 + 0.2 // 0.30000000000000004math.add(0.1, 0.2) // 0.30000000000000004// 使用format即可实现高精度const ans =..
2021-11-20 11:17:19
857
原创 前端-vue3-vue3相比vue2改了啥
vue的初始化改了：// 旧版let vm = new Vue({ el: '#app', data: {}})// 新版，且data必须为function了createApp({ data() { return {} }}).mount('#app')复制代码常用部分的改动新增部分:vue3新增的最大亮点就是新加了setup，几乎替代了data，methods，mounted等生命周期，且setup中无法访问this 新增...
2021-10-14 14:01:05
457
原创 前端-规范-elint代码格式化
eslint配置文件// .eslintignore文件// 不检测iconfont.js文件**/iconfont.jsroot = true [*]charset = utf-8end_of_line = lfindent_size = 2indent_style = spaceinsert_final_newline = truetrim_trailing_whitespace = true复制代码常见命令自动格式化修复src文件夹下文件：eslint -
2021-09-18 13:38:56
181
原创 前端-规范-js，css，html，vue，文件夹等命名规范
文件部分 文件夹： 小驼峰，尽量简洁，一眼能看出什么用处内容，示例：user, userSetting 文件名(js/css/vue/jsx/png)： 小驼峰，示例：userSetting.js/css/vue/jsx/png js部分 模块，组件，类名： 大驼峰，示例：MyTestName js常量： 大写，多个单词中间用下划线，示例：MY_TEST_NAME js方法名： 小驼峰，尽量语义化，可动词前缀，示例：getTable.
2021-09-18 13:25:57
270
原创 前端-js-数组对象去重方法
数组对象去重题目：// 输入[false, true, 1, 2, '1', '2', {}, {}, NaN, NaN, undefined, null].uniq();// 获得[false, true, 1, 2, '1', '2', {}, {}, NaN, undefined, null]解决方法：方法1：Array.prototype.uniq = function () { // 先排除不符合条件 if (!this.length || this.length
2021-03-01 21:40:01
438
原创 功能实现-解除页面禁止复制禁止转载功能
功能实现-解除页面禁止复制功能解除页面禁止复制功能起源：今天照例进行日常总结，在查找资料进行ctrl+c加ctrl+v时，发现知乎的页面竟然禁止转载了，也就是对复制做了拦截， 需要登录才可以复制，然而我们公司因为安全的原因，知乎以及很多网站是无法登陆，那咋办？都是前端开发，同行就别这样啦。后续发现知乎不是所有内容都是禁止转载的，只有设置了禁止转载的内容才禁止复制，普通内容在复制后会加上版权以及来源前端实现禁止复制功能的方法，目前就两大类通过js阻止复制功能实现禁止复制。
2021-01-25 22:16:20
2721
1
原创 vue-鉴权的两种方法之路由拦截
vue中鉴权的两种方法常用的鉴权有两种：一种是路由拦截，一种是动态路由。路由拦截通过vue-router的beforeEach方法进行每一次路由访问的拦截，判断拦截信息中是否有鉴权要求或者权限校验，以此来实现鉴权。如果权限不够，访问的路径虽然存在但会被拦截。动态路由在登录后根据用户信息以及权限动态地添加正确的权限路由，如果权限不够，访问的路径是不存在的。比较路由拦截实现起来相对简单，只需在登录的时候保存用户权限信息，然后编写路由的时候将需要鉴权的路由加上权限信息，然后在beforeEach拦
2020-11-09 22:26:42
5799
原创 vue中Cannot read property '_wrapper' of undefined 报错
出现这个报错，是你@click的方法没有在methods中定义，很奇葩的报错，竟然不会定向到具体哪行。
2019-07-12 13:05:44
11559
2
原创 element的el-scrollbar的使用方法
element本身是没有将这个写在文档里的，但是在使用各组件时还是经常要用的。不过偶然发现类似以下：只有在组件中增加style="overflow-y:auto"即可实现y轴超出出现滚动条的效果，同理x轴 <el-menu style="overflow-y: auto;" :default-active="menuActive" :...
2019-06-28 16:50:17
5940
原创 vue的keep-alive的正确用法
keep-alive的正确用法实现：我有3个页面，一个index页面，包含点击进入分类sort页面和进入详情detail页面两个功能一个sort页面，包含上划加载，进入详情detail页面两个功能一个detail页面，展示页面详情我要实现的：从index点击进入detail页面，回退仍旧处于之前进入的位置；点击进入sort页面，回退仍旧处于之前进入的位置；点击进入sort页面...
2019-06-25 22:44:14
3476
转载 【转】如何实现一个下载进度条/播放进度条
如何实现一个下载进度条/播放进度条：https://juejin.im/post/5cfcd4c5f265da1bb13f246e
2019-06-19 13:58:29
502
原创 css动画--硬币旋转
纯css样式的硬币旋转效果图思路利用transform的rotate进行旋转，利用transform的translateZ进行视觉差部署。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>硬币旋转动画<...
2019-06-13 16:59:48
3456
原创 用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西，早写总比晚写好。趁没事先写个。思路一个音乐播放器该有的东西：封面，歌名，专辑，作者控制器（上一首，下一首，暂停播放）进度条（总进度，缓存进度，播放进度，播放时间，总时间，进度拖拽按钮）播放方式（单曲循环，顺序播放，随机播放，列表循环）声音（总声音长度，当前声音长度，声音长度拖拽按钮）播放...
2019-06-11 13:46:09
12076
6
原创 开发工具vscode-总结
vscode-插件chinese: 中文语言包vscode-icons：文件图标包One Dark Pro：暗色主题Beautify：代码美化自动对齐，对齐线ESLint：语法检测Debugger for Chrome： 调试工具Code Runner：万能语言运行环境，配置后各种开发语音无需再配置环境Document This：快速注释ntelliSense for CSS ...
2019-06-06 16:55:26
281
原创 前端处理文件流下载文件超级超级超级简单的方法
今天后端让帮忙做个导出excel的功能，ok。后端提供的数据：接口：content/scale/downloadExcel参数为：chnlCode=xxx前端处理：// 调用该方法，传入chnlCode即可实现文件流下载function downloadExcel(chnlCode) { let url = '/content/scale/downloadEx...
2019-05-30 16:57:47
1584
1
原创 h5微信分享js
这是一个接微信sdk实现的分享js// wxShareSDK.jsimport {getWeixinSign} from "@/api/share"; // 获取微信签名的api接口，即后端接口，通过请求该接口获取微信分享所需的微信签名信息// 微信sdk分享export function jssdkConfig(shareParams){ var _this = this;...
2019-05-30 10:48:14
563
原创 vue之重读文档，记录一些比较重要的东西
v-model和v-bind的理v-model：双向绑定v-bind：单向绑定修饰符.stop 阻止事件继续传播，向上或向下.prevent 阻止默认事件.capture 捕捉事件，先在本元素上处理，然后向下传递.self 捕捉事件，只在本元素上处理.once 只启动一次.passive按钮修饰符常用于登录回车提交或者搜索提交<input type=...
2019-05-30 10:30:33
162
原创 vue之mixin，component，slot的真正用法
引子最近刚好重读vue文档，发现了自己之前不用的mixin混入，才发现以前重复写的代码是多么愚蠢。对于现在的vue来说，dom结构重复的话可以用组件封装，js方法重复的话可以用mixin混入，css重复的话可以用@import引入，那么，当你开发一个功能相似，ui布局相差不多的页面时，只需抽取重复部分，一个超级简单的即插即用的代码模块就这么诞生了！！！例子比如我们写多个根据渠道判定ui以及...
2019-05-30 10:02:28
1597
原创 vue之自定义组件的制作，简单到你怀疑人生
最近项目做完了，闲来无事，重新读了一遍vue官方文档，发现了以前很多没有的东西以及自己没注意的方法。自定义组件就相当于方法封装，在写项目遇到像类似的代码，第一想法就是我得把它封装起来，其实自定义组件也差不多。废话不多说，我们开始吧。首先，要有思路：官方提供了自定义组件接收参数的方法---prop，以及向外传递信息的方法---$emit，既然对外互通的方法有了，那么方法就一目了然了，...
2019-05-29 18:05:02
2222
原创 vue之超简单的自定义插件的制作原理
引子：读到vue官网教程的最后一课：插件，教学有点简单，看完比较懵逼，所以找了大神的资料作为参考：参考资料： 官方：https://cn.vuejs.org/v2/guide/plugins.html 大神劳卜：https://www.cnblogs.com/luozhihao/p/7414419.html解读：插件不同于组件，官网中的组件为Vue....
2019-05-29 18:04:00
431
原创 vue-cli3学习第六节之超级简单的优化打包后的体积以及首页加载
推荐一首歌：「SwallowtailButterfly～あいのうた～」from消滅都市(TVsize) --------花澤香菜写这篇的时候其实我项目还没写完，不过突然想写了，就先写着吧。先给项目打个包，200kb的总体积，相对很多项目已经很小了，但是既然还有更小的方法，为什么不用呢？如何来用？首先，项目中很多框架比如vue，vue-router，polyfill，ax...
2019-05-28 18:12:00
1318
原创 vue-cli3学习第三节之引入各种插件
简单的环境配置好后，那么就开始引入所需要的插件了，个人常用的插件有：vant（前端ui框架），axios（请求插件），Cookies（cookie存储方法封装）一般项目有着3个几乎就够了，毕竟babel转码，vue-router已经自动装好了。vant安装：https://youzan.github.io/vant/#/zh-CN/quickstart 请看官网axios安...
2019-05-27 17:44:28
2746
原创 vue-cli3学习第四节之请求方法，路由跳转的封装和统一拦截
在项目中，接口请求是一定会出现的，那么相对的，对接口请求的方法封装也是必要的。本方法请求使用的aixos插件，封装：// src/utils/request.js// 封装了axios的请求方法，完善请求前后拦截以及加载动画// router用于路由跳转// common.js中存放着各种公共方法，和request.js同级目录// 加载动画Toast使用的是有赞的ui框架v...
2019-05-27 17:43:09
2824
1
原创 vue-cli3学习第二节之配置开发dev，测试test，正式pro三种环境
项目空壳已经搭建完成，在写代码前先配置3个环境吧。根据官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F我们需要在根目录下增加几个文件（txt格式即可，命名不要随意，官方提供的是这种）：在.env中，写入必要的配置信息和项目需要的信息：NODE_ENV = "base"VUE_AP...
2019-05-27 15:36:34
4322
原创 vue-cli3学习第一节之构建一个vue-cli3项目空壳
vue-cli3已经出来很久了，查了下官方的github，最早的是3.0.0-alpha.1 (2018-01-25)，我写这篇文章的时间是2019.05.27，经过时间的沉淀，一些坑也都填的差不多了，而且我所接触的前端开发有用vue-cli基本上也都上3.x版本了，乘着项目刚做完，我也学习下3.x版本的。这是一套笔记，用于记录我在学习中的坑以及不明白的地方，也是给我一些还没入手vue-cli3....
2019-05-27 14:56:40
286
转载 小程序自定义组件的坑： thirdScriptError sdk uncaught third Error Cannot read property 'name' of undefined
转自：https://blog.csdn.net/qq_23375733/article/details/81229223首先这个问题是由于你使用了自定义组件引起的，然后小程序规定自定义组件中的js文件中的properties属性中的值必须规定属性的类型（必填）。...
2019-04-19 15:23:01
3861
原创 seo优化-前端代码方面
公司最近app项目生成了，但是没什么量，于是做了个官网希望搜索引擎能录入引入点量，那么就需要做seo了，说到做seo，那么就需要右键源代码了，额，我的代码呢？哦，我用的vue-cli单页面渲染，只有一个简单的index.html，汗个不过听说有vue 的ssr，虽然不怎么会，不过代码千万行，01就一行，敲就完事了，什么？3天搞定官网并提测，测试2天就上线？行吧，毕竟功能简单，就是跳跳跳，渲染...
2019-04-17 14:50:47
340
原创 h5与app交互产生的各种bug汇集
1.分享地址中带#导致app获取分享地址错误或只取到一半导致的bug：例子：这种bug常见于使用vue-cli开发于app交互产生的，比如我的分享地址为：www.aa.com/test/index.html#/login?chnl=123， 而app获取到的只有www.aa.com/test/index.html，那么只需修改地址为www.aa.com/test/index.html?t=1#/...
2019-04-17 14:31:38
382
原创 vue-cli2.x配置开发，测试，生产环境，打包后无报错正常运行
最近项目比较紧，但是ui又没出，本来打算跟着原型先敲，结果瞥了一眼被咔嚓掉的上一版ui，溜了溜了，这特喵明明是两个项目啊，产品，你给我出来，我保证打不死你(ー`´ー)。在等新ui的时候无聊，刚好想起之前vue-cli2.x开发时一直没配测试环境，刚好弄下吧，于是百度了，是的，有现成的我就抄现成的了，我就是这么偷懒，然后找了百度前几个测试了下，好吧，我觉得吧，自己写的才是最合适的。为了通用性...
2019-03-20 17:41:53
3714
1
原创 seo优化-前端代码方面
公司最近app项目生成了，但是没什么量，于是做了个官网希望搜索引擎能录入引入点量，那么就需要做seo了，说到做seo，那么就需要右键源代码了，额，我的代码呢？哦，我用的vue-cli单页面渲染，只有一个简单的index.html，汗个不过听说有vue 的ssr，虽然不怎么会，不过代码千万行，01就一行，敲就完事了，什么？3天搞定官网并提测，测试2天就上线？行吧，毕竟功能简单，就是跳跳跳...
2019-02-27 18:03:29
621
转载 【转载】vue项目中配置favicon图标
vue项目中配置favicon图标转载于-csdn-xum222222-原文地址如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。不配置是这样子的：favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（...
2018-09-05 14:23:35
224
转载 【转载】vue优化-页面加载时间-代码分割从三方面来选择
VueJS + Webpack 代码分割的三种方式转载自-搜狐-搜狐号：web前端开发，原文地址2017-09-19 21:44程序设计/搜狐对单页应用实行代码分割，是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码，能够更快的看到页面并进行交互，这将会提升用户体验（特别是在移动端）；同时因为 Google 会给加载缓慢的网站降权，代码分割也对 SEO 有...
2018-09-04 13:58:35
1222
转载 【转载】charles的安装
charles的使用 夏天的吃瓜群众 关注2018.01.12 15:19 字数 5059 阅读 54374评论 8喜欢 57转自-简书-夏天的吃瓜群众-原文链接一、charles的使用1.1 charles的说明Charles其实是一款代理服务器，通过过将自己设置成系统（电脑或者浏览器）的网络访问代理服务器，然后截取请求和请求结果达到分析抓包的目的。该软件是用Java写...
2018-09-03 14:04:46
180
转载 【转载】vue-router路由懒加载（解决vue项目首次加载慢，长时间白屏）
vue-router路由懒加载（解决vue项目首次加载慢）本文转自博客园-李俊涛-原文地址懒加载：----------------------------------------------------？ 也叫延迟加载，即在需要的时候进行加载，随用随载。为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进...
2018-09-03 11:50:11
4162
原创 input搜索框实时检索功能实现（超简单，核心原理请看思路即可）
问题：实现input搜索框实时检索的功能，类似哔哩哔哩首页搜索功能。公司要求，emmmm没办法，果然懒人是要被赶着走才会进步的说，诶嘿O(∩_∩)O。解决方法： 1.参考资料：http://www.jb51.net/article/111408.htm 基础思路 http://blog.sina.com.cn/s/blog_69ec42d5010...
2018-05-22 19:49:08
77159
23
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人