
vue-js
EarlEcho
有点小目标的渣web前端
展开
-
Vue源码 - 关于v-model的深度解析
双向数据绑定这个概念或者大家并不陌生,视图影响数据,数据同样影响视图,两者间有双向依赖的关系。在响应式系统构建的上,中,下篇我已经对数据影响视图的原理详细阐述清楚了。而如何完成视图影响数据这一关联?这就是本节讨论的重点:指令v-model。一: 表单绑定1 - 基础使用v-model和表单脱离不了关系,之所以视图能影响数据,本质上这个视图需要可交互的,因此表单是实现这一交互的...原创 2019-10-12 21:00:59 · 1375 阅读 · 0 评论 -
Vue.js 实现表单数据参数传递,以及不同独立按钮之间的参数传递
使用vue.js以及基于vue的element ui框架昨天就纠结了很久的问题:需求是, 想要在下面这样的表格中, 点击每一行数据最后的操作(审批)按钮,就弹出一个模态框,如图二,点击模态框中的同意或者拒绝按钮,就改变图一表格中的状态,每一行都是独立的数据。所以需要传参数,最开始的思路是,点击审批按钮触发事件,然后再这个事件中监听用户点击了同意还是拒原创 2017-08-09 10:01:52 · 9208 阅读 · 2 评论 -
Vue.js - watch对象的属性在IE9下失效
公司项目有IE9的需求,今天一测试发现好多bug。 第一个问题就是:有一个输入框,watch这个输入框里的值,当值匹配到手机格式时相向后台发送请求,执行一系列操作。代码长这样: 实际问题就是监听不到 ‘cashierData.mobile’(对象里的属性)了,但是可以监听到对象, (是不是觉得IE9这货很神奇??对象可以但是对象的属性不可以!我也很绝望啊!)这里提个题外话,当watch监听原创 2017-07-25 18:41:10 · 2819 阅读 · 0 评论 -
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 · 2583 阅读 · 0 评论 -
前端实现图片压缩上传功能
以移动端为例,在H5上传图片时,由于机型 / 网速 / 流量等限制,在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况,所以需要对在某些情况下需要对上传的图片进行压缩上传。以下以移动端使用Vue框架为例:(以下主要实现思路来自张鑫旭大神的博客:原创 2019-04-12 21:49:16 · 4824 阅读 · 0 评论 -
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 评论 -
【Vue源码】基础内容
前言vue目前是前端使用频率较高的一套前端mvvm框架之一,提供了数据的响应式、watch、computed等极为方便的功能及api,那么,vue到底是如何实现这些功能的呢?在探究vue源码之前,我们需要了解以下几点javascript的基本内容~flow 类型检测Flow就是JavaScript的静态类型检查工具,由Facebook团队于2014年的Scale Conference上...原创 2019-09-19 21:00:14 · 558 阅读 · 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 评论