В основном я являюсь младшим разработчиком Angular, но недавно я просмотрел код приложения, написанного на Vue.Js, синтаксис приложения выглядел очень простым и понятным, и это была только одна причина, по которой я задумался об изучении VUE. Работая на первой работе разработчика, я должен изучать новые вещи, чтобы расти, поэтому для цели роста очень важно работать над сторонними проектами, поэтому для сторонних проектов я решил изучить VUE, так как я чувствовал, что это быстро начать работу и легко учиться, а также.

Что такое Vue.Js?

Vue.Js — это Progressive Framework для создания небольших интерактивных и быстрых приложений. Vue.Js начинается с некоторых основных концепций и заканчивается очень сложными концепциями, такими как компоненты и управление состоянием. Vue.Js лучше всего подходит для небольших одностраничных приложений, где очень важны производительность и размер сборки.

В этой статье мы рассмотрим, как начать работу с Vue.Js, а также написание и понимание приложения Hello World с использованием Vue.Js.

Итак, давайте начнем

Во-первых, изучая что-то новое, очень важно иметь все ресурсы, которые можно использовать для обучения. Итак, здесь я даю ссылку на официальную документацию Vue.Js. Поскольку документация - лучший способ узнать о чем-либо.

Официальная документация Vue.Js

Шаг №1

На этом этапе мы добавим библиотеку Vue.Js в наше приложение, и есть несколько способов сделать это, но для целей обучения и для простоты мы будем работать с CDN, которую мы можем просто скопировать в наше приложение. приложений и быстро начать работу с VUE.Js.

Шаг № 2

Создание простого файла JavaScript, в котором мы будем иметь дело с экземпляром и данными Vue, и добавление этого файла непосредственно над закрывающим тегом тела.

Теперь, когда мы все готовы, давайте начнем писать приложение Hello World, иногда кажется очень скучным писать приложение Hello World, но это дало отличное представление о том, как то, что мы собираемся изучить, будет через некоторое время

Создание экземпляра Vue во внешнем файле JS

Здесь мы упрощаем выполнение следующих вещей.

  1. Создание нового экземпляра Vue с использованием ключевого слова New.
  2. Мы будем присоединять этот экземпляр в файле HTML к тому элементу div, у которого есть идентификатор «приложения».
  3. В данных мы определили простое свойство с именем «сообщение», которое содержит сообщение «привет, мир».

Отображение данных в HTML

Здесь мы видим, что div имеет идентификатор приложения, что связывает его со свойством el в ранее созданном JS-файле, в котором мы определили el и данные.
«Сообщение» в двойных фигурных скобках будет печатать строку, назначенную сообщению в файле Js.

Написание и начало работы с Vue.js — это так просто, и в следующем посте мы поговорим о том, как эффективно и легко отображать список в Vue, а также поговорим о директивах в Vue.Js. .