Фреймворк VueJS — Введение

Фреймворк VueJS — Введение

От автора: Vue – это JavaScript фреймворк для создания пользовательских интерфейсов. Он работает с уровнем представления. Vue является довольно простым для понимания и изучения. В данном руководстве мы будем использовать версию 2.0.

Поскольку Vue фреймворк фактически создан для фронт-енд разработки, в следующих разделах нам предстоит работать с многими HTML, JavaScript и CSS файлами. Чтобы получше разобраться, давайте начнём с простых примеров. В следующем примере мы будем использовать версию vuejs для разработчиков.

Результат

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Это – первое приложение, созданное нами с использованием VueJS. Как вы могли видеть в вышеприведённом коде, мы добавили vue.js в начало файла.html.

Здесь есть div, который добавляется в раздел body и выводит в браузере “My first VueJS Task”.

Мы также добавили message в интерполяцию, то есть {{}}. Оно взаимодействует с VueJS и выдаёт браузеру данные. Чтобы получить значение message в DOM, мы создаём экземпляр vuejs, как это показано в следующем примере:

В вышеприведённом фрагменте кода мы вызываем экземпляр Vue, который принимает id элемента DOM, то есть e1:’#intro’, это div id. Здесь также имеются данные message, которому присвоено значение ‘My first VueJS Task’. VueJS взаимодействует с DOM и изменяет значение в DOM {{message}} на ’My first VueJS Task’.

Если же мы изменим значения элемента message в консоли, то же самое отобразится в браузере. Например:

Консоль

В вышеприведённой консоли мы выводим объект vue_det, который является экземпляром Vue. Мы изменяем message на “VueJs is interesting” и сразу же можем видеть эти изменения в браузере, как показано на приведённом выше скриншоте. Здесь мы привели только базовый пример того, как можно интегрировать Vue JS в DOM, и как мы можем им управлять. В следующих разделах мы рассмотрим директивы, компоненты, условные циклы и т.д.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree