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

我正尝试使用一个外部JS库，它可以在vue.js应用程序中生成绘图画布（atrament.js）。在vue.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>标签产生的画布。

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

来源

2016-12-26 user1294122

你应该有atr变量作为VUE data变量，就像下面：

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

现在atr将在VUE可用的应用程序通过this.atr，你可以做它需要的操作。

来源

2016-12-26 03:26:30 Saurabh

感谢您的回答，我已经尝试过了，但是当我这样做时画布不起作用。出于某种原因，画布出现，但我无法在上面画。 JS控制台中没有显示错误。当我这样做时，我在html文件的末尾加载了vue应用程序，因为如果我将它放在上，那么它会显示“

@ user1294122你可以创建一个小提琴吗？ – Saurabh

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

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

来源

2016-12-26 08:09:34 CodinCat

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

回答

相关问题