Найти тему
Sergey Pavlovskiy

№1 Что такое Vue.js и как интегрировть его в свой проект?

Фронт-энд на пальцах!
Фронт-энд на пальцах!

Vue.js - это JavaScript-инфраструктура с открытым исходным кодом, которая используется для создания пользовательских интерфейсов. Vue.js более сфокусирован на части представления модели MVC по сравнению с другими средами JS . Он также имеет гораздо более простой синтаксис по сравнению с такими фреймворками, как React или Angular, и его легче добавить в проект.

Vue.js также можно использовать в качестве библиотеки. Используйте <script src=""></script> для добавления Vue в проект, например, из CDN. Затем вы можете использовать Vue в качестве библиотеки jQuery. В результате Vue.js спроектирован так, чтобы его можно было сразу интегрировать в проект и постепенно принимать его части.

Vue очень полезен при использовании небольших компонентов на сайте, которые могут быть не связаны напрямую со страницей. Например, для окна поиска, которое напрямую отображает результаты поиска. Такой реактивный компонент многократного использования может иметь свою собственную логику.

В отличие от jQuery, где вы должны знать, как работать с объектами DOM , в этом нет необходимости. Vue позаботится об изменениях DOM. JQuery не заботится о рендеринге компонента. Он только дает вам инструменты для получения данных, например, используя AJAX, и затем строит их. Это также дает вам инструменты для работы с заданными элементами страницы. Vue.js, с другой стороны, также заботится о рендеринге данных и не заботится о том, где вы получили данные.

Интеграция в проект

Мы не будем загружать Vue.js, но будем использовать CDN jsDelivr – это бесплатная и свободная CDN, созданная для того, чтобы помочь разработчикам и вебмастерам. В ней нет ограничений по популярности и разрешены все типы файлов, включая библиотеки JavaScript, плагины jQuery, CSS-фрэймворки, шрифты и многое другое .

Вставьте следующий скрипт в заголовок созданной HTML-страницы.

Подключаем  CDN jsDelivr в html документ.
Подключаем CDN jsDelivr в html документ.

При просмотре страницы вы должны увидеть «Hello Vue!».
В следующей статье познакомимся с данными и методами Vue !

До новых встреч!