Question

我正在尝试使用外部JS库，在vue.js应用程序中生成绘图画布（atrament.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 data变量，如下所示：

<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://vuejs.org/v2/guide/components.html

在vue.js app中使用外部js库

2 个答案: