画出你的思维密码！Vue与jsmind合体，事半功倍

这个叫思维导图，就是把脑子里的想法画在纸上，用线和点来表示概念之间的关系。这么一弄，它们之间的关系就清晰多了！这个东西超级实用，学新知识、解决问题、搞定项目统统能用，让你看得更明白，想得更深入，做事速度飞快，解决问题也变得简单多了。

Vue框架和jsmind库介绍

Vue这框架真是好用得很，早点学就能上手快速做网页了，动效那是美的嘞！再说那个jsmindHTML5的思维导图库也不错，轻轻松松就能弄出既好看又实用的图。

准备环境和资源

搞定一幅有趣的Vue跟jsmind协作出的思维导图，得先给自己备齐环境和素材！在项目中装入它们的库文件就好了，无论是从npm上下载，还是直接从CDN那儿拷贝都行。接着，愉快地创建一个有互动功能的思维导图吧～

创建Vue实例与设置jsmind容器

敲敲代码就能做个Vue小东西了！给它留个“jsmind”地方，装上你的思维导图！这样子，想怎么改就怎么改，看着不爽就修，用起来肯定超棒！

初始化思维导图数据对象

  

    

  


import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'
export default {
  mounted() {
    const mind = {
      meta: {
        name: '思维导图',
        author: '作者'
      },
      format: 'node_array',
      data: [
        { id: 'root', isroot: true, topic: '主题', direction: 'right', expanded: true }
      ]
    }
    const jm = new jsMind({
      container: 'jsmind_container',
      editable: true,
      theme: 'primary'
    })
    jm.show(mind)
  }
}


#jsmind_container {
  width: 100%;
  height: 500px;
}

首先，得先画个起始图，跟盖房子打地基差不多道理。这个关键图其实就是给大脑提供一份地图，告诉你怎么安排导图内容的前后顺序。

显示与操作思维导图

搞定数据和初始设置，简单得很，哪个网站看着有趣就试试呗，跟着提示走就能学会制作炫酷的动态思维导图！要是你还有兴趣玩点别的，那就试试Vue组件里的操作，添加节点、删掉节点或者改变节点啥的，随心所欲~

动态操作及事件响应

告诉你JSMind做的思维导图，咱们可改！比如说把Vue的事件处理给换换，就能直接搞定这么一来，咱们就随心所欲地玩啦～

优化用户体验与功能扩展

你可能不知道，我们的思维导图可不仅仅是基本功能，还有很多实用的小窍门能帮你玩得更溜！比如可以撤销重做啊、随心所欲地拖动节点调整位置呗，当然也少不了随手就能保存编辑中的思维导图咯~这样子你就可以更加自如地梳理思路、表达想法了！

  

    

    添加节点
    删除节点
    修改节点
  


import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'
export default {
  mounted() {
    // 初始化思维导图
  },
  methods: {
    addNode() {
      const node = {
        id: 'node_id',
        parentid: 'root',
        topic: '子节点'
      }
      jm.add_node(node.id, node.parentid, node.topic)
    },
    deleteNode() {
      const nodeid = 'node_id'
      jm.remove_node(nodeid)
    },
    editNode() {
      const nodeid = 'node_id'
      const topic = '修改后的节点'
      jm.update_node(nodeid, topic)
    }
  }
}


#jsmind_container {
  width: 100%;
  height: 500px;
}

灵活性与交互性

用Vue和jsmind做的思维导图，简直牛得不行！想怎么弄就怎么弄，在哪儿都能用，也特容易分享。速度又快又简单，是提升工作效率的神器啊～

总结与展望

跟Vue和JSMind混在一起做思维导图，其实超简单！按照下面几个傻瓜式操作步骤，立马就能动手了！想做成什么样就做成什么样，实用又好看全看你自己。以后肯定还有各种好玩儿的新花样等我们去发现，赶紧开动脑筋！