Когда вы приходите новичком в мир веб-разработки, тогда у вас «глаза разбегаются» от наличия инструментов:
HTML, JavaScript, CSS;
Vue.js;
React;
Angular;
Bootstrap;
Ruby;
Python;
Java;
C#;
и др.
Инструментов для веб-разработки действительно очень много. Основа одна — это HTML, CSS, JavaScript. Все остальные инструменты призваны улучшать, ускорять и облегчать веб-разработку. Одним из таких инструментов является фреймворк Vue.js. Сегодня мы разберем примеры на Vue.js и остановимся подробнее на этом инструменте.
Фреймворк Vue.js
Vue.js — это фреймворк, написанный на JavaScript. Его прямое назначение — программирование фронтенда в веб-разработке. Поэтому, если у вас присутствуют знания основ CSS, HTML и JavaScript, тогда смело можете приступать к изучению Vue.js.
Этот фреймворк адаптирован под архитектуру MVVM(Model View ViewModel), поэтому работает на уровне представления. Vue.js не используется для разработки промежуточных программ или backend-а, поэтому он легко интегрируется с другими языками программирования и библиотеками.
Функции Vue.js
Внутри Vue.js располагаются следующие функции:
Разработка реактивных интерфейсов.
Проведение декларативного рендеринга.
Развитая структура директив.
Поддержка компонентной разработки.
Встроенный обработчик событий.
Поддержка CSS-анимации.
Самое важное, что Vue.js — это легковесный фреймворк. Основной фреймворк весит до 20 Кб. Это означает, что Vue.js не нагружает проекты и не снижает и производительность.
Vue.js отлично подходит для больших и небольших проектов, в которых нужно наладить взаимодействие с пользователем:
принимать какие-то данные от пользователя;
предлагать какой-то функционал пользователю;
авторизовать пользователя на сайте;
и др.
Vue.js отлично развит и не останавливается в собственном развитии. Проекты на нем легко поддерживаются и масштабируются. О теории немного поговорили, теперь давайте рассмотрим практические примеры на Vue.js.
Примеры кода на Vue.js
Работа с Vue.js начинается с его подключения в собственный проект. Сделать это можно несколькими способами. Например:
Последняя версия Vue.js с CDN подключается скриптом в HTML-документе:
<script src="https://unpkg.com/vue@next"></script>
При помощи npm:
$ npm install vue@next
Создаем ViewModel
При создании «модели представления» необходимо ориентироваться простого правила: в качестве модели сможет выступать любой объект, а в качестве представления сможет выступать любой HTML-элемент.
Создаем первое представление — это будет у нас пустой «div»:
<div id="first_view">
</div>
Теперь создаем объект модели. Его можно разместить внутри тега "script", но лучшей практикой считается вынос объектов в отдельный документ. Наша модель:
var firstModel = {
name: "Дормидонт",
age: 101
};
Мы определили представление и определили модель, теперь объединим это все вместе:
var FirstViewModel = new Vue({
el: '#first_view',
data:firstModel
});
Если внимательно посмотреть чуть выше, тогда видно, что мы создали нашу "модель представления", где:
"el" определяет представление;
"data" определяет объект модели.
Теперь посмотрим как работает наша "модель представления" в HTML-коде:
<div id="first_view">
Имя веб-мастера: {{name}}. Его возраст {{age}} год.
</div>
В результате в браузере отразится такая строка:
"Имя веб-мастера: Дормидонт. Его возраст 101 год."
Проводим рендеринг массива
В свойствах модели может оказаться массив. Его содержимое можно вывести, если воспользоваться директивой "v-for". Рассмотрим как это выглядит в коде.
Создаем массив:
var firstModel = {
name: "Дормидонт",
age: 101,
hisFriends: [
{ name: "Иннокентий", age: 88 },
{ name: "Клеопатра", age: 97 },
{ name: "Франческа", age: 100 }
]
};
Допустим нам нужно вывести в HTML-документе имена друзей Дормидонта. Это делается при помощи такого кода:
<div id="first_view">
<ul>
<li v-for="friend in hisFriends">{{friend.name}}</li>
</ul>
</div>
Создаем компонент
Это удобное специфическое свойство Vue.js, когда вы можете создать собственный HTML-элемент. Потом ваш элемент может быть использован в вашем же коде. Такая возможность облегчает разработку и делает код более читабельным. Чтобы создать собственный компонент, нужно воспользоваться встроенным методом "component". А чтобы определить содержимое компонента, нужно воспользоваться свойством "template".
Создадим собственный компонент "myurl". Вот как это выглядит в коде:
Vue.component('myurl', {
template: '<a href="codernet.ru">Ссылка на наш портал</span>'
});
Теперь ваш компонент может выглядеть вот так в HTML-коде:
<div id-"first_view">
<myurl></myurl>
</div>
Vue.js: примеры сайтов
Приведем примеры сайтов на Vue.js, чтобы вы могли оценить работоспособность этого фреймворка в деле.
Небольшой список сайтов на Vue.js:
Chess.com. Веб-сайт посвященный игре в шахматы с посещаемостью около 20 млн пользователей в месяц. На сайте реализовано много разделов и возможность играть в шахматы онлайн.
Codeship.com. Сайт представляет собой облачную платформу для программистов, где можно сохранять веб-приложения. Этим сервисом пользуются многие именитые компании.
Livestorm. Это веб-платформа, на которой можно создать вебинар. Работает с большим количеством клиентов.
Заключение
Vue.js — это отличный инструмент для начинающих веб-разработчиков. Да, он требует знание основ HTML, CSS, JavaScript, но выучить их не так сложно. При помощи Vue.js можно создавать веб-сайты и веб-приложения с большой и малой нагрузкой. Примеры сайтов на Vue.js тому в доказательство.
Другое
