Vue2
关注
分享
扫一扫
文章平均质量分 65
vue的使用和源码学习
Echoyya、
这个作者很懒，什么都没留下…
展开
-
可视化—gojs 超多超实用经验分享(一)
目录1. 设置分组模板，默认样式，统一最小宽度，展开收起状态监听2. 分组名称显示成员个数: 分组名称+成员个数: name(children)3. 分组成员为空时，不显示 placeholder 占位留白4. 分组第一次展开请求获取成员接口，监听展开收起状态 subGraphExpandedChanged:fn5. 设置节点模板6. 设置节点的 icon，此处以文字为例7. 文案太长截取显示....原创 2023-05-04 15:18:00 · 2198 阅读 · 1 评论 -
可视化—AntV G6 紧凑树实现节点与边动态样式、超过X条展示更多等实用小功能...
通过一段时间的使用和学习，对G6有了更一步的经验，这篇博文主要从以下几个小功能着手介绍，文章最后会给出完整的demo代码。目录1. 树图的基本布局和使用2. 根据返回数据的属性不同，定制不一样的节点样式3. 节点 label 文案显示过长时，通过截断的方式，显示...4. 当一个父节点包含children叶子节点时，label后显示children的长度,格式为：node.label(chil...原创 2023-03-29 14:37:00 · 1319 阅读 · 0 评论 -
可视化—AntV G6 高亮相邻节点的两种方式
目录内置的高亮节点自定义高亮自定义高亮时保持原始颜色总结案例完整代码通过官方文档，可知高亮相邻节点分为两种方法，文档描述并不是很清楚，对刚接触这个库的小白并不是很友好，慢慢总结慢慢来吧内置的高亮节点是通过内置的Behavior activate-relations来实现，Behavior 是 G6 提供的定义图上交互事件的机制。与交互模式 Mode配合使用activate-relatio...原创 2022-12-28 15:57:00 · 2194 阅读 · 0 评论 -
优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载
目录路由的拆分VUEX模块拆分Element UI库按需加载的优雅写法路由的拆分项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理。require.context() 是webpack提供的语法， 相当于前端的读写文件，返回的 files是一个函数，files.keys()执行，返回获取到的文件名(是一个数组)，再通过files(keys)...原创 2022-11-01 20:26:00 · 318 阅读 · 0 评论 -
Vue源码剖析
目录Vue 响应式数据Vue 中如何进行依赖收集Vue 中模板编译原理Vue 生命周期钩子Vue 组件 data 为什么必须是个函数？nextTick 原理set 方法实现原理虚拟 dom 的作用diff 算法的实现原理Vue 中 key 的作用和原理vue 初渲染流程vue 更新流程 依赖收集实现过程vue 异步更新的实现流程组件的初始化流程keep-alive 实现原理Vue 响应式数据什...原创 2022-09-26 19:16:00 · 256 阅读 · 0 评论 -
8行JS代码实现Vue穿梭框
实现效果完整 demo 参考<template> <div class="contain"> <ul class=""> <li class="count">{{num(leftData,true)}}/{{leftData.length}}</li> <li v-for="(city,i...原创 2022-09-17 20:59:00 · 134 阅读 · 0 评论 -
2行JS代码实现Vue全选和反选
实现效果:第一行：子选项的选中状态 等于 全选框的状态this.letters.forEach(item => item.check = this.checkAll)第二行： 使用数组 every 方法的特性，数组的每一项均满足某一条件时，结果为 true也可以使用数组的 filter方法，判断返回子选项为 true的列表的长度，等同于数据源的长度时，可认定为全选状态，否则非全...原创 2022-09-01 07:31:00 · 59 阅读 · 0 评论 -
可视化—D3学习笔记小小案例记录一下
D3全称是Data-Driven Documents数据驱动文档，是一个开源的javascript库，可以用于数据可视化图形的创建，该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上，D3扮演的是一...原创 2022-07-05 21:36:00 · 199 阅读 · 0 评论 -
可视化—AntV G6实现节点连线及展开收缩分组
AntV 是蚂蚁金服全新一代数据可视化解决方案，主要包含数据驱动的高交互可视化图形语法G2，专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。demo使用数字模拟真实的节点及分组数据。combo内的nodes亦是使用随机数生成，节点之前的连线edges由节点从小到大依次连接 ，大家在用的时候，可以注意一下连线对象的 source 和 target 两个属性即可安装...原创 2022-07-03 12:24:00 · 2914 阅读 · 0 评论 -
Vue2.0 多种组件传值方法-不过如此的 Vuex
码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14404397.html目录码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14404397.html一、父向子传值二、子向父传值 - 1. 事件分发 emit三、子向父传值 - 2. 父组件动态绑定方法四、(主动)父...原创 2021-02-15 20:35:00 · 89 阅读 · 0 评论 -
简述vue-cli 2.x和vue-cli 3+在项目构建、运行、编译执行时的区别
码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14363272.html关于VUE的项目，有个问题一直不是特别清楚 ，不同公司的项目，其项目结构，对应配置文件位置，及启动打包对应的命令等，都有所不同，近期通过查找相关资料及公开视频教学，整理一篇笔记，希望能帮跟我一样困惑的同学，拨开迷雾！公司在创建项目的时候，都会倾向使用脚手架...原创 2021-02-02 17:32:00 · 82 阅读 · 0 评论 -
Vue 数组和对象更新，但视图未更新，背后的故事
在实际开发中，遇到遍历数组和对象，当property 发生改变时，并没有触发视图的更新今天来浅显的聊聊这背后的故事，有说的不对地方，还望指出！本人博文地址：https://www.cnblogs.com/echoyya/p/14041271.htmlVue 如何追踪数据变化参考文献：官网 vue.js把一个普通的 JS 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有...原创 2020-11-26 11:12:00 · 49 阅读 · 0 评论 -
在html文件中创建并调用vue组件的方法
最近在写项目的时候，总是遇到在html中使用vue.js的情况，且页面逻辑较多，之前的项目经验都是使用脚手架等已有的项目架构，使用.vue文件完成组件注册，及组件之间的调用，还没有过在html中创建组件的经验，所以借此机会学习总结一下。方法一：Vue.extend( options )用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要...原创 2020-11-16 16:25:00 · 400 阅读 · 0 评论 -
html+vue.js 实现分页可兼容IE
当功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案，先看一下实现效果：上代码：1.简单搞一搞 CSS，此处代码有折叠,Click Me~[v-cloak] { display: none; } #app { text-align: center; padding-top:...原创 2020-11-06 16:54:00 · 90 阅读 · 0 评论 -
Vue项目刷新页面 IE/360 浏览器 input输入框不清空问题处理
本人在项目开发中，遇到IE/360关于input输入框的兼容问题，背景介绍：html中直接引用vue.js，及相关组件，input内容不为空时，刷新页面，chrome，Firefox显示正常，IE/360刷新后会保留上次输入内容。<body onload="javascript:document.getElementById('frm1').reset();"> &l...原创 2020-09-01 16:43:00 · 160 阅读 · 0 评论 -
Vue禁止用户复制文案 + 兼容 IE
vue必须要加载完才可以操作dom，或者在mounted和created时使用this.$nextTick方法，使dom生成后进行相关操作。created() { this.$nextTick(() => { // 禁用右键 document.oncontextmenu = new Function("event.returnValue=fal...原创 2020-08-03 15:30:00 · 60 阅读 · 0 评论 -
Vue.js +pdf.js 处理响应pdf文件流数据，前端转图片预览不可下载
使用场景及原因实际业务中，一些说明书或协议仅支持用户在线预览，为避免用户自行下载，并进行修改，引发纠纷，特将文件已文件流的形式，传给前端并转为图片显示，此时可能会有人问，为什么不直接在后端转图片，前端直接展示呢？那是因为当系统用户数量较高时，高并发会时服务器有很大的压力，可能会导致系统压测不能通过，前端转图片，可以将处理压力分摊至每个客户端。本次操作为Vue.js + pdf.js本案例...原创 2020-07-20 15:51:00 · 157 阅读 · 0 评论