Vue
随风丶逆风
这个作者很懒,什么都没留下…
展开
-
总结分享项目中非常实用的几个Vue自定义指令
本文的 demo 源码地址,欢迎自取star:https://github.com/DavidChen93/vue-practical-directives自定义指令简介在 Vue2.0 中除了默认内置的指令(v-model 和 v-show)以外,也支持注册自定义指令。虽然代码复用和抽象的主要形式是组件,但是有时候仍然需要对顶层的 dom 元素进行操作,此时自定义指令就派上用场了。注意:v-model 和 v-show 的实现方式和自定义指令不一样,前者在模板编译(compile)时就已经进行处理原创 2020-12-16 18:50:25 · 1086 阅读 · 0 评论 -
vue2源码学习——nextTick解析
Vue官方文档的解释是:Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。所以有时候改变状态之后无法立即获取更新后的视图,我们就需要通过Vue.nextTick(cb)或者vm.$nextTick(cb)方法,在原创 2020-10-20 21:57:17 · 236 阅读 · 0 评论 -
vue2源码学习-Array七种原型方法hack
在Vue2中如果直接通过下标修改数组的值,不会触发视图的更新,只能通过push、pop、shift、unshift、splice、sort和reverse7种方法改变才会触发响应式更新。尤大的解释是直接监听数组的下标会带来性能损耗,所以通过hack的方式覆写这些编译方法。其实现原理如下,每行代码都进行了注释:// 源码目录:src/core/array.js// 获取工具方法def,定义对象的数据描述符import { def } from '../util/index'// 获得Array的原创 2020-10-20 20:36:38 · 1134 阅读 · 1 评论 -
Vue2源码学习-响应式原理
Vue的响应式是基于数据拦截+发布订阅模式,包含了四个模块:Observer:通过Object.defineProperty或者Proxy拦截对象的getter和setter方法,从而令每个响应式数据都拥有一个Dep,当触发getter时收集依赖(使用该数据的Watcher),当触发setter时派发更新。Dep:依赖收集器,维护使用数据的各个依赖Watcher。Watcher:将视图所依赖的数据绑定到Observer的依赖收集器Dep中,当数据出现变化时触发setter,就通知调用Dep的not.原创 2020-10-20 20:26:08 · 398 阅读 · 0 评论 -
Vue混入Mixin——使用方法、注意事项及源码分析
使用vue开发过程中,常用的抽离公共逻辑代码的方式有两种,一种是不依赖Vue实例的纯数据处理代码,可以写成utils工具方法;一种是依赖Vue实例的逻辑代码,则使用混入(Mixin)。混入虽然好用,但是随着项目代码增多,其管理和维护的成本极速增大,牵一发而动全身,Vue3.0 Composition API 便是试图解决这类问题,感兴趣的同学可以阅读浅尝vue3.0,万字总结初步了解。本文使用Vue版本2.6.2进行分析,例子来自于Vue官方教程。混入的使用方法Mixin的使用方法非常简单,它可以混入原创 2020-10-20 19:49:56 · 640 阅读 · 0 评论 -
浅尝vue3.0,万字总结
不知不觉vue3.0都进入beta版本,离正式版也快了,之前读了不少vue3.0的文章,但纸上得来终觉浅,现在就上手写个demo吧!!!完事开头难,第一步就是搭建环境,虽然最新版的@vue/cli3已经支持创建vue3.0的项目,不过自己动手丰衣足食,随便回顾一下webpack的相关配置。文章的源码我放在了github上,可自行获取。环境搭建初始化mkdir vue3.0-democd vue3.0-demo// npm初始化npm init -y// git初始化git ..原创 2020-09-12 01:24:15 · 1114 阅读 · 0 评论 -
ElementUI如何校验表格单元格内容?其实很简单
提要这篇文章算是《深入了解 Element Form 表单动态验证问题》的延伸。相信大伙肯定遇到过这样的需求,在一个表单内容里面嵌套一个表格,同时需要校验表格里面的某些单元格内容,如果自己实现这样的校验,一般就只能遍历表格内容进行判断,然后修改标识符给出提示。若使用的是 elementUI 组件库,那么这件事其实就变得非常简单了,只需要在表格单元格放入 ElFormItem 组件下,即可实现指定单元格的校验。单元格静态校验<template> <el-form :model=原创 2020-07-16 18:01:55 · 9269 阅读 · 5 评论 -
巧用Vue-Router路由守卫实现路由权限控制和加载进度
在系统路由跳转前做权限校验,是经常遇到的需求。本文将使用Vue-Router中的路由守卫功能实现权限控制和加载进度。路由守卫Vue-Router提供了两个钩子函数,分别是前置守卫beforeEach和后置守卫afterEach,其中前置守卫在路由跳转前触发,后置守卫在路由跳转后触发。可以使用下面的方式注册全局路由守卫,当路由跳转触发时,路由守卫按照创建顺序异步解析执行,只有所有守卫resolved才会进入resolved状态,否则一直处于pending状态中。const router = new V原创 2020-05-14 18:25:42 · 3866 阅读 · 0 评论 -
vue elementUI组件表单动态验证失效的问题与解决办法
一、缘由在项目中,有一个需求是需要根据条件给表单项添加验证属性prop确定是否验证表项。二、第一次实现与遇到的问题比如银行卡号根据输入年龄进行判断,如果大于等于18岁才需要填入银行卡号。最先的想法先设置好el-form的rules,然后通过三元表达式赋值prop属性,实现动态验证,示例如下:<template> <el-form ref="ruleForm"...原创 2019-10-22 22:12:09 · 21460 阅读 · 25 评论 -
深入了解Element Form表单动态验证问题
在上一篇《vue elementUI组件表单动态验证失效的问题与解决办法》中,讲到直接修改prop属性,未触发form-item的重新渲染,所以虽然有校验*的标志,实际上并不会校验。这是表面现象,最近有了空余时间,去看看了element form组件的源码,找到了根本原因。源码分析在form组件的created钩子函数中添加了el.form.addField和el.form.removeFi...原创 2020-04-03 15:36:41 · 7250 阅读 · 6 评论 -
Vue组件深度(deep)监听props对象属性无效的解决办法
在项目中有一个表单用到的地方很多,所以将其抽出来做成了一个业务组件,通过类型为Object的prop传递数据,在业务子组件中监听该对象prop。但是在开发过程中发现即使使用deep深度监听也无法监听到prop的数据变化,例如下面<!-- 父组件 --><template> <div class="hello"> <Child :data="...原创 2020-01-02 21:32:10 · 14548 阅读 · 0 评论 -
vue+elementUI打包后在IE10以下出现语法错误的原因与解决办法
原因IE10以下报下面的错误:查看详情就会发现是elementUI的ES6语法并未被编译转换成ES5解决办法安装了babel、babel-loader的前提下,在webpack.base.conf.js中相应位置添加如下配置即可{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src')...原创 2019-11-26 10:33:14 · 2943 阅读 · 0 评论 -
Vue理解<slot>插槽及其slot、slot-scope、v-slot指令的使用
理解插槽及其slot、slot-scope、v-slot特性的使用什么是插槽Vue本身实现了一套完善的内容分发的机制,使用<slot>元素作为内容分发的出口,也就是插槽。插槽内的模板<template>、HTML代码以及组件会被渲染。<!-- Example组件的定义 --><h1> <slot></slot>&...原创 2019-11-25 21:06:09 · 5106 阅读 · 0 评论 -
点击遮罩层非内容区域关闭遮罩层的三种思路四种方案
开发过程中经常使用遮罩层展示重要信息,同时屏蔽对下层页面的操作,其中一个可以提升用户体验感的地方就是点击非内容区域关闭遮罩层,本文就提供三种思路,四种实现方案。其中遮罩层样式如下:<style lang="less" scoped>.maskParent { width: 100%; height: 100%; position: absolute; lef...原创 2019-11-19 21:07:54 · 5265 阅读 · 1 评论 -
基于Vue+ElementUI的省市区地址选择通用组件
一、缘由在项目开发过程中,有一个需求是省市区地址选择的功能,一开始想的是直接使用静态地址资源库本地打包,但这种方式不方便维护,于是放弃。后来又想直接让后台返回全部地址数据,然后使用级联选择器进行选择,但发现数据传输量有点大且处理过程耗时,于是又摒弃了这种方法。最后还是决定采用异步的方式进行省市区地址选择,即先查询省份列表,然后根据选择的省份code查询城市列表,最后根据选择的城市列表获取区/县...原创 2019-11-19 19:50:23 · 20520 阅读 · 8 评论 -
elementUI对话框Dialog组件数据初始化的方法
使用Dialog弹窗时,在打开或者关闭的时候需要对数据进行初始化,在初始过程中,一旦出现遗漏就有可能导致bug。就好像下面这种方式,不但代码冗余,且不易维护,一旦新增字段又需要一个个修改。如何结局这个问题呢?可以考虑使用v-if对Dialog组件进行销毁和创建,这样每次都会自动初始化组件内的数据。个人觉得损失一些性能提高开发速度和代码可维护性,是可以接受的。比如组件AddFinan...原创 2019-10-22 12:18:30 · 6174 阅读 · 6 评论 -
键盘回车和鼠标点击触发button按钮click事件的问题
一、问题描述button按钮在获得焦点(foucs)的情况下,敲击键盘enter键也会触发button按钮的click事件,一般情况下不会有什么影响。但如果用户鼠标点击按钮后,在表单提交或者某些请求过程中,用户不停点击回车键,就会重复发起提交或者请求,如果未处理,很容易就出现错误。若涉及交易请求一类,这个问题会更加严重。(别问为什么会知道,问就是不知道)以下面的代码为例:<!-...原创 2019-09-04 20:45:18 · 14246 阅读 · 1 评论 -
Vue实例中使用$refs的注意事项
在开发过程中,经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件,并进行相应操作,但存在取不到元素的情况,其根本原因是因为$refs只能取得mounted(渲染)之后的元素。例如,在这种情况中,若flag从真值切换到假值取不到节点是正常的,因为v-if如果为假值,那么该节点不会被渲染。但如果从假值切换到真值时,也可能取不到节点,这是因为渲染需要时间,通常可以...原创 2019-08-15 21:14:54 · 10991 阅读 · 0 评论