起个类名好难的博客

原创 学好Vue的基础--Vue源码解析（二）

nextTick注：本系列文章是对Vue源码学习的一个总结笔记，如有侵犯您的隐私请联系我修改或者删除。 参考书籍：vue权威指南本文笔记整理以及原理参考博客：Vue $nextTick 原理、vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制、Vue.nextTick 的原理和用途。nextTick的由来：vue实现响应式并不是数据发生变化之后DOM立即变化，而是等同一事件循环中所有的数据变化完成后，再统一更新。这也是Vue的一个重要的概念：异步更新队列（JS运行

原创 学好Vue的基础--Vue源码解析（一）

注：本系列文章是对Vue源码学习的一个总结笔记，如有侵犯您的隐私请联系我修改或者删除。 参考书籍：vue权威指南Vue.js内部封装的 util 为开发者提供了一些常用的工具方法,这是开发爱着可以避免额外引入第三方框架增加代码量。util共包括以下六部分：env (env.js)什么是env?度娘上是这样解释的：env是一个外部命令，用来列出所有的环境变量及其赋值。系统判断inBrowser判断是否为浏览器环境，源码如下： export const inBrowser .

转载 css绘制三角形

文章转载于https://www.jb51.net/article/42513.htm

原创 LeetCode每日一题

来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/top-k-frequent-words著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。正文给一非空的单词列表，返回前 k 个出现次数最多的单词。返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率，按字母顺序排序示例 1：输入: [“i”, “love”, “leetcode”, “i”, “love”, “coding”], k = 2 输出: .

转载 15个非常著名JavaScript数组方法，每个前端开发人员都应该知道

转载于微信公众号：web前端开发链接地址：15个非常著名JavaScript数组方法，每个前端开发人员都应该知道数组是所有用于存储不同元素的语言中的特殊变量。JavaScript数组包含一些内置属性，每个JavaScript开发人员都应该知道如何使用它们以及何时何地使用它们。我们可以根据需要使用它们来添加，删除，迭代或操作数据。每个开发人员都应该了解一些基本的JavaScript数组方法。1、some（）方法此方法检查数组至少有一个元素是否满足参数函数检查的条件。<script>.

原创 leetcode每日一题打卡

给定一个包含 n + 1 个整数的数组 nums，其数字都在 1 到 n 之间（包括 1 和 n），可知至少存在一个重复的整数。假设只有一个重复的整数，找出这个重复的数。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/find-the-duplicate-number著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。正文：给定一个包含 n + 1 个整数的数组 nums，其数字都在 1 到 n 之间（包括 1 和 n），可知

原创 笔记--重学前端（三）

JavaScript面向对象本文为：winter 发布在极客时间 【重学前端】系列课程的的笔记和总结。请您支持正版：[极客时间–重学前端][1]。正文什么是面向对象？1、对象并不是计算机领域凭空造出来的概念，它是顺着人类思维模式产生的一种抽象（于是面向对象编程也被认为是：更接近人类思维模式的一种编程范式）。2、 在人类思维模式下，对象究竟是什么？对象这一概念在人类的幼儿期形成，这远远早于我们编程逻辑中常用的值、过程等概念。在幼年期，我们总是先认识到某一个苹果能吃（这里的某一个苹果就是

原创 笔记--重学前端（二）

##JavaScript类型本文为：winter 发布在极客时间 【重学前端】系列课程的的笔记和总结。请您支持正版：极客时间–重学前端。###正文在此节课程，首先提出几个JavaScript类型相关的问题列表项目：   - 为什么编程规范要用void 0 代替 undefined ?   - 字符串有最大长度么?   - 0.1+0.2=0.3么?为什么javascript里面不是这样的?&

原创 笔记--重学前端（一）

##前端知识体系架构本文为：winter 发布在极客时间 【重学前端】系列课程的的笔记和总结。请您支持正版：极客时间–重学前端。###正文     前端的知识在总体上分成基础部分和实践部分，基础部分包含了 JavaScript 语言（模块一）、CSS 和 HTML（模块二）以及浏览器的实现原理和 API（模块三），这三个模块涵盖了一个前端工程师所需要掌握的全部知识。###JavaScript    &

转载 避免在JavaScript代码中使用if语句的方式方法

本文转载至微信公众号web前端开发的文章避免在JavaScript代码中使用if语句的方式方法原文链接地址在JavaScript代码中使用if语句，会让人有时候觉得很痛苦。 其实，在很多地方，我们可以不需要它们。我们可以将if语句替换为其他类型的代码，以使我们的代码更短，更清晰。在本文中，我们将探讨可以在JavaScript代码中替换if语句的地方。三元运算符如果我们要返回具有一个条件的一个事件，否则返回其他东西，则三元运算符很有用。 例如，我们可以这样写：const bar = fo

转载 一篇文章教你写css动画效果

刚刚看了一个不错的博客，一个大佬用css写的漂亮的动画效果，特此转载分享一下。原文地址：我写CSS的常用套路

转载 webpack打包vue项目，资源从绝对路径改为相对路径以及css中的图片资源如何修改配置

转载 https://www.cnblogs.com/LChenglong/p/10309501.html

原创 fabric.js学习（三）之 使用远程图片地址的跨域问题

问题描述在最近的项目中使用fabric.js完成一个在线图片编辑器的过程中，遇到的图片跨域问题实在令人头痛，首先图片编辑器的素材都是后台返回的oss地址，在添加图片之后，使用canvas的toDataUrl去生成base64的图片，总是会报错画布被污染，错误如下图：jing过百度广大网友的曾经遇到过的问题，已经解决，就是在画布渲染图片的时候添加imageUrl.crossOrigin ...

