手把手教你使用vue创建第一个vis.js

先看一下实现效果吧，如下图：

为什么要写这篇文章呢？因为之前有浅浅的了解一下vis.js，后期开发中没有使用vis，所以太深奥的也不懂，但是当时是用js写的。这两天有人问我用vue怎么写，然后说看到很多地方说npm，他连npm在哪输入都不知道。

那么下面这篇文章就超级啰唆的将一下npm install vis在哪输入，输入之后要怎么使用？？？

首先你总得需要有个vue项目吧，其次你有vue项目的话，你是不是还需要一个写代码的编辑器呀。

我正常使用的是webStrom,可在下图所示终端位置输入命令进行安装，安装完成后package.json中会有你安装的vis出现

npm install vis

当然，如果你使用的是vsCode,如下图所示打开终端输入npm安装，，，当然我这边vsCode没有拉项目进来，你肯定要拉自己的项目进来，在项目下npm。

在啰唆一点，如果你还是找不到终端，快捷键ctrl+shift+`打开终端。

好了，安装完了，接下来开始导入。有人问我导入在哪里导，我这个暴脾气一下子就上来了，当然是你哪里需要使用vis往哪个文件导啊。。。。

如果还不知道，那我就在啰唆一点，那你是不是有个vue文件准备把拓扑图放在这个文件写呀，那你肯定在这个文件导入呀。

接着问题又来了，那我这个导入写哪呢？我告诉你写在<script>下面，还专门截了图告诉你，但是如果你说script在哪？那真的是，，，，，我都不想暴脾气了，你自己悟吧。。。

import vis from 'vis'

导入完成过，要开始写页面标签了，也就是视图部分，用来控制你拓扑图在页面上的显示，

代码如下：你的拓扑图就显示在id为mynetwork的div中

<template><div><div id="mynetwork"></div></div>
</template>

写完视图部分，当然要开始js部分咯，js都是照着官网复制粘贴的咯，代码如下：

<script>
import vis from 'vis'export default {name: 'vis',data () {return {// 相当于原生js声明变量咯，下面声明的是节点和边(连线)的数据nodes: new vis.DataSet([{ id: 1, label: 'Node 1' },{ id: 2, label: 'Node 2' },{ id: 3, label: 'Node 3' },{ id: 4, label: 'Node 4' },{ id: 5, label: 'Node 5' }]),// from和to中的数字为nodes中的id,from: 1, to: 3 代表节点1和节点3直接有一条连线edges: new vis.DataSet([{ from: 1, to: 3 },{ from: 1, to: 2 },{ from: 2, to: 4 },{ from: 2, to: 5 }])}},mounted () {this.globalTrace() // 页面初始化的时候调用方法},methods: {/*** vis实现*/globalTrace () {// 建立拓扑图var container = document.querySelector('#mynetwork')// 以vis格式提供数据var data = {nodes: this.nodes,edges: this.edges}var options = { // 对vis的一些设置}// 初始化你的网络this.network = new vis.Network(container, data, options)}}
}
</script>

这样整个完整的功能就实现了，不知道这样算不算手把手教学了。如果还不懂那我真的，，，，算了，在上一份从头到尾的完成代码吧。。

<template><div><div id="mynetwork"></div></div>
</template><script>
import vis from 'vis'export default {name: 'vis',data () {return {// 相当于原生js声明变量咯，下面声明的是节点和边(连线)的数据nodes: new vis.DataSet([{ id: 1, label: 'Node 1' },{ id: 2, label: 'Node 2' },{ id: 3, label: 'Node 3' },{ id: 4, label: 'Node 4' },{ id: 5, label: 'Node 5' }]),// from和to中的数字为nodes中的id,from: 1, to: 3 代表节点1和节点3直接有一条连线edges: new vis.DataSet([{ from: 1, to: 3 },{ from: 1, to: 2 },{ from: 2, to: 4 },{ from: 2, to: 5 }])}},mounted () {this.globalTrace() // 页面初始化的时候调用方法},methods: {/*** vis实现*/globalTrace () {// 建立拓扑图var container = document.querySelector('#mynetwork')// 以vis格式提供数据var data = {nodes: this.nodes,edges: this.edges}var options = { // 对vis的一些设置}// 初始化你的网络this.network = new vis.Network(container, data, options)}}
}
</script><style scoped>#mynetwork {width: 600px;height: 400px;border: 1px solid lightgray;}
</style>

这样应该就懂了吧。。。

手把手教你使用vue创建第一个vis.js相关推荐

手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
python编程例子输入输出-推荐：手把手教你用Python创建简单的神经网络（附代码）...
原标题:推荐 :手把手教你用Python创建简单的神经网络(附代码) 作者:Michael J.Garbade:翻译:陈之炎:校对:丁楠雅本文共2000字,9分钟. 本文将为你演示如何创建一个神经网 ...
手把手教你把Vim改装成一个IDE编程环境(图文)
手把手教你把Vim改装成一个IDE编程环境(图文) By: 吴垠 Date: 2007-09-07 Version: 0.5 Email: lazy.fox.wu#gmail.com Homepage ...
手把手教你如何用Python制作一个电子相册？末附python教程
这里简单介绍一下python制作电子相册的过程,主要用到tkinter和pillow这2个库,tkinter用于窗口显示照片,pillow用来处理照片,照片切换分为2种方式,一种是自动切换(每隔5秒) ...
一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部前言介绍手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文效果展示: 说点 ...
手把手教你用苹果CMS做一个电影视频网站可直接在线播放
现在大家在网上看电影很方便了,因为电影网站多如牛毛!那很多人在想,做电影网站难么?能否拥有一个属于自己的电影网站呢?其实真的可以,而且很简单下面我们就来手把手的教你如何做一个电影网站!因为我的空间是P ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
独家 | 手把手教你用Python创建简单的神经网络（附代码）
作者:Michael J.Garbade 翻译:陈之炎校对:丁楠雅本文共2000字,建议阅读9分钟. 本文将为你演示如何创建一个神经网络,带你深入了解神经网络的工作方式. 了解神经网络工作方式的最 ...

手把手教你使用vue创建第一个vis.js

手把手教你使用vue创建第一个vis.js相关推荐

最新文章

热门文章