vue使用vis-network实现动态添加修改删除节点和线

你可以使用以下步骤实现：

1. 引入vis-network库和Vue组件：

   import { Network } from 'vis-network';
   import { DataSet } from 'vis-data';

2. 创建Vue组件并在mounted钩子函数中初始化vis-network：

   <template>
     <div ref="network"></div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         nodes: new DataSet([]),
         edges: new DataSet([])
       };
     },
     mounted() {
       const container = this.$refs.network;
       const options = {};
       this.network = new Network(container, { nodes: this.nodes, edges: this.edges }, options);
     }
   };
   </script>

3. 添加节点和边：

   // 添加节点
   this.nodes.add({ id: 1, label: 'Node 1' });
   this.nodes.add({ id: 2, label: 'Node 2' });
   
   // 添加边
   this.edges.add({ id: 1, from: 1, to: 2 });

4. 修改节点和边：

   // 修改节点
   this.nodes.update({ id: 1, label: 'New label' });
   
   // 修改边
   this.edges.update({ id: 1, label: 'New label' });

5. 删除节点和边：

   // 删除节点
   this.nodes.remove(1);
   
   // 删除边
   this.edges.remove(1);

6. 处理事件：

   this.network.on('click', (params) => {
     console.log(params.nodes);
   });

以上是基本的使用方法，你可以根据自己的需求进行扩展。