在 vue.js 应用程序中使用外部 js 库

Question

我正在尝试使用在 vue.js 应用程序中生成绘图画布（atrament.js）的外部 JS 库。

我不确定这样做的正确方法是什么。 现在我只是在做：

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp'
    });
</script>
<script type="text/javascript">var atr = atrament("canvas", 500, 500);</script>

在我放置<canvas></canvas>标签的任何地方都会生成画布。

但是，这似乎不是一个非常优雅的选择，并且 vue 应用程序无法访问atr var，例如用于清除画布。 那么，这样做的正确方法是什么？

Answer 1

您应该将atr变量作为 vue数据变量，如下所示：

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp',
        data: {
          atr : atrament("canvas", 500, 500)
        }
    });
</script>

现在atr将通过this.atr在 vue 应用程序中可用，您可以对其进行所需的操作。

Answer 2

由于 Vue 是一个基于组件的 UI 库，你应该尝试在组件中思考。

考虑将该画布包装在一个组件中，您的父元素将通过道具和事件与其对话。 Vue 有一个非常干净的文档： https ://v2.vuejs.org/v2/guide/components.html