Vue.js — быстрый старт: практические примеры использования vue.js

Когда вы приходите новичком в мир веб-разработки, тогда у вас «глаза разбегаются» от наличия инструментов:

• 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 располагаются следующие функции:

1. Разработка реактивных интерфейсов.

2. Проведение декларативного рендеринга.

3. Развитая структура директив.

4. Поддержка компонентной разработки.

5. Встроенный обработчик событий.

6. Поддержка 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:

1. Chess.com. Веб-сайт посвященный игре в шахматы с посещаемостью около 20 млн пользователей  в месяц. На сайте реализовано много разделов и возможность играть в шахматы онлайн.

2. Codeship.com. Сайт представляет собой облачную  платформу для программистов, где можно сохранять веб-приложения. Этим сервисом пользуются многие именитые компании.

3. Livestorm. Это веб-платформа, на которой можно создать вебинар. Работает с большим количеством клиентов.

Заключение

Vue.js — это отличный инструмент для начинающих веб-разработчиков. Да, он требует знание основ HTML, CSS, JavaScript, но выучить их не так сложно.  При помощи Vue.js  можно создавать веб-сайты и веб-приложения с большой и малой нагрузкой. Примеры сайтов на Vue.js  тому в доказательство.