分享
扫一扫
超级会员免费看
恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源；曾参与过中大型微信小程序项目前端开发，并主导过一些官网（原生）开发；着迷于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 · 8040 阅读 · 15 评论 -
vue父子组件间引用：$parent、$children
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图：也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。有时候我们需要父原创 2020-05-18 01:21:07 · 6274 阅读 · 8 评论 -
vue实战：HTTP路由拦截
vue中有“三霸”：拦截器interceptor、路由守卫meta、导航守卫beforeEach、beforeRouterEnter(Update)。他们都有一个共同的作用（...也可能是唯一的作用） —— 在路由变更前做一次判断，或取或舍，或添加token、session之类的【头信息】...原创 2020-04-10 15:16:31 · 3611 阅读 · 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 · 1252 阅读 · 5 评论 -
vue前端组件化开发实战（二）：从0开发仿去哪网首页图标区域
...然后便是近段时间听到的一个问题：如何在后端未设置分页page的情况下由前端进行分页？起初笔者是一愣——还有这操作？于是想到，可以用vue中的mounted达成目的！原创 2020-02-24 10:36:21 · 1546 阅读 · 1 评论 -
深入浅出vue：实战中的性能优化和代码规范（持续更新）
笔者前面写了好多关于vue的文章（专栏也有两个），有关于vue源码部分的，也有笔者总结的实战demo。但其实，笔者一直想分享出来的，也是希望给自己做个持续总结的，还是关于性能优化和代码规范方面的。笔者曾经完成过学院社团官网的开发，当时第一版乃至第三版在性能上都极其差劲，所以，这大概是笔者的“心结”。但不得不说，性能优化能为网站（项目）带来非常美妙的体验感，而使用同一的风格规范，可以在绝大多数工程...原创 2020-02-20 11:30:25 · 1472 阅读 · 4 评论 -
程序员：项目中的“滚动盒子”竟然还可以这样写
讲真，项目中的“滚动元素”问题还是挺重要的。。。这里笔者讲过实践总结了一些方法：第一种方式：根据不同屏幕动态获取滚动盒子高度其实“想让一个页面部分内容（某个div）发生滚动，只要让内容高度大于盒子高度即可”。基于此，包裹滚动内容的div的高度就不能是自适应内容的高度，而是通过js获取的相对每个页面的“固定高度...原创 2020-02-02 12:19:37 · 1611 阅读 · 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 · 5819 阅读 · 0 评论 -
vue-cli3项目实战——实现通用管理系统模板前端部分
vue-cli已然成为前端大型项目的必需品，用它实现一个管理系统模板？该怎样………原创 2019-12-18 10:55:41 · 1757 阅读 · 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 · 1761 阅读 · 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 · 1882 阅读 · 0 评论 -
从一个vue项目剖析vue精髓
这两天（本着划水摸鱼的“宗旨”）做了一个小项目，算是复习了一下Vue的一些知识点。这里总结一下，供自己和大家参考。组件化vue大项目一般都会采用 组件化 的思想，这也符合公司 多人协作开发 的现实。vue通过import来导入另一个组件中传出来的数据（变量/参数），比如：import VueAxios from 'Vue-axios'import axios from 'axios'....原创 2019-10-19 12:18:37 · 579 阅读 · 0 评论 -
堪比ajax的高频请求和响应新方式——fetch（前端分页项目应用）
又是一周最好时… 周末了，聊点轻松的话题：一周的总结与复习。早上看到以前的笔记，突然看到了fetch，当时就很懵逼，我怎么不记得这东西了。。。故写此文章，纪念一下。fetch API它提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分，例如：请求和响应。它还提供了一个 全局的fetch()方法 ，该方法提供了一种简单、合理的方式来 跨网络异步获取资源 。这种功能以前...原创 2019-10-13 13:01:30 · 1172 阅读 · 0 评论 -
vue：异步组件的简单用法
当工程足够大时，使用的组件也越来越多，性能问题也就显得愈加重要：因为一开始就把所有组件都加载完是没有必要的。好在vue允许将组件定义为一个工厂函数，动态解析组件。vue只在组件需要渲染时去触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。比如：<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2019-10-01 13:44:43 · 1511 阅读 · 0 评论 -
小程序input提交后如何清空输入框数据：小程序与Vue的数据绑定方式
一直觉得，小程序与Vue有着神似之风。这一点在我第一天开始接触小程序时就这么认为，或者说，任何前端相关的语言，不管是node.js、Vue、angular、小程序，都和js有着千丝万缕的联系。而最让我“着迷”的，莫过于曾让我夜夜辗转反侧的“ 数据传递（数据绑定） ”了。趁着一次偶然提起，将其记录下来。原创 2019-09-11 13:19:35 · 2329 阅读 · 0 评论 -
由浅入深Vue：模拟各大网站留言列表的开发
一、解析留言列表原创 2019-09-01 09:10:45 · 703 阅读 · 2 评论 -
由浅入深Vue：数字输入框组件开发实战
Tips：组件与复用组件时Vue最核心，也是最出色的地方。毫不客气的说，Vue.js的组件就是提高重用性的，让代码可复用。知识回顾组件中最惹人注目的，莫过于 组件间的传值（通信） 了。父子组件传值：子组件用props接收，这是必要的。当然，传递的数据并不需要是写死的，比如：来自父级的动态数据，可以使用v-bind动态绑定。单向数据流：Vue2.x的一个改变就是：通过props传递...原创 2019-08-22 14:02:57 · 426 阅读 · 0 评论 -
由浅入深Vue：购物车功能开发实战
经过之前的核心知识点，代码块的介绍，本文上手实战一个核心业务功能：购物车。当然，功能为主（更高级的放在进阶中）翻到以前写过的某个功能性案例，想了想，还是发上来吧，，，在写代码之前，进行业务分析：购物车需要展示一个已加入购物车的商品列表，包含商品名、单价、购买数量和具体操作等信息，当然，还要有实时的总价显示。功能：购买数量可以增加或减少，，每类商品可以从购物车中移除购买数量降低到“...原创 2019-08-20 10:10:24 · 632 阅读 · 1 评论