Когда вы изучаете Vue.js, в Интернете очень много руководств. Я один из разработчиков, поддерживающих код jQuery на работе. Когда вы закончили пару руководств и поняли, что такое Vue.js, у вас может возникнуть вопрос: «Тогда как я могу добавить Vue.js в это приложение jQuery?»
На самом деле это довольно просто, если вы начали изучать Vue.js с vuejs-templates, вы знаете 90% этого. Вам нужно всего 4 шага!
Шаг 1. Создайте компонент Vue.js
Компонент, который я создал, является оболочкой vue-multiselect. Выглядит это так:
Любой компонент Vue.js подойдет. Вы можете добавить все, что вы сделали, через учебные пособия.
Шаг 2. Добавьте кусок JS-кода в качестве моста
Исходя из моего опыта, трудно ожидать, что код jQuery всегда будет очень удобочитаемым. Мы хотели бы избежать недоразумений относительно того, как Vue.js живет в коде jQuery. Код соединяет обширный континент jQuery и остров Vue.js.
Вы можете видеть, что свойства вашего компонента Vue.js передаются через data. Теперь bind имеет ваш компонент Vue в своей функции.
Шаг 3. Добавьте место назначения, в которое приземляется ваш компонент Vue.js.
Вам нужно отредактировать только одно: HTML - вы уже должны знать, как добавить компонент Vue.js в приложение Vue.js. То же самое и в приложении jQuery.
Шаг 4. Добавьте компонент Vue.js в ваше приложение jQuery
Перед вызовом multiselector.bind() убедитесь, что HTML-код отображается. Легкий!
Наконец, если вы хотите преобразовать свой jQuery в Vue.js
Если вы хотите преобразовать приложение jQuery в приложение Vue.js, в блоге GitLab есть сообщения, которые могут дать вам несколько хороших мыслей. Преобразование настолько привлекательно, но требует много времени. Если вы работаете в стартапе, у вас никогда не будет этого ресурса. Я считаю, что внедрение Vue.js в приложение jQuery по крупицам с последующей заменой всего на Vue.js, если вы хотите это сделать, - лучшая стратегия. Эти сообщения в блоге хорошо объясняют.
Удачного кодирования!