转载 js操作Cookie函数封装及使用

/** * [mycookie js操作Cookie函数封装，便于使用] * @param {String} ){ var mc [description] * @return {[type]} [description] mycookie.set('键名','键值','时间','域名','目录'); //设置Cookie m...

转载 vue路由传参的三种基本方式

[vue路由传参的三种基本方式](https://segmentfault.com/a/119000001239358转载于 SegmentFault 腹中有书气自华

原创 解决canvas绘制oss图片的跨域问题

最近在做公司项目在线海报编辑的时候，tuDataUrl无法将图片转为图片进行预览，这个的原因网上有很多的解释以及解决办法，这里就不再细说。但是按照网上的方法在前端js使用canvas绘制图片时添加crossOrigin=“Anonymous” ，画布canvas会在绘制oss上的图片时，报错has been blocked from loading by Cross-Origin Resourc...

原创 fabric.js学习（二）之 fabric.js控制器样式的修改

fabric.js官网(http://fabricjs.com/)fabric.js官方网站给出了控制器样式的修改，但仅局限于边框颜色以及边框节点形状的等基本样式的修改方式，无法修改添加图标，如图官方文档修改样式代码fabric.Object.prototype.set({ borderColor: 'red', cornerColor: 'red', //激活状...

原创 fabric.js 学习（一）

fabric.js 学习（一）一、概念（什么是fabric.js?fabric.js是一个canvas（画布）的库，可以在canvas上绘制图形（包括文字）以及对画布大小的修改，文字样式的修改，图案（图形）颜色填充以及样式大小的修改，生成json、svg数据，生成的canvas功能自带拖拽功能。用来实现类似在线图片编辑等类型的项目选用fabric.js是一个不错的选择。二、基础使用首先引入...

转载 前端进阶学习线路

原创 vue中使用阿里图标库创建一个自定义的图标库

vue中使用阿里图标库登录阿里图标库，选择自己需要的阿里图标，添加到库，然后下载代码，如果项目中用到的图标很多的话，先添加到库，然后添加至我的项目下载到本地。将下载到本地的阿里图标压缩包解压，我们可以看到如下图的文件在已经搭建好的vue项目中 assets 下添加一个新的文件夹 font ，将文件夹中的 .css、.eot 、.ttf 、.ttf 、.woff 、.woff2、...

原创 vue中父元素点击事件与子元素点击事件冲突

vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符，官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6...

原创 仿选单网图片合成小工具

仿选单网小工具图片合成仿选单网小工具图片合成，自此过程中主要遇到两个问题，一是怎样让一个div在一个包含他的div盒子中进行拖动，最开始想到的是利用鼠标按下事件mousedown来改变盒子内元素的定位来进行拖动，具体代码如下，额~~~~~，代码之前修改删掉了。由于本人无法使用mousedown事件完成在固定范围内拖拽功能，所以在度娘上寻找到另外一种方法，使用jqueryUi插件中的拖拽...

原创 vue中使用ElementUI 、iView 等vue组件库

vue中使用ElementUI 、iView 等vue组件库通过npm下载ElementUi 、iView的包npm i element-ui -Snpm install view-design --save页面引入,在main.js进行全局配置<!--使用ElementUI-->import ElementUI from 'element-ui'import ...

原创 vuedraggable的使用

vuedraggable的使用vuedraggable的官网https://sortablejs.github.io/Vue.Draggable/#/headerslot通过npm下载vuedraggable的包npm i -S vuedraggable页面引入import draggable from 'vuedraggable'代码<draggable ta...

原创 在Vue中使用 swiper 轮播图插件。

在Vue中使用 swiper 轮播图插件。讲实在的,个人感觉Swiper插件确实不如superSlide插件好用，可惜的是superSlider官方并没有在vue中的使用方法，而swiper存在这种方法。通过npm下载vue的swipernpm install swiper --save在需要使用的vue界面引入swiper以及swiper样式<!--引入的样式路径可...

原创 vue组件与组件之间的传值

父子组件间的传值方式父子组件间的传值可以使用 v-model进行数据绑定。父组件向子组件传值，使用 props 的方式进行传递，子组件使用props接收父组件传递过来的值。代码如下： <!--父组件--> <template> <div> <!--此为父组件中引用的一个子组件--&gt...

原创 vue-cli的使用

vue-cli的使用安装具体安装过程详见官网，官网是基于3.x版本以上的，2.x版本的vue安装过程自行度娘搭建一个项目，3.x版本以上的vue详情见官网，2.x版本的构建一个工程首先需要初始化基于webpack的vue项目： vue init webpack my-project之后按照提示 cd 到my-project文件夹，运行<!--此命令行是基于vue2.x的项目...

原创 vue入门

vue入门什么是vue?是一套用于构建用户界面的渐进式框架。vue的安装官网有详细的安装介绍https://cn.vuejs.org/v2/guide/。vue的挂载点、模板以及示例vue只会处理挂载点下面的内容模板是指挂载点内部的内容 <!doctype html> <html lang="en"> &l...

原创 layui的富文本编辑器提交数据后清空编辑区域

layui的富文本编辑器layedit提交数据后清空编辑区域layedit的富文本编辑器在数据提交后是无法设置清空文本区域的数据，这时候我们可以修改layedit.js来实现layedit的数据清空。向layedit.js中添加代码c.prototype.clearContent=function(t){var e=u(t); e[0].document.body.innerHTML="...