恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网(原生)开发;着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ,欢迎star!
展开
-
vue项目实录:下拉刷新组件的开发及slot的使用
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发:正式开篇在前端项目的 components 文件夹下新建 pullRefreshView 文件夹,在其中新建组件 index.vue:(它代表“整个屏幕”,通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新)首先需要编写下拉刷新组件的 template,这里用到 <slot>,代码如下:<template>原创 2020-10-24 00:05:29 · 7937 阅读 · 15 评论 -
vue父子组件间引用:$parent、$children
vue中提到【父子组件】,则一定会想到我们常用的父子组件通信:props+$on()、$emit() ,如图:也就是说,虽然在一般情况下,子组件是不能引用父组件或者Vue实例的数据,但是对于在开发中出现的“数据需要在组件中来回传递”,我们最简单的解决办法就是通过props(和v-on)将数据从父组件传到子组件,再用$emit将数据从子组件传到父组件,以此循环引用。但是在另一些场景下,我们可能想要比如(在父组件中)拿到子组件对象,然后直接操作其中数据,去实现一些功能,比如方法的调用。有时候我们需要父原创 2020-05-18 01:21:07 · 6036 阅读 · 8 评论 -
vue实战:HTTP路由拦截
vue中有“三霸”:拦截器interceptor、路由守卫meta、导航守卫beforeEach、beforeRouterEnter(Update)。他们都有一个共同的作用(...也可能是唯一的作用) —— 在路由变更前做一次判断,或取或舍,或添加token、session之类的【头信息】...原创 2020-04-10 15:16:31 · 3528 阅读 · 7 评论 -
vue.js中的过渡动画效果(transition+animate.css+velocity.js)
对于“数据优先”的Vue来说,没有了dom的操作,过渡效果该如何实现?其实,vue也不是完全失去了对dom的操作,仍然可以通过比如$refs获取对应的dom元素先看一个小demo:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl...原创 2020-03-12 19:34:28 · 1197 阅读 · 5 评论 -
vue前端组件化开发实战(二):从0开发仿去哪网首页图标区域
...然后便是近段时间听到的一个问题:如何在后端未设置分页page的情况下由前端进行分页?起初笔者是一愣——还有这操作?于是想到,可以用vue中的mounted达成目的!原创 2020-02-24 10:36:21 · 1512 阅读 · 1 评论 -
深入浅出vue:实战中的性能优化和代码规范(持续更新)
笔者前面写了好多关于vue的文章(专栏也有两个),有关于vue源码部分的,也有笔者总结的实战demo。但其实,笔者一直想分享出来的,也是希望给自己做个持续总结的,还是关于性能优化和代码规范方面的。笔者曾经完成过学院社团官网的开发,当时第一版乃至第三版在性能上都极其差劲,所以,这大概是笔者的“心结”。但不得不说,性能优化能为网站(项目)带来非常美妙的体验感,而使用同一的风格规范,可以在绝大多数工程...原创 2020-02-20 11:30:25 · 1412 阅读 · 4 评论 -
程序员:项目中的“滚动盒子”竟然还可以这样写
讲真,项目中的“滚动元素”问题还是挺重要的。。。这里笔者讲过实践总结了一些方法:第一种方式:根据不同屏幕动态获取滚动盒子高度其实“想让一个页面部分内容(某个div)发生滚动,只要让内容高度大于盒子高度即可”。基于此,包裹滚动内容的div的高度就不能是自适应内容的高度,而是通过js获取的相对每个页面的“固定高度...原创 2020-02-02 12:19:37 · 1558 阅读 · 1 评论 -
vue(uni-app)中v-if与动画效果冲突的解决办法
这两天终于真正接触到了uni-app——其实就是一款基于vue的多端融合产品,它可以调用任意平台的api,已达到“可以顺利登陆各平台”的目的。写demo的时候遇到点麻烦:由于使用了v-if条件判断,所以元素展示很“突兀”,定义的transform根本没有效果!解决办法:改用v-show使用$nextTick() + setTimeout() 方法:css:.create-cont...原创 2020-01-14 21:35:02 · 5660 阅读 · 0 评论 -
vue-cli3项目实战——实现通用管理系统模板前端部分
vue-cli已然成为前端大型项目的必需品,用它实现一个管理系统模板?该怎样………原创 2019-12-18 10:55:41 · 1706 阅读 · 7 评论 -
vue $nextTick()的使用和与watch、computed的联系
业界熟知:vm.$nextTick(callback)将回调延迟到下次DOM更新循环后执行。修改数据后立即使用,然后等到DOM更新。(一般在修改数据后使用,以便“即时”获取“最新DOM”)我们来看一个例子:<div id="app"> <p ref="title">{{name}}</p></div>//jsvar vm=new Vu...原创 2019-10-31 15:19:27 · 1674 阅读 · 1 评论 -
vue实战宝典:使用axios发送ajax请求(超实用)
vue本身不支持ajax请求,采用了“第三方插件”的形式。现在支持的官方插件有 vue-reous 、axios 和 fetchfetch我在另一篇文章(文末有地址)中已详细介绍使用。本文说下axios的使用!axios—— 基于HTTPServletRequest的一款用于vue中的http插件 。其格式上基于es6的Promise。引用方式:npm install axios (...原创 2019-10-31 09:04:45 · 1791 阅读 · 0 评论 -
从一个vue项目剖析vue精髓
这两天(本着划水摸鱼的“宗旨”)做了一个小项目,算是复习了一下Vue的一些知识点。这里总结一下,供自己和大家参考。组件化vue大项目一般都会采用 组件化 的思想,这也符合公司 多人协作开发 的现实。vue通过import来导入另一个组件中传出来的数据(变量/参数),比如:import VueAxios from 'Vue-axios'import axios from 'axios'....原创 2019-10-19 12:18:37 · 526 阅读 · 0 评论 -
堪比ajax的高频请求和响应新方式——fetch(前端分页项目应用)
又是一周最好时… 周末了,聊点轻松的话题:一周的总结与复习。早上看到以前的笔记,突然看到了fetch,当时就很懵逼,我怎么不记得这东西了。。。故写此文章,纪念一下。fetch API它提供了一个JavaScript接口,用于访问和操纵HTTP管道的部分,例如:请求和响应。它还提供了一个 全局的fetch()方法 ,该方法提供了一种简单、合理的方式来 跨网络异步获取资源 。这种功能以前...原创 2019-10-13 13:01:30 · 1080 阅读 · 0 评论 -
由浅入深Vue:数字输入框组件开发实战
Tips:组件与复用组件时Vue最核心,也是最出色的地方。毫不客气的说,Vue.js的组件就是提高重用性的,让代码可复用。知识回顾组件中最惹人注目的,莫过于 组件间的传值(通信) 了。父子组件传值:子组件用props接收,这是必要的。当然,传递的数据并不需要是写死的,比如:来自父级的动态数据,可以使用v-bind动态绑定。单向数据流:Vue2.x的一个改变就是:通过props传递...原创 2019-08-22 14:02:57 · 382 阅读 · 0 评论 -
由浅入深Vue:购物车功能开发实战
经过之前的核心知识点,代码块的介绍,本文上手实战一个核心业务功能:购物车。当然,功能为主(更高级的放在进阶中)翻到以前写过的某个功能性案例,想了想,还是发上来吧,,,在写代码之前,进行业务分析:购物车需要展示一个已加入购物车的商品列表,包含商品名、单价、购买数量和具体操作等信息,当然,还要有实时的总价显示。功能:购买数量可以增加或减少,,每类商品可以从购物车中移除购买数量降低到“...原创 2019-08-20 10:10:24 · 572 阅读 · 1 评论 -
vue:异步组件的简单用法
当工程足够大时,使用的组件也越来越多,性能问题也就显得愈加重要:因为一开始就把所有组件都加载完是没有必要的。好在vue允许将组件定义为一个工厂函数,动态解析组件。vue只在组件需要渲染时去触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。比如:<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2019-10-01 13:44:43 · 1428 阅读 · 0 评论 -
小程序input提交后如何清空输入框数据:小程序与Vue的数据绑定方式
一直觉得,小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为,或者说,任何前端相关的语言,不管是node.js、Vue、angular、小程序,都和js有着千丝万缕的联系。而最让我“着迷”的,莫过于曾让我夜夜辗转反侧的“ 数据传递(数据绑定) ”了。趁着一次偶然提起,将其记录下来。原创 2019-09-11 13:19:35 · 2250 阅读 · 0 评论 -
由浅入深Vue:模拟各大网站留言列表的开发
一、解析留言列表原创 2019-09-01 09:10:45 · 646 阅读 · 2 评论