随笔分类 - VUE
摘要：众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 props/$emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。 在这么多的组件通信方式中，provide/inject 显得十分阿卡林（毫无存
阅读全文
摘要：最近公司需要使用vue重构以前的项目，为了节省时间快速开发选择了使用element 不得不说，咋一看element的功能很全面样式，该有的都用，但是我们的项目对性能要求比较高，特别是表格 开发过程比较顺利各功能实现都很不难，但是性能测试确成了问题，分页的情况下单页100条就不怎么流畅了，更别说要求不
阅读全文
摘要：大家都知道，vue中点击事件直接在元素中使用@click="click"即可，但是有时在一个元素中包含了子元素，而且父元素和子元素都有点击事件，此时我们希望的点击效果就是：点击子元素区域的的时候，不触发父级元素的点击事件，此时就要用到@click.stop="subclick"。 @click.st
阅读全文
摘要：1|0组件化 1|1注册组件的基本步骤 创建组件构造器 （调用Vue.extend()方法） 注册组件 （调用Vue.component()方法） 注册组件语法糖 省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替 使用组件 （在Vue实例的作用范围内使用组件） 1|2组件模板
阅读全文
摘要：路由是：/path/:type真正路径是：/path/list path匹配路径: /path/list fullPath匹配路由: /path/:type 先理解什么是路由记录 ： 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。 上方代码中的路由记录见下方：
阅读全文
摘要：深拷贝 JSON方法实现 2.用for…in实现遍历和复制 2.用for…in实现遍历和复制 function deepClone(obj) { let result = typeof obj.splice "function" ? [] : {}; if (obj && typeof obj 'o
阅读全文
摘要：vue的计算属性get和set 1.计算属性是用来存储数据，但具有以下几个特点： a.数据可以进行逻辑处理操作。 b.对计算属性中的数据进行监视。 2.计算属性和普通属性的区别： a.计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化 b.计算属性是缓存的，只要相关依赖没有改变，
阅读全文
摘要：Vue3中eslint代码格式化prettier和standard规则比较（为什么推荐使用prettier） 前言 在 vue-cli 创建项目时，对于 eslint 代码格式化一般我们会选 standard 或 prettier 方案，他们有什么区别和优缺点呢？ 插件准备 eslint 使用 es
阅读全文
摘要：由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择
阅读全文
摘要：解决这个问题的前提是：了解过js的变量存储类型、赋值。 懂的就跳过 变量存储类型分两类 ①基本类型：直接存储在栈中的数据。（字符串、布尔值、未定义、数字、null） ②引用类型：将该对象引用地址存储在栈中，然后对象里面的数据存放在堆中。（数组、对象、函数） 这里解释一下为什么null是基本类型：有人
阅读全文
摘要：先看效果图：女神镇楼 1.下载Vue-Quill-Editor 2.下载quill（Vue-Quill-Editor需要依赖） 3.代码 <template> <div class="edit_container"> <quill-editor v-model="content" ref="myQu
阅读全文
摘要：平时我们用element-ui组件库的时候，用的很多组件都可以解决日常工作中的需要，最近遇到了一个需要搭建一个树形结构的表格，但element组件没有提供，这时就需要自己去通过第三方组件来实现这个功能了。那么如何才能实现这样的结构方式呢？就需要通过vue-table-with-tree-grid这个
阅读全文
摘要：问题描述： 数据使用el-table加载，大概有1万多条。页面非常卡，查看内存占用到1.1个G，存在严重的性能问题。 考虑思路： 1、用table或者pl-table替换el-table。尝试后发现性能提升不大，仍然占用大量内存。 2、网上很多解决方案是说通过分页来加载，但我们的列表数据有关联，不能
阅读全文
摘要：如下这个html标签，最终根据数据返回值是，1则表示男性，2则表示女性，渲染2种不同的icon图标。 有2种实现方法： 1、数组方法 提示：数组中的gender和bg-muted我这里是要加引号的，因为我这里就是字符串，如果不加引号的，代表的是data中的一项数据。 2、字符串拼接方法 提示：gen
阅读全文
摘要：用vue做的项目，有个需求就是关闭浏览器的时候，需要往后台提交有个接口，来监听这个账号有没有下线。 网上找了很多种方法，一直没有实现。 主要困惑点： 1、浏览器关闭是事件，是什么 onbeforeunload、onunload 又是各种百度， window.addEventListener( ‘be
阅读全文
摘要：概述内容 mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容
阅读全文
摘要：一、概念 // 有name的属于具名插槽，没有name属于匿名插槽 <app> <div slot="a">xxxx</div> <div slot="b">xxxx</div> </app> <slot name="a"></slot> <slot name="b"></slot> 普通插槽渲染的
阅读全文
摘要：作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。 实际上，插槽的
阅读全文
摘要：1、Vue中插槽的作用和使用方法 定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染，如下例。 <div id="root"> <child> 需要插槽才能渲染的内容 <p>Dell</p> <p>Lee</p>
阅读全文
