Vue.js 如何删除对jquery的依赖关系

在研究如何将Plotly与Vue集成时，我发现了以下示例：

它满足我的要求，但它需要jqueryjs，我想消除jqueryjs文件的依赖性

我试图将下面的代码添加到组件中

ref='chart_id'

在安装的（）中，我更改为：

this.$refs.chart_id.$on('plotly_hover', this.hover);

但看起来好像没用

如何更改代码，我只是认为应该能够以另一种方式将jquery代码排除在外，以节省一页加载的移动时间

---

谢谢

jQuery仅在

mounted

中用于两个可以轻松重写的绑定：

/。。。
安装的（）{
这个.Plot（）；
this.$watch（“data”，this.Plot，{deep:true}）；
window.addEventListener（“resize”，this.onResize）；
},
在…之前{
removeEventListener（“resize”，this.onResize）；
},
方法：{
绘图（）{
Plotly.newPlot（this.divId、this.data、this.layout）；
this.$el.on（'plotly_hover'，this.hover）；
},
//...
}
//...

由于正常的

悬停

事件在

事件

内有

点

，而不是在

事件数据

内，因此您还需要修改悬停功能以在两个位置查找

点

：

hover: function (event, eventData) {
  this.$emit('hover', eventData
    ? eventData.points
    : event.points,
  this.divId);
},

。。。包括这两种情况

---

在这里查看它在没有jQuery的情况下的工作情况：

jQuery仅在

挂载的

中用于两个可以轻松重写的绑定：

/。。。
安装的（）{
这个.Plot（）；
this.$watch（“data”，this.Plot，{deep:true}）；
window.addEventListener（“resize”，this.onResize）；
},
在…之前{
removeEventListener（“resize”，this.onResize）；
},
方法：{
绘图（）{
Plotly.newPlot（this.divId、this.data、this.layout）；
this.$el.on（'plotly_hover'，this.hover）；
},
//...
}
//...

由于正常的

悬停

事件在

事件

内有

点

，而不是在

事件数据

内，因此您还需要修改悬停功能以在两个位置查找

点

：

hover: function (event, eventData) {
  this.$emit('hover', eventData
    ? eventData.points
    : event.points,
  this.divId);
},

。。。包括这两种情况

---

查看是否在没有jQuery的情况下工作：

发现一个错误：如果绘图数据发生更改，则无法获取点值。你能帮我再看一遍代码吗？谢谢@taoRight，因为绑定现在是本地的，而不是通过窗口对象委派的，所以它在replot上运行。好的，所以我们需要用一个函数来替换watcher中的

this.Plot

，该函数同时执行：Plot和rebind。我把它命名为重新绑定。检查更新的笔。而且，我们可以在销毁之前安全地删除

中的
this.$el.off
。显然，考虑到当前函数，您可以简单地将绑定移到Plot（）中；并一起禁用重新绑定方法。因为您不需要在不绑定的情况下
Plot（）
。我将更新画笔。发现一个错误：如果绘图数据更改，则无法获取点值。你能帮我再看一遍代码吗？谢谢@taoRight，因为绑定现在是本地的，而不是通过窗口对象委派的，所以它在replot上运行。好的，所以我们需要用一个函数来替换watcher中的
this.Plot
，该函数同时执行：Plot和rebind。我把它命名为重新绑定。检查更新的笔。而且，我们可以在销毁之前安全地删除
中的
this.$el.off
。显然，考虑到当前函数，您可以简单地将绑定移到Plot（）中；并一起禁用重新绑定方法。因为您不需要在不绑定的情况下
Plot（）
。我会更新这支笔的。