Привет, Rockstars (музыка не включена)! Хотите погрузиться в мир Vue.js? Тогда чего мы ждем?!

Хорошие новости.Начать работать с Vue до смешного просто.

Давайте сделаем нашу ЦЕЛЬ довольно простой сегодня. Следуя вековой традиции, давайте постараемся отобразить сообщение «Hello World» на нашей веб-странице с помощью Vue.

Настройка среды

Поскольку мы решили сделать все просто, почему бы не использовать CDN, который по сути импортирует Vue.js с другого сервера. Позже в этой серии руководств мы будем использовать более сложную настройку с Vue CLI и Webpack для объединения всех наших файлов. Но пока, чтобы просто попрактиковаться, понять и изучить основы Vue, подойдет CDN. И да, вы можете использовать эту простую настройку и для очень маленьких проектов.

Опция 1:

<!-- development version --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <!-- production version --> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Вариант 2:

Vue также доступен в unpkg,

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

Версия 2.5.16 является последней на момент написания этой статьи. Рекомендуется включать конкретный номер версии в URL-адрес. Вы можете отредактировать версию вручную до последней используемой.

Но если вы не хотите упоминать версию и использовать самую последнюю, просто продолжайте,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- or --> <script src="https://unpkg.com/vue/dist/vue.js"></script>

Вариант 3:

Вы можете загрузить разрабатываемую или рабочую версию Vue.js на свой локальный компьютер и включить их напрямую, используя теги script в файле HTML.

Важное примечание. Версия для разработчиков содержит предупреждения консоли, которые могут быть очень полезны для отладки. Принимая во внимание, что производственная версия в основном оптимизирована по размеру (с использованием уменьшенных версий файла vue.js и т. д.) и скорости, что становится очень важным при публикации в реальной среде.

Исходный код

Я использую Visual Studio Code в качестве IDE. Вы можете использовать Sublime Text, WebStorm, Atom, Notepad++ или любую другую IDE по вашему выбору. Мой совет? Используйте JS Fiddle, потому что вы можете просто сосредоточиться на коде и забыть о создании каждого файла и связывании их с помощью ‹ скрипт › теги. И это только вишенка на торте. Самое приятное то, что вы можете просматривать HTML, CSS, JS и вывод на одном экране. В отличие от браузера, где вам нужно обновлять его каждый раз, чтобы изменения отразились, скрипт JS обнаруживает изменения и автоматически отображает вывод на панели Результат.

Создайте файл HTML «index.html» со ​​следующим кодом:

<!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>Hello World!</h1> </div> </body> </html>

Код довольно прост. Мы даем странице заголовок «Hello Vue!» и включая разрабатываемую версию vue.js с использованием CDN с тегами <script> в разделе <head>. Мы показываем «Hello World!» сообщение в тегах <h1> внутри элемента <div> с id=”app” в разделе <body>.

Текущий вывод в браузере Chrome выглядит следующим образом:

Со мной до сих пор? Хорошо, я слышал, вы сказали, что мы отрендерили «Hello World!» с тегами <h1>, но разве это не противоречит нашей первоначальной цели использовать Vue.js для отображения этого?! Хороший вопрос.

Давайте ответим сейчас,

Шаг 1: Создайте новый экземпляр Vue

Мы импортировали Vue.js в наш проект, используя теги <script>, но это не волшебство. Это эквивалентно ноутбуку на рабочем столе. Чтобы включить его и выполнить некоторую работу, нам нужно нажать кнопку питания. Точно так же, чтобы использовать Vue в нашем проекте, мы должны создать экземпляр объекта Vue, используя ключевое слово new. Этот экземпляр — кнопка питания Vue!

new Vue();

Шаг 2: Передача объекта параметров

Простое создание экземпляра приводит только в действие Vue. Но мы хотим сделать намного больше с Vue. Для этого мы должны передать параметры или объект конфигурации в качестве аргумента экземпляру, который мы только что создали. Этот объект параметров имеет некоторые зарезервированные свойства, которые Vue распознает, и они указаны как пары ключ-значение. Как следует из названия, не все свойства являются обязательными и могут быть указаны по мере необходимости. В основном они используются для хранения данных и выполнения определенных действий.

например,: «эл», «данные», «методы» и т. д.

new Vue({ options/config object });

Шаг 3: Установка соединения с DOM

Мы хотим каким-то образом захватить контроль над частью HTML-кода, которой мы хотим манипулировать. В нашем случае это будет элемент <div> с id, «приложение», чтобы мы могли отображать сообщение «Hello World» через Vue.

Чтобы установить это соединение между экземпляром Vue и частью DOM, чтобы им можно было управлять в соответствии с нашими потребностями, у нас есть зарезервированное свойство с именем «el», которое преобразуется в элемент. Это свойство принимает строку в качестве значения, указанного в качестве селектора CSS, т. е. «#» для id и «.» для class.

new Vue({ el: "#app" });

С помощью этой простой строки кода наш элемент <div> с id, «приложение» вместе с его содержимым теперь связан с экземпляром Vue. Теперь они неразлучны!

Шаг 4: Указываем наши данные

Для хранения всех данных/информации, с которыми мы хотели бы работать в этом экземпляре Vue и связанной с ним модели DOM, у нас есть еще одно зарезервированное свойство с именем «данные». В отличие от «el», «data» принимает в качестве значения объект. Поскольку мы хотим отобразить сообщение «Hello World» в нашей DOM, давайте укажем это в объекте «данные» в виде пары ключ-значение.

new Vue({ el: "#app", data: { message: "Hello World" } });

Шаг 5: Рендеринг этих данных в DOM

Просто используйте две фигурные скобки, как показано ниже, чтобы отобразить значение, указанное в объекте данных экземпляра Vue, в DOM. (Подробнее об этом в нашей следующей статье!)

<div id="app"> <h1>{{ message }}</h1> </div>

Чтобы отличить предыдущий вывод (без Vue) от того, который использует Vue, давайте отобразим «Hello World!!!» вместо «Hello World!».

Ура! Таким образом, мы создали наше самое первое приложение Vue. Весь код, обсуждаемый в рамках этого поста, доступен в репозитории GitHub.

Хорошего дня!

Первоначально опубликовано на javabeginnerstutorial.com 27 июля 2018 г.