javascript
关注
分享
扫一扫
EarlEcho
有点小目标的渣web前端
展开
-
Vue源码 - 关于v-model的深度解析
双向数据绑定这个概念或者大家并不陌生，视图影响数据，数据同样影响视图，两者间有双向依赖的关系。在响应式系统构建的上，中，下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联？这就是本节讨论的重点：指令v-model。一： 表单绑定1 - 基础使用v-model和表单脱离不了关系，之所以视图能影响数据，本质上这个视图需要可交互的，因此表单是实现这一交互的...原创 2019-10-12 21:00:59 · 1375 阅读 · 0 评论 -
前端 - 浏览器缓存导致二次下载图片失败
今天遇到个很经典的问题，涉及范围从 浏览器缓存 到 网络，所以记录下，以备之后遇到的时候可以快速定位。bug发生背景：有一个这样的需求，如下图所示，页面可以预览到一个加密过的图片的列表（这里的重点是，图片和页面是不同源，也就是我们常说的跨域了），查看图片的时候ok的，显示完美，但是呢，一旦点击右上角的“下载文件”就有问题了，会报跨域的错误（下图二）。这里有个前提是关于图片下载的...原创 2019-10-11 20:23:40 · 1813 阅读 · 1 评论 -
前端实现图片下载
这个问题的第一反应肯定是通过a标签下载啦～～，但是呢由于a标签的href赋值为图片地址，只能起到预览的效果不能下载到本地，所以要用到canvas.drawImage的方法将地址转化成base64格式，然后赋值给a标签后再点击。具体代码如下：function downloadIamge (imgsrc, name) { // 下载图片地址和图片名 let image = new...原创 2019-10-11 19:50:41 · 655 阅读 · 0 评论 -
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 · 304 阅读 · 0 评论 -
【Vue源码】基础内容
前言vue目前是前端使用频率较高的一套前端mvvm框架之一，提供了数据的响应式、watch、computed等极为方便的功能及api，那么，vue到底是如何实现这些功能的呢？在探究vue源码之前，我们需要了解以下几点javascript的基本内容～flow 类型检测Flow就是JavaScript的静态类型检查工具，由Facebook团队于2014年的Scale Conference上...原创 2019-09-19 21:00:14 · 558 阅读 · 0 评论 -
栈 / 队列 —— JavaScript数据结构（一）
栈和队列是两种类似于数组的数据结构，但是在添加和删除元素时更为可控，所以下面就简单介绍了下关于栈和队列的基本数据理念：栈 —— 栈是一种后进先出（LIFO：later in first out）的有序集合，新添加的元素靠近栈顶，最开始添加的元素靠近栈底具体的步骤如下图所示：那我们如何自己来实现一个栈呢？首先我们需要一种数据结构来保存栈里面的元素，显然，数组是一种比较好的数据结...原创 2019-06-09 15:21:06 · 179 阅读 · 0 评论 -
JS原型（一）——原型对象
在了解JS原型对象之前，我们需要了解一些基础知识：首先是构造函数，我们要知道构造函数的几个特点构造函数的首字母必须大写 ，区分于其他普通函数 内部使用的this对象，指向即将要生成的实例对象。 使用new来生成实例对象由此我们可以得到，任何函数只要通过new操作符来调用，那这个函数就可以称为构造函数。// 文章中之后的知识点都是以这个函数作为基础function Person...原创 2019-05-21 19:24:33 · 1842 阅读 · 1 评论 -
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 · 914 阅读 · 0 评论 -
未知错误：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 · 4813 阅读 · 0 评论 -
JS跳转页面的方式，以及使用JS锚点定位
在父页面跳转：window.location.href="xxx.html";在新窗口打开，即使用_target属性：window.open("xxx.html","_blank");JS页面锚点定位document.getElementById("xxx").scrollIntoView();原创 2017-09-05 15:19:22 · 883 阅读 · 0 评论 -
Vue.js 实现表单数据参数传递，以及不同独立按钮之间的参数传递
使用vue.js以及基于vue的element ui框架昨天就纠结了很久的问题：需求是， 想要在下面这样的表格中， 点击每一行数据最后的操作(审批)按钮，就弹出一个模态框，如图二，点击模态框中的同意或者拒绝按钮，就改变图一表格中的状态，每一行都是独立的数据。所以需要传参数，最开始的思路是，点击审批按钮触发事件，然后再这个事件中监听用户点击了同意还是拒原创 2017-08-09 10:01:52 · 9208 阅读 · 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 · 6302 阅读 · 2 评论