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

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

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

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

<html>
 <head>
 <title>VueJs Introduction</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "intro" style = "text-align:center;">
 <h1>{{ message }}</h1>
 </div>
 <script type = "text/javascript">
 var vue_det = new Vue({
 el: '#intro',
 data: {
 message: 'My first VueJS Task'
 }
 });
 </script>
 </body>
</html>

Результат

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

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

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

Узнать подробнее
<script type = "text/javascript" src = "js/vue.js"></script>

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

<div id = "intro" style = "text-align:center;">
 <h1>{{ message }}</h1>
</div>

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

var vue_det = new Vue({
 el: '#intro',
 data: {
 message: 'My first VueJS Task'
 }
})

В вышеприведённом фрагменте кода мы вызываем экземпляр 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree