Использование внешней библиотеки js в приложении vue.js

Question

Я пытаюсь использовать внешнюю библиотеку JS, которая создает холст для рисования (atrament.js) в приложении vue.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, например, для очистки холста. Итак, как правильно это сделать?

javascript canvas vue.js vuejs2

3

user1294122 26 Дек 2016 в 06:23

Answer 1

У вас должна быть переменная atr в качестве переменной vue data, как показано ниже :

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

Теперь atr будет доступен в приложении vue через this.atr, и вы сможете выполнять с ним необходимые операции.

0

Saurabh 26 Дек 2016 в 06:26

Спасибо за ваш ответ, я уже пробовал это, но холст не работает, когда я это делаю. По какой-то причине появляется холст, но я не могу на нем рисовать. В консоли JS ошибок не отображается. При этом я загружаю приложение vue в конец html-файла, потому что, если я помещаю его в , появляется сообщение «Теги

–

user1294122

26 Дек 2016 в 17:00

Вы можете создать из него скрипку?

–

Saurabh

27 Дек 2016 в 06:27

Answer 2

Поскольку Vue представляет собой библиотеку пользовательского интерфейса на основе компонентов, вам следует подумать о компонентах .

Подумайте о том, чтобы обернуть этот холст в компонент, и ваш родительский элемент будет общаться с ним через свойства и события. У Vue есть очень чистая документация для этого: https://vuejs.org/v2/guide/components .html

0

CodinCat 26 Дек 2016 в 11:09

Использование внешней библиотеки js в приложении vue.js

2 ответа

Похожие вопросы

Новые вопросы

javascript