Что такое Vue.js?
Vue.js - это JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов. Vue js - очень мощный, легкий и прогрессивный JavaScript-фреймворк. Vue.js - это структура компонентной базы, которую легко изучить и которую можно легко масштабировать между библиотекой и платформой в зависимости от различных вариантов использования.

Почему мы должны использовать?
Это смесь React.js и Angular.js, а синтаксис прост для понимания.
Все это благодаря простой структуре. Vue.js также популярен среди веб-разработчиков, потому что он облегчает им интеграцию с существующими приложениями. Это связано с тем, что он основан на структуре JavaScript и может быть интегрирован в другие приложения, построенные на JavaScript.

Преимущества Vue.js

(1) Двусторонняя связь (двусторонняя привязка): - Vue.js также облегчает двустороннюю связь благодаря своей архитектуре MVVM, которая упрощает обработку блоков HTML. Это очень близко к angular, поэтому.
(2) Очень маленький размер: - Успех фреймворка JavaScript зависит от его размера. Чем меньше размер, тем больше он будет использоваться. Размер этого фреймворка составляет 18–21 КБ, и пользователю не требуется времени для его загрузки и использования. Вместо этого он превосходит все громоздкие фреймворки, такие как React.js, Angular.js и Ember.js.
(3) Легкость понимания и разработки приложений: - Одна из причин Популярность этого фреймворка в том, что его довольно легко понять. Пользователь может легко добавить Vue.js в свой веб-проект из-за его простой структуры. С помощью этой структуры можно разрабатывать как малые, так и большие шаблоны, что экономит много времени.
(4) Гибкость: - Он позволяет пользователю записывать свой шаблон в файл HTML, файл JavaScript и чистый файл JavaScript с использованием виртуальных узлов. Эта гибкость также упрощает понимание разработчиками React.js, Angular.js и любого другого нового фреймворка JavaScript.

Недостатки Vue.js

(1) Сообщество: - Vue пока не пользуется широкой поддержкой со стороны других фреймворков, поскольку он не так популярен, как React или Angular. Ресурсов для React.js гораздо больше, чем для Vue.js.
(2) Языковой барьер: - Создатель на самом деле является китайско-американским и очень поддерживает китайское сообщество разработчиков. Большинство пользователей - это неанглоязычные сообщества, что, возможно, является одной из самых больших проблем с этим фреймворком.

По сравнению с React, Vue имеет большие преимущества, такие как:
- Простота интеграции в готовые проекты
- Автоматическое отслеживание зависимостей компонентов во время рендеринга
- Двусторонняя связь

По сравнению с Angular, Vue имеет большие преимущества, такие как:
- Фреймворк намного легче изучить.
- Нет Typescript.

Настройка Vue js в системе через cli

$ npm install -g vue-cli
$ vue init webpack vue-app-demo
$ cd vue-app-demo
$ npm install
$ npm run dev

Это запустит сервер на порту 8080, и вывод приложения автоматически отобразится в браузере:

Структура проекта

Как и в каждом однофайловом компоненте Vue.js 2, реализация приложения разделена на три части:
‹template› ‹/template›: код шаблона компонента
‹script› ‹/Script›: Код сценария компонента
‹style› ‹/style›: Код CSS компонента

Создайте компонент в vue.js 2 с расширением (.vue)
Главный компонент приложения (src / App.vue)

Посмотрите на тег скрипта
‹script›
/ * Здесь мы можем импортировать мысли * /
экспортировать по умолчанию {
/ * Внутри этого мы можем использовать функции vue js * /
data () {
return {
/ * данные - это свойства, здесь мы можем определить объект, потому что объект данных для системы реактивности Vue. * /
}
},
watch: {
/ * watcher - это prloperties, которые используются, когда у вас есть данные, которые необходимо изменить на основе некоторых других данных, тогда мы используем watch, чтобы наблюдая за данными. * /
},
вычислено: {
/ * Вычисляемые свойства имеют ту же область видимости, что и свойства данных. Мы используем функции в вычисляемых свойствах.
Для замены свойств методов, поскольку свойства методов повторно визуализируются.
* /
},
методы: {
/ * В свойства методов, которые мы использовали для написания методов onclick и других методов или функций, которые находятся в свойствах методов. * /
}

}
‹/script›

vue-router

  • Поддержка нескольких имен ‹router-view›
  • Улучшенная навигация с помощью компонента ‹router-link›.
  • Упрощенный API навигационных хуков
  • Настраиваемый контроль поведения прокрутки

Заключение

Что ж, надеюсь, вам понравилась эта статья.

Спасибо!