vue.js 앱 내에서 외부 js 라이브러리 사용

vue.js 앱 내에서 외부 js 라이브러리 사용

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>태그를 지정합니다.

하지만, 이것은 매우 우아한 옵션이 아닌 것 같습니다.atr캔버스 지우기와 같이 vue 앱에서 var에 액세스할 수 없습니다.그럼, 어떤 방법이 올바른 방법일까요?

그랬어야 했는데atr다음과 같이 vue 데이터 변수로 변수를 지정합니다.

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

지금이다atr를 통해 vue 앱에서 사용할 수 있습니다.this.atr필요한 작업을 수행할 수 있습니다.

Vue는 구성 요소 기반 UI 라이브러리이므로 구성 요소를 고려해 보아야 합니다.

캔버스를 컴포넌트로 감싸고 부모 요소가 소품이나 이벤트를 통해 대화하는 것을 고려해 보십시오.Vue는 이에 대한 매우 깨끗한 문서를 보유하고 있습니다.https://vuejs.org/v2/guide/components.html

언급URL : https://stackoverflow.com/questions/41326140/using-external-js-library-within-vue-js-app