Фреймворк 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.

<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.