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

【问题标题】：Using external js library within vue.js app在 vue.js 应用程序中使用外部 js 库
【发布时间】：2017-05-10 14:48:42
【问题描述】：

我正在尝试使用在 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，例如用于清除画布。那么，这样做的正确方法是什么？

【问题讨论】：

标签： javascript canvas vue.js vuejs2

【解决方案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应用中可用，您可以对其进行必要的操作。

【讨论】：

感谢您的回答，我已经尝试过了，但是当我这样做时画布不起作用。出于某种原因，画布出现了，但我不能在上面画画。 JS 控制台中没有显示错误。这样做时，我在 html 文件的末尾加载 vue 应用程序，因为如果我把它放在上，那么它会说“
@user1294122 你能创建一个小提琴吗？

【解决方案2】：

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

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

【讨论】：