vue.jsアプリ内で外部jsライブラリを使用する

Question

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アプリでは、たとえばキャンバスをクリアするためにvarにアクセスできません。だから、これは正しい方法ですか？

Answer 1

次のように、VUE data変数としてatr変数を持っている必要があります。今

<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