vue2 jsplumb插件的demo

Vue是一种用于构建用户界面的渐进式 JavaScript 框架，而jsPlumb是一个用于在网页上创建可拖拽连接线的JavaScript库。结合Vue和jsPlumb可以实现动态生成可拖拽并且连接的元素的效果。

使用Vue2和jsPlumb插件来创建一个demo时，首先需要引入Vue和jsPlumb的相关文件。然后，创建一个Vue实例来管理demo应用的数据和行为。

在Vue模板中，可以使用v-for指令和v-bind指令来动态渲染元素，使用v-on指令来绑定事件，以及使用jsPlumb提供的API来创建可拖拽并且连接的元素。

首先，在Vue的data中定义要生成的元素的数据数组，每个元素包含位置、样式和唯一标识等属性。然后，在Vue的created生命周期钩子中，使用jsPlumb的makeSource方法将元素设置为可拖拽并且可以连接的源端点。

接着，在模板中使用v-for指令遍历数据数组，动态渲染元素，并使用v-bind指令绑定元素的属性。同时，使用v-on指令绑定元素的拖拽事件。

在Vue的methods中，可以定义一个鼠标拖拽的回调函数，该回调函数会根据拖拽的位置将元素的位置属性进行更新。还可以定义一个连接的回调函数，当连接两个元素时，会触发该回调函数，可以在其中执行一些逻辑操作。

最后，在Vue的mounted生命周期钩子中，使用jsPlumb的makeTarget方法将元素设置为可拖拽并且可以连接的目标端点。

通过以上步骤，就可以创建一个基于Vue2和jsPlumb插件的demo，实现动态生成可拖拽并且连接的元素的效果。