在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庫應用程序

回答

相關問題