- 博客(10)
- 收藏
- 关注
原创 基于Vue与Cytoscape实现企业控股关系图
1.需求绘制如爱企查所示的关系图,主要展示控股关系,图形按照控股链路层次递进,链路最长的企业放置在最下面;要求节点可拖动,拖动时连线和线上文本跟随拖动;鼠标悬浮显示节点相关信息;每条链路开始的节点顶部对齐;每条链路开始的节点顶部展示一个描述信息,该节点被拖动时,提示跟随拖动;点击每个节点,高亮展示从该节点开始往后的链路及节点,其余无关联节点和上层节点与连线透明度均降低;节点和节点之间可能出现环;数据是动态加载的;综上,需要寻找支持类似树或流程图结构、节点样式可自定义,交互性强的绘图框架;
2022-01-25 16:12:29
2879
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
329
原创 Vue官方文档学习-处理边界情况
1.背景一些需要对 Vue 的规则做一些小调整的特殊情况,这些功能都是有劣势或危险的场景的2.访问元素&组件在绝大多数情况下,最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过在一些情况下做这些事情是合适的;(1) 访问根实例在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问;所有的子组件都可以将这个实例作为一个全局 store 来访问或使用;【注意】对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来
2021-03-02 19:13:49
176
原创 Vue官方文档学习-动态组件和异步组件
1.在动态组件上使用keep-alive(1) 场景当在多个组件之间进行切换(如选项卡)的时候,为了避免重复渲染导致的性能问题,可能会想对组件进行缓存。比如在某个选项卡中选择了某个菜单阅读某篇长文章,切换选项卡再切换回来,如果没有保持组件状态,菜单将回到初始选中状态。<!-- 动态切换显示的组件 --><component v-bind:is="currentTabComponent"></component>(2) 原因在切换新标签时,Vue都创建了一个新
2021-02-24 10:49:45
140
原创 Vue官方文档学习-插槽
1. 场景在开发中,经常需要向一个组件传递内容:<!-- 渲染会出错 --><alert-box>Something bad happened.</alert-box>插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口;2. 插槽内容插槽内可以包含任何模板代码,包括 HTML和其他组件;<!-- navigation-link组件定义 --><a v-bind:href="url" class="nav-
2021-02-23 18:44:19
132
原创 Vue官方文档学习-自定义事件
官方文档链接:https://cn.vuejs.org/v2/guide/components-custom-events.html1.事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换,触发的事件名需要完全匹配监听这个时间所用的名称;// 提交事件this.$emit('myEvent')<!-- 写成kebab-case没有任何效果 --><my-component v-on:my-event="doSomething"></my-co.
2021-02-22 14:30:32
105
原创 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
257
原创 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
190
原创 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
392
原创 ajax、fetch和axios的区别
一、jQuery ajax1.介绍统 Ajax 指的是 XMLHttpRequest(XHR),核心使用XMLHttpRequest对象;增加了对JSONP的支持2.缺点本身是针对MVC的编程,不符合现在前端**MVVM(Model-View-ViewModel)**的浪潮;VVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用;ViewModel 层向上与视图层进行双向数据绑定,向
2020-09-22 22:48:54
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人