- 博客(30)
- 收藏
- 关注
RSS订阅原创 Vue源码 - 关于v-model的深度解析
双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。一： 表单绑定1 - 基础使用v-model和表单脱离不了关系，之所以视图能影响数据，本质上这个视图需要可交互的，因此表单是实现这一交互的...
2019-10-12 21:00:59
1214
原创 前端 - 浏览器缓存导致二次下载图片失败
今天遇到个很经典的问题，涉及范围从 浏览器缓存 到 网络，所以记录下，以备之后遇到的时候可以快速定位。bug发生背景：有一个这样的需求，如下图所示，页面可以预览到一个加密过的图片的列表（这里的重点是，图片和页面是不同源，也就是我们常说的跨域了），查看图片的时候ok的，显示完美，但是呢，一旦点击右上角的“下载文件”就有问题了，会报跨域的错误（下图二）。这里有个前提是关于图片下载的...
2019-10-11 20:23:40
1699
1
原创 前端实现图片下载
这个问题的第一反应肯定是通过a标签下载啦～～，但是呢由于a标签的href赋值为图片地址，只能起到预览的效果不能下载到本地，所以要用到canvas.drawImage的方法将地址转化成base64格式，然后赋值给a标签后再点击。具体代码如下：function downloadIamge (imgsrc, name) { // 下载图片地址和图片名 let image = new...
2019-10-11 19:50:41
572
原创 Vue源码 - 入口文件分析
我们都知道，从一个new Vue开始，就说明一个Vue项目的开始：new Vue({ el: ..., data: ..., ....})那么在这次实例化的过程中，究竟发生了哪些行为呢？Vue的源码文件，其核心代码在src/core目录下。下面我们从入口文件index.js开始进入：/ src/core/index.js// 这里是我们 Vue 核心方法im...
2019-09-29 18:29:46
229
原创 【Vue源码】基础内容
前言vue目前是前端使用频率较高的一套前端mvvm框架之一，提供了数据的响应式、watch、computed等极为方便的功能及api，那么，vue到底是如何实现这些功能的呢？在探究vue源码之前，我们需要了解以下几点javascript的基本内容～flow 类型检测Flow就是JavaScript的静态类型检查工具，由Facebook团队于2014年的Scale Conference上...
2019-09-19 21:00:14
501
原创 栈 / 队列 —— JavaScript数据结构（一）
栈和队列是两种类似于数组的数据结构，但是在添加和删除元素时更为可控，所以下面就简单介绍了下关于栈和队列的基本数据理念：栈 —— 栈是一种后进先出（LIFO：later in first out）的有序集合，新添加的元素靠近栈顶，最开始添加的元素靠近栈底具体的步骤如下图所示：那我们如何自己来实现一个栈呢？首先我们需要一种数据结构来保存栈里面的元素，显然，数组是一种比较好的数据结...
2019-06-09 15:21:06
132
原创 Vue组件通信的六种方式
在平时的开发过程中，父子 / 兄弟组件间的通信是肯定会遇到的啦，所以这里总结了 6 种 Vue 组件的通信方式：1. props / $emit2. $emit / $on3. Vuex4. $attrs / $listeners5. $parent / $children 与 ref6. provide / inject前言如上图所示，A/B，B/C，B/D组件是父子关系，C/...
2019-05-24 16:01:16
848
原创 JS原型（一）——原型对象
在了解JS原型对象之前，我们需要了解一些基础知识：首先是构造函数，我们要知道构造函数的几个特点构造函数的首字母必须大写 ，区分于其他普通函数 内部使用的this对象，指向即将要生成的实例对象。 使用new来生成实例对象由此我们可以得到，任何函数只要通过new操作符来调用，那这个函数就可以称为构造函数。// 文章中之后的知识点都是以这个函数作为基础function Person...
2019-05-21 19:24:33
1755
1
原创 前端实现图片压缩上传功能
以移动端为例，在H5上传图片时，由于机型 / 网速 / 流量等限制，在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况，所以需要对在某些情况下需要对上传的图片进行压缩上传。以下以移动端使用Vue框架为例：（以下主要实现思路来自张鑫旭大神的博客：
2019-04-12 21:49:16
4716
原创 Vue路由跳转传递参数（）
需求——在单页应用中，从A页面跳转到B页面需要携带部分参数，具体操作方法有以下几种：方法1（使用$router进行跳转）：step1：在router.js中定义携带参数的名称{ path: '/page/:id', //id为你要携带的参数的名称 name: 'Page', component: Page}step2：在A页面跳转时携带参数let id = 0;thi...
2018-07-04 16:57:51
2525
原创 JS跳转页面的方式，以及使用JS锚点定位
在父页面跳转：window.location.href="xxx.html";在新窗口打开，即使用_target属性：window.open("xxx.html","_blank");JS页面锚点定位document.getElementById("xxx").scrollIntoView();
2017-09-05 15:19:22
811
原创 CSS Sprite精灵图如何缩放大小
今天在写移动端网页的时候，由于PC和移动端的分辨率不同，所以精灵图需要缩小可以用两个方法解决：transform:scale( x )： 语法为：transform: scale(x，y). 同时有scaleX, scaleY专门的x, y方向的控制。 例如：transform: scale(0.5) 缩小为原来的一半 和zoom不同，scale并不支持百分比值和normal关键字，只能
2017-08-24 17:48:19
6034
原创 HBuilder中的eclipse git插件在pull时报错：cannot open git-upload-pack
在 工具 - 选项 中输入git 选这个 然后点击 Add Entry: 输入以下的键值对： 之后再pull commit就ok啦
2017-08-24 15:17:25
3800
2
原创 未知错误：Uncaught RangeError: Maximum call stack size exceeded.
今天碰到的JavaScript错误：Uncaught RangeError: Maximum call stack size exceeded百度下说是栈溢出，但是我的程序代码中没有任何的循环和递归算法 我的代码<body style=""> <div id="userLogin"> <div class="login-wrapper"> <form
2017-08-24 14:40:12
4740
原创 基于JQuery实现的轮播图
HTML代码<div class="carousel-figure clearfix"> <div class="carsoul-box clearfix"> <a class="ig" href="#"><img src="image/carsoul1.png"/></a> <a class="ig" href="#"><img src="image/6.p
2017-08-18 18:33:08
675
原创 基于Jquery实现的手风琴
HTML代码如下：<div class="join-us-right"> <ul> <li class="index-item"> <div class="title"> <p class="job-name">手风琴列表1</p> <p class="job-date">2017.8.1
2017-08-18 18:23:35
305
原创 CSS 单行或多行文本溢出显示省略号
单行文本溢出显示省略号：（需要先限定盒子的width）overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行文本溢出显示省略号：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;因使用了WebK
2017-08-10 18:32:21
386
原创 Vue.js 实现表单数据参数传递，以及不同独立按钮之间的参数传递
使用vue.js以及基于vue的element ui框架昨天就纠结了很久的问题：需求是， 想要在下面这样的表格中， 点击每一行数据最后的操作(审批)按钮，就弹出一个模态框，如图二，点击模态框中的同意或者拒绝按钮，就改变图一表格中的状态，每一行都是独立的数据。所以需要传参数，最开始的思路是，点击审批按钮触发事件，然后再这个事件中监听用户点击了同意还是拒
2017-08-09 10:01:52
8715
2
原创 JS控制点击跳转到指定页面，以及返回到上一页
如下：<p onclick="javascript:location.href='xxx.html';">跳转</p><el-button type="primary" onclick="javascript:location.href='xxx.html';">跳转</el-button>返回到上一级：window.history.go(-1); //返回上一页window.history.
2017-08-08 17:52:49
6184
2
原创 文字和img保持在同一水平线
经常遇到一个问题，当需要让一张图片和文字在同一水平线上显示市，图片总是会比文字高出一截，可以说非常不好看了。 解决方法： HTML代码如下<img src="../static/image/ok.png" /><p class="tip1">密码修改成功，请重新登陆！</p>CSS代码如下p{ display: inline-block; vertical-align: mid
2017-07-27 16:13:52
4716
2
原创 Webpack2 入门踩坑教程（五）
注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习，并在此基础上增加自己的想法。上节Webpack2 入门踩坑教程（四）：http://blog.csdn.net/echo601/article/details/76195411五.使用babel对es6/es7转码1：安装babel核心模块
2017-07-27 15:43:11
377
原创 Webpack2 入门踩坑教程（四）
注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习，并在此基础上增加自己的想法。上节Webpack2 入门踩坑教程（三）：http://blog.csdn.net/echo601/article/details/76178952四：生产环境和开发环境在入口处区分生产环境和开发环境。 1：
2017-07-27 15:14:10
489
原创 Webpack2 入门踩坑教程（三）
注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习，并在此基础上增加自己的想法。上节Webpack2 入门踩坑教程（二）：http://blog.csdn.net/echo601/article/details/76177846三．Webpack-dev-serverWebpack的加载器有
2017-07-27 11:44:51
579
原创 Webpack2 入门踩坑教程（二）
上节Webpack2 入门踩坑教程（一）：http://blog.csdn.net/Echo601/article/details/76174694二．数据更新创建src和dist两个文件夹，把index.js移动到src文件夹里，bundle.js是webpack打包生成出来的，所以先将bundle.js删除，周再来重新生成以确保文件正常更新，以后会把dist作为生成文件存放的目标文件夹。
2017-07-27 11:30:09
437
原创 Webpack2 入门踩坑教程（一）
注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204 本人通过此链接博客学习，并在此基础上增加自己的想法。webpack所有操作必须基于node，网上自行百度教程Webpack的核心思想 1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过req
2017-07-27 10:29:46
637
原创 npm run webpack时报错，同时生成npm-debug.log文件
打包webpack后，使用npm run webpack报错如下： 找到原因是因为package.json中缺少webpack的配置，解决方法如下： 找到package.json下面的scripts，我的长这样："scripts": { "test": "echo \"Error: no test specified\" && exit 1"},加一句："scripts": {
2017-07-26 17:25:27
7075
原创 Windows下的webpack项目上传到github，并忽略node_modules文件夹
如何上传本地项目到github这些就不说了， 今天遇到一个问题是：本机的webpack项目在npm初始化的时候会生成一个node_modules的巨大的库，我们上传到github时是可以忽略它的。 一百度，发现好多命令行都是针对linux的，windows下根本不管用啊怒摔！！ 自己摸索了下发现下面的的指令是可行的：cd进入你的webpack项目：输入以下指令用于windows下新建一个.gi
2017-07-26 10:02:01
4209
原创 Vue.js - watch对象的属性在IE9下失效
公司项目有IE9的需求，今天一测试发现好多bug。 第一个问题就是：有一个输入框，watch这个输入框里的值，当值匹配到手机格式时相向后台发送请求，执行一系列操作。代码长这样： 实际问题就是监听不到 ‘cashierData.mobile’（对象里的属性）了，但是可以监听到对象， （是不是觉得IE9这货很神奇？？对象可以但是对象的属性不可以！我也很绝望啊！）这里提个题外话，当watch监听
2017-07-25 18:41:10
2763
原创 Less傻瓜式教程
LESS的基本用法一：变量 语法：@变量名：值; 例子：定义一个变量：@box-width-height: 200px; 在盒子中使用它： #box1{ height: @box-width-height; width: @box-width-height; }二：混合 例子:定义一个混合: .box-style{ widt
2017-07-25 10:30:07
426
原创 Webpack 入门(一)：安装 / 打包 / 命令行
*注：以下操作的前提是已全局安装node 和 webpack一：安装webpack和基本环境搭建新建一个工作的文件夹（我取的名字叫Webpack） 打开命令行，cd进入该文件夹//初始化一下npm> E:\work\Webpack>npm init然后按照提示输入这个项目的一些信息，不想填也可以一直按回车。//安装Webpack> E:\work\Webpack>npm install webp
2017-07-25 10:28:41
13679
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人