vue
文章平均质量分 51
聂大哥
前端技术爱好者,有问题可私聊
展开
-
PubSub原理解析并简单实现其源码
该方法接受两个参数:主题和订阅器对象。首先检查该主题是否有任何订阅器对象。否则,找到该订阅器对象在数组中的索引,然后使用splice方法从数组中删除该订阅器对象。否则,对该主题的所有订阅器对象进行遍历,依次调用每个订阅器对象的方法,并传递消息作为参数。如果该主题还没有任何订阅器对象,则需要先创建一个空数组,然后将订阅器对象添加到数组中。该实现中,PubSub对象包含三个方法:subscribe、publish、unsubscribe,以及一个名为subscribers的对象,它保存了所有订阅器对象的信息。原创 2023-03-01 15:04:01 · 312 阅读 · 0 评论 -
Vue3 中结合 ElementPlus 实现弹窗的封装
Vue3自定义弹窗,知识点包含vue3的emit使用,自定义ref,子组件内容方法向外暴露。原创 2022-09-30 11:40:16 · 3528 阅读 · 2 评论 -
JS中如何使用reduce语法糖来做数据统计!
reduce语法糖的合理使用,整理数据的好助手!原创 2022-09-28 09:43:55 · 472 阅读 · 0 评论 -
Vue2中混入(mixins)的实战应用
统一数据转换、文件下载、流程审批、表格内容合计等功能的实现!原创 2022-09-24 13:37:36 · 2228 阅读 · 0 评论 -
Vue2中如何优雅的实现dialog的封装
优雅封装Dialog弹窗组件,省时省力好维护的高可用组件。原创 2022-09-22 21:04:23 · 1606 阅读 · 0 评论 -
electron-vue初始化项目到打包运行
Electron-vue就是基于vue来构造electron应用程序的样板代码。electron-vue充分利用vue-cli作为脚手架工具,加上拥有vue-loader的webpack、electron-packager或是electron-builder,以及一些最常用的插件,如vue-router、vuex、axios等等。...原创 2022-07-19 10:31:55 · 648 阅读 · 0 评论 -
ElementUI 表单自定义正则表达式校验文本框
结合element的表单规则方式,需在data的返回中写form和formRules,这里写的自定义规则是要结合formRules,示例如下:在data函数中写自定义规则的方法,在rules中进行使用原创 2022-06-16 17:05:03 · 545 阅读 · 0 评论 -
Vue 权限指令的使用,不同情况下的权限控制分析
在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。在后台系统中,最常用的就是权限指令。权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此DOM。...原创 2022-04-29 23:17:57 · 1508 阅读 · 3 评论 -
Vue知识点总结
实现:Vue是MVVM框架,双向数据绑定,当ViewModel对Model进行更新时,通过数据绑定更新到View。虚拟DOM是一个映射真实DOM的JS对象,提供了响应式和组件化的视图组件。一、Vue初始化过程,双向数据绑定原理vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,dep.addsub来收集订阅的依赖,watcher监听数据的变化,在数据变动时发布消息给订阅者,触发相应的监听回调。监听器Obse原创 2022-02-01 23:03:52 · 773 阅读 · 0 评论 -
Element inputNumber输入框初始化没值为0问题
昨天测试小姐姐找到我说,在数字输入框内输入值的时候要先删了零才能再输入比较麻烦,所以看怎么处理一下。看到这个问题,第一想法就是在输入框聚焦的时候处理这个值的问题,因为后端返回是null,所以这个数字输入框的属性就是转换为了零。处理办法:给输入框绑定 @focus 事件,接着将输入框的model传给函数,在函数内判断。接着给model赋值为undefined即可。<el-input-number size="mini" v-model="item.addScore" :key=原创 2021-12-23 10:55:31 · 3296 阅读 · 2 评论 -
从零搭建Axios的封装及处理跨域
本示例是写在Vue项目中,同样的道理可以搬到React等项目中。首先,安装axiosnpm install axios接着直接上手编写request.js,此文件的作用是对axios的创建及请求拦截、响应拦截。import axios from "axios";import { Notify } from 'vant'//创建axios服务,这里可写两个基本参数,baseURL(基础地址,这里写/api是后面做跨域使用)和timeout(请求超时时间)const service = new原创 2021-12-06 14:12:19 · 683 阅读 · 0 评论 -
Vue中自定义组件全局注册安装
有没有考虑过一个问题,在Vue中为什么我们安装了ElementUI或者Antd之后,只需要在main.js中引入ElementUI并use(ElementUI),就可以在项目的任何组件中直接使用Element的任何组件?那我们自己定义的组件可不可以实现这种操作呢?而不是在组件中引入一个个的组件去使用。还像上面这样使用?在PassWordReset组件中引入了TopTip,在ForgetPwd中也引入了TopTip。那就不够优雅了!看我下面的写法,创建一个js文件,名字你可自定义,我这里写了cgi.原创 2021-12-06 09:27:05 · 527 阅读 · 0 评论 -
Vue mixin(混入)详解
先用我理解的混入讲:你可以定义一个单独的文件,里面包含data、methods、created等在正常vue组件中的生命周期,然后你可以在别的组件中导入这个文件,从而在导入的组件中使用被导入的data、methods等。而且可以在多个组件中分别导入,互不影响。这也就是和vuex的一点小区别。看示例:countMixin.jsexport default countMixin = { data(){ return { title: "", count: 1, name: "Li"原创 2021-10-28 15:47:30 · 363 阅读 · 0 评论 -
Vue watch监听vuex数据变化
在Vue页面中监听Vuex数据变化computed: { listenData() { return this.$store.state.user.data } },watch: { listenData(newVal, oldVal) { // 此处处理逻辑 this.isWork = this.$store.state.user.data } }原创 2021-10-21 15:05:20 · 1345 阅读 · 0 评论 -
Vuex的基本使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的示例我们使用在Vue脚手架中,所以第一步安装vuex:npm install vuex --save或者yarn add vuex第一步:创建Store框架在项目中,我们通常使用一个单独的store文件夹来编写状态相关的文件。我们可以在store文件夹下创建index.js文件。import Vue from 'vue'imp原创 2021-07-09 18:59:30 · 171 阅读 · 0 评论 -
vue2.x版本报错error: ‘xxxx‘ is defined but never used (no-unused-vars)
在vue2.x中,只要是声明了变量没有使用或者引入了某个文件没有使用就会报错,这其实是语法校验规则。我们只需要关闭这种校验规则即可。在项目中的package.json文件中找到rules,初始里面是空的,我们只需要加入以下内容即可:"rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whit原创 2020-12-21 16:16:48 · 2634 阅读 · 6 评论 -
vue将数据导出Excel表格;含文字、图片类型(并有类型的转换)
随着项目进度的前进,到了最后一步需要将数据导出到Excel表格内,并且数据中包含一些类型的转换,和图片类型。正常情况下我们只需要导出文字类型,这是最简单的一种导出方式。那么现在我还有一些类型的转换和图片的导出到表格里,这该如何做?别慌,现在开源的插件有很多能够处理这种情况的,接下来我一步一步的展示,能够让你明白。第一步:安装插件。npm install js-table2excel第二步:引入插件。import table2excel from 'js-table2excel'第三步,处理数原创 2020-10-06 15:57:35 · 4271 阅读 · 12 评论 -
小程序、网页、APP循环数据时重组数据(格式化某字段类型改为所需要的类型)
作为一个前端从事者,对数据的处理也是一种必备技能。所谓的重组数据是什么呢?拿个例子来说:比如在获取某些数据的时候,获取到了一个对象数组的格式数据,在这组数据里面,有些字段不能够直接展示给用户,而需要进行一下转换,时间戳我们需要转为正常日期时间、某些数据的状态值,可能是用数字代表,我们需要转为相对应的文字说明,再例如一个字段里存了多张图片链接,但是此字段是一个字符串,我们又如何把这些值转换为正常的能够显示在界面的数据。接下来,我就讲一下当我们获取到一个对象数组之后,如何对需要处理的字段进行格式化处理。先拿原创 2020-10-05 15:46:20 · 316 阅读 · 0 评论 -
vue2.x与vue3.0的响应式数据演示
2.x时代的响应式与3.0的稍有不同。我一一列出来,2.x的响应式一般有两种写法,因为作用域的不同,很可能造成你写的代码无效果。2.x的第一种:(同作用域下)export default { name:"StaffAdmin", data(){ return{ staffList:[], loading:false } }, created(){ this.loading =原创 2020-09-26 10:13:28 · 276 阅读 · 0 评论 -
vue结合饿了么框架Table表格修改时间戳转为日期+拓展
使用Table表格没必要多废话了,这里我就直接演示如何在Table里将时间戳转为时间。注意:由于Table表里对应有多行内容,也就是数据源是一个对象数组。所以想要改为数组中的每个对象中的一个字段在进行渲染,我们就只能是在数据渲染的时候进行转换处理。 <el-table :data="orderList" style="width: 100%" @selection-change="selectionChange" > <e原创 2020-09-26 09:39:55 · 872 阅读 · 1 评论