L_Juan_Y-CSDN博客

原创基于Vue与Cytoscape实现企业控股关系图

1.需求绘制如爱企查所示的关系图，主要展示控股关系，图形按照控股链路层次递进，链路最长的企业放置在最下面；要求节点可拖动，拖动时连线和线上文本跟随拖动；鼠标悬浮显示节点相关信息；每条链路开始的节点顶部对齐；每条链路开始的节点顶部展示一个描述信息，该节点被拖动时，提示跟随拖动；点击每个节点，高亮展示从该节点开始往后的链路及节点，其余无关联节点和上层节点与连线透明度均降低；节点和节点之间可能出现环；数据是动态加载的；综上，需要寻找支持类似树或流程图结构、节点样式可自定义，交互性强的绘图框架；

2022-01-25 16:12:29 3034 2

原创 D3绘制带刻度的柱状图

1.问题 Vue结合D3绘制带有横纵坐标的柱状图，并绑定鼠标hover和点击事件，版本为D3 v6 <template> <div> <h1>D3练习</h1> <div id="container"> <p>hello world 1</p> <p>hello world 2</p> </div> <!-- <div

2021-03-09 16:38:17 350

原创 Vue官方文档学习-处理边界情况

1.背景一些需要对 Vue 的规则做一些小调整的特殊情况，这些功能都是有劣势或危险的场景的 2.访问元素&组件在绝大多数情况下，最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过在一些情况下做这些事情是合适的； (1) 访问根实例在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问; 所有的子组件都可以将这个实例作为一个全局 store 来访问或使用；【注意】对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来

2021-03-02 19:13:49 190

原创 Vue官方文档学习-动态组件和异步组件

1.在动态组件上使用keep-alive (1) 场景当在多个组件之间进行切换(如选项卡)的时候，为了避免重复渲染导致的性能问题，可能会想对组件进行缓存。比如在某个选项卡中选择了某个菜单阅读某篇长文章，切换选项卡再切换回来，如果没有保持组件状态，菜单将回到初始选中状态。  <component v-bind:is="currentTabComponent"></component> (2) 原因在切换新标签时，Vue都创建了一个新

2021-02-24 10:49:45 158

原创 Vue官方文档学习-插槽

1. 场景在开发中，经常需要向一个组件传递内容：  <alert-box>Something bad happened.</alert-box> 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口； 2. 插槽内容插槽内可以包含任何模板代码，包括 HTML和其他组件；  <a v-bind:href="url" class="nav-

2021-02-23 18:44:19 166

原创 Vue官方文档学习-自定义事件

官方文档链接：https://cn.vuejs.org/v2/guide/components-custom-events.html 1.事件名不同于组件和 prop，事件名不存在任何自动化的大小写转换，触发的事件名需要完全匹配监听这个时间所用的名称； // 提交事件 this.$emit('myEvent')  <my-component v-on:my-event="doSomething"></my-co.

2021-02-22 14:30:32 130

原创 Vue官方文档学习-Prop

1.Prop的大小写 HTML中的属性名是大小写不敏感的，故浏览器会把所有大小写字符解释为小写字符，使用驼峰命名法的prop名需要使用其等价的kebab-case(短横线分隔命名)，如果使用字符串模板，则不存在这个限制。 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <

2021-02-20 17:58:32 289

原创 Vue官方文档学习-组件

组件基础 1.定义组件是可复用的Vud实例，与new Vue接收相同的选项，包括data、computed、watch、methods以及生命周期钩子。 el是根实例特有的选项. 【注意】：data属性必须是一个函数，以让每个实例都可以独立维护一份被返回对象的独立的拷贝。否则，多次使用同一个组件，若某个实例改变了data中的属性值，会导致其余实例也被修改。举例 // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { // 1

2021-02-20 14:18:27 227

原创 Vue文件下载

背景在Vue使用axios请求下载文件，通常前端向后端请求下载文件流，后端返回文件流再使用a标签链接点击进行下载的方式，但在测试过程中发现，遇到了在谷歌浏览器和火狐下没问题，IE浏览器无反应、文件乱码等问题…… 1.IE浏览器兼容问题 ## (1)原因使用a标签进行下载的方式在IE下失效主要是因为IE浏览器下，不支持a标签的download属性，该属性只有Chrome和火狐支持。 (2) 解决方案 //这里res.data是返回的blob对象 // application/vnd.openxmlfo

2021-02-20 13:52:13 413

原创 ajax、fetch和axios的区别

一、jQuery ajax 1.介绍统 Ajax 指的是 XMLHttpRequest（XHR），核心使用XMLHttpRequest对象；增加了对JSONP的支持 2.缺点本身是针对MVC的编程,不符合现在前端**MVVM(Model-View-ViewModel)**的浪潮； VVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用； ViewModel 层向上与视图层进行双向数据绑定，向

2020-09-22 22:48:54 145

L_Juan_Y的博客