От автора: Vue – это JavaScript фреймворк для создания пользовательских интерфейсов. Он работает с уровнем представления. Vue является довольно простым для понимания и изучения. В данном руководстве мы будем использовать версию 2.0.
Поскольку Vue фреймворк фактически создан для фронт-енд разработки, в следующих разделах нам предстоит работать с многими HTML, JavaScript и CSS файлами. Чтобы получше разобраться, давайте начнём с простых примеров. В следующем примере мы будем использовать версию vuejs для разработчиков.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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.
|
1 |
<script type = "text/javascript" src = "js/vue.js"></script> |
Здесь есть div, который добавляется в раздел body и выводит в браузере “My first VueJS Task”.
|
1 2 3 |
<div id = "intro" style = "text-align:center;"> <h1>{{ message }}</h1> </div> |
Мы также добавили message в интерполяцию, то есть {{}}. Оно взаимодействует с VueJS и выдаёт браузеру данные. Чтобы получить значение message в DOM, мы создаём экземпляр vuejs, как это показано в следующем примере:
|
1 2 3 4 5 6 |
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, и как мы можем им управлять. В следующих разделах мы рассмотрим директивы, компоненты, условные циклы и т.д.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
