![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 54
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
林梓阳
这个作者很懒,什么都没留下…
展开
-
Axios封装及使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。使用过 Ajax 的前端开发都知道,Ajax 可以进行 http 请求,而 Axios 则实现了对 ajax 的封装,只不过它是 Promise 的实现版本。原创 2022-09-19 14:10:20 · 376 阅读 · 1 评论 -
Vue混入mixins,让你减少一半代码
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。原创 2022-09-14 11:50:38 · 873 阅读 · 1 评论 -
Vuex 3使用总结
但是当遇到多个组件共享状态时,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力,甚至会导致无法维护的代码。getter可以认为是 store 的计算属性,返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。写过 vue 项目的程序员应该都知道父子组件传参的方式,通过子组件的 props 参数,和 $emit 来触发事件。基于此,把组件的共享状态抽取出来,以一个全局单例模式管理,vuex 就产生了。如果有多个组件需要共用状态的某计算属性,可以使用它。原创 2022-09-12 17:57:35 · 607 阅读 · 0 评论 -
近期前端面试总结
1.工厂模式 - 传入参数即可创建实例虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode2.单例模式 - 整个程序有且仅有一个实例vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉3.发布-订阅模式 (vue 事件机制) 发布订阅模式的核心就是一对多的关系,一个发布者发起事件,所有的订阅者都会执行4.观察者模式 (响应式数据原理)原创 2022-09-09 12:00:29 · 297 阅读 · 0 评论 -
vue自定义指令之防抖函数
在项目中会遭遇到用户连续点击多次按钮的情况,这个时候就需要使用防抖函数,在一定时间内只触发一次函数执行。原创 2022-09-08 11:19:30 · 1775 阅读 · 0 评论 -
移动端列表分页,删除交互优化
在小程序、H5等移动端中,列表的加载不同于PC端的表格,数据是分页显示的。在移动端中,一般都是上滑加载新数据,但是不会切换显示已加载的上一页数据,而是拼接到底部。该篇博客使用 Vue + elementUI 技术栈实现。原创 2022-09-02 17:54:34 · 1383 阅读 · 0 评论 -
单例模式设计——Vue单例组件实现实例
单例模式,顾名思义就是只有一个实例。在 Vue 中,应用到该设计模式的有 vuex、vue-route 等。相关的设计模式和实现在网上可以找到很多教程,这里不做赘述。在系统中,适合单例模式使用场景最常用的功能要算是登录了,本章节单讲登录弹窗的单例实现。............原创 2022-08-31 18:18:37 · 3431 阅读 · 0 评论 -
vue+elementUI实现日期快选组件
如下图,利用 vue+elementUI 实现一个日期快选的组件。在这引用 dateUtil.js 工具包,参考:https://blog.csdn.net/weixin_43930421/article/details/124745006代码实现在 components 文件目录新建 DateSelect.vue 文件。<template> <el-popover v-model="showPopover" style="padding:8px原创 2022-05-16 10:38:59 · 657 阅读 · 0 评论 -
基于vue-cropper头像裁剪上传组件
安装 vue-croppernpm install vue-cropper此外,项目使用了 elementUI 框架,可自行引入。代码实现<template> <div> <div class="cropper-containter cropper-size" :class="customClass" v-if="showContainter"> <div class="cropper_wrap" v-if="showUpCropp原创 2022-05-18 10:20:54 · 291 阅读 · 0 评论 -
vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式。在实际的开发过程中,从开发到测试完成、发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义不同环境下的不同变量)。首先,在项目根目录下新建3个文件 .env 、.env.test、 .env.production第二步,编辑文件.env(开发环境)NODE_ENV=developmentVUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名原创 2022-05-28 11:43:43 · 4744 阅读 · 6 评论 -
vue+elementUI实现自定义表单模板组件(一)
前言如下图,实现一个可以自定义的表单。本文以实现思路为主,并未提供完整代码。思路1、页面布局为左中右布局:左边显示可以定义的表单控件,中间显示预览效果,右边则为选中某个控件后可以编辑的属性。如下图,先择单选项后,可以编辑选项。2、使用 vuedraggable 拖拽组件,直接拖动左边的控件到中间生成表单。vuedraggable 文档可查阅:https://github.com/SortableJS/Vue.Draggable(你也可以不使用该组件,直接利用点击事件,点击左边控件后在中间生成原创 2022-05-30 10:54:13 · 4169 阅读 · 0 评论 -
vue+elementUI实现自定义表单模板组件(二)
前言在上一节主要解决了表单模板的创建问题,在数据库中的存储格式为字符串。主要是通过前端处理,保存为 json 数组的字符串,形如[ { label:"文本", required:true, type:"text", icon:"el-icon-s-tools", placeholder:"", _vModel:"field0" }]再通过 JSON.stringify() 转为 json 串后存入数据库。有了表单模板之后,如何在前端进行呈现并编辑,这一节就理清这一思路。表原创 2022-05-31 10:02:26 · 1081 阅读 · 0 评论 -
vue事件总线(eventBus)的使用
钉钉原创 2022-06-01 10:24:02 · 432 阅读 · 0 评论 -
path和params不可同时使用,Vue Router注意事项
最近项目遇到了个路由问题,在项目中通过类似如下写法获取不到参数也就是说,如果同时在路由中使用 path 和 params,在对应页面是获取不到 params 参数的。后面翻阅了 Vue Router 文档,找到了下面这句话注意:如果提供了 path,params 会被忽略在主页面中,定义了 toA 函数,将跳转至 A 页面。在 a 页面中,通过 name 和 params 的配合可以获取到参数。修改 toA 函数,通过 path 和 params 获取到的参数为 undefined如果需要使用 pa原创 2022-06-08 09:55:41 · 2032 阅读 · 0 评论 -
vue+elementUI实现的标签选择及新建组件
实现如下图所示的一个标签选择组件。图1:标签选中时的效果图2:标签新建时的效果tagSelect.vue原创 2022-06-11 11:49:51 · 1107 阅读 · 1 评论