От автора: 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.
