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

我正在尝试使用一个外部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>

var main=新的Vue({
el:“#vueapp”
});
var atr=ATRANT（“画布”，500500）；

这样，无论我在哪里放置

标记，画布都会生成

---

但是，这似乎不是一个非常优雅的选项，vue应用程序无法访问

atr

var，例如用于清除画布。那么，哪种方法是正确的呢？

您应该将

atr

变量作为vue变量，如下所示：

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

var main=新的Vue({
el:“#vuepp”，
数据：{
atr:atrament（“画布”，500500）
}
});

---

现在，vue应用程序将通过

this.atr

提供

atr

，您可以对其执行所需的操作。

由于vue是一个基于组件的UI库，您应该尝试使用组件

---

考虑将画布包装到组件中，您的父元素将通过道具和事件与之对话。Vue对此有一个非常清晰的文档：

感谢您的回答，我已经尝试过了，但是当我这样做时，画布不起作用。不知什么原因，画布出现了，但我不能在上面画画。JS控制台中不显示任何错误。执行此操作时，我将在html文件末尾加载vue应用程序，因为如果我将其放在上，它会显示“找不到标记”，因此画布库实际上正在执行某些操作。@user1294122您能创建一把小提琴吗？