Vue.js относительно новое изобретение, прогрессивный фреймворк, как его называют основатели, работавшие над Angular и решившие создать свой усовершенствованный вариант. Он много взял за основу из Angular, но оказался гораздо легче в освоении и не уступает в функциональности своему старшему брату. Vue.js можно использовать как в установленном виде с помощью npm (node package manager), так и просто подключив по ссылке, например как jQuery. Удобство подключения по ссылке безусловно в том, что нет необходимости устанавливать целое SPA (single page application) приложение, а можно ситуационно решить локальную задачу, например реализовать форму авторизации, с динамической валидацией и мное другое.
В данной статье будем писать и разбирать календарь на Vue.js. Да, календарей на Vue.js написано достаточно много на codepen например, но в данном случает будет разобран пример простого календаря, что бы понимать его принцип работы, и заодно принцип работы фреймворка Vue.js и его простоту использования.
Пример простого календаря на Vue.js представлен ниже, его можно расширять, сделать из него ежедневник или планировщик, можно подключить стили bootstrap, и много чего другого.
{{monthes[month]}} {{year}} | ||||||
{{d}} | ||||||
{{ day.index }} |
Итак, любой календарь это работа с датами. В Java Script существует объект типа Date, с помощью которого осуществляется доступ к датам, через вызов new Date.
Вызов new Date создаст объект с текущим временем и датой: Mon Mar 30 2020 23:58:09 GMT+0300 (Восточная Европа, летнее время). В Date можно передать аргументы: new Date(year, month, date, ...), что бы устанавливать данные текущей даты.
Объект new Date имеет так называемые геттеры и сеттеры, методы с помощь которых манипулирует данными: с помощью метода getMonth() получаем месяц, с помощью setMonth() - устанавливаем. Все месяца номеруются от 0 до 11, начиная с January.
Также, одним из важных для календаря методов является getDay(), его не надо путать с getDate(). Метод getDay() позволяет получить номер дня недели. Дни недели нумеруются от 0 до 6, начиная с Sunday.
Все числа месяца начинаются с 1-го числа (спасибо Кэп)), а заканчиваются они по разному, поэтому определим основные свойства и узнаем последнее число месяца:
data: { month: new Date().getMonth(), year: new Date().getFullYear(), dFirstMonth: '1', day:["Mn", "Tu","We","Th","Fr","Sa", "Su"], monthes:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], date: new Date(), }, var dlast = new Date(this.year, this.month + 1, 0).getDate();
Далее, основной метод calendar(), он будет возвращать нам массивы с числами за каждую неделю:
methods:{ calendar: function(){ var days = []; var week = 0; days[week] = []; var dlast = new Date(this.year, this.month + 1, 0).getDate(); for (let i = 1; i <= dlast; i++) { if (new Date(this.year, this.month, i).getDay() != this.dFirstMonth) { a = {index:i}; days[week].push(a); } else { week++; days[week] = []; a = {index:i}; days[week].push(a); } } if (days[0].length > 0) { for (let i = days[0].length; i < 7; i++) { days[0].unshift(''); } } this.dayChange; return days; }, }
Добавим два метода прокрутки на месяц назад и на месяц вперед, соответственно: decrease() и increase().
decrease: function(){ this.month--; if (this.month < 0) { this.month = 12; this.month--; this.year--; } },
increase: function(){ this.month++; if (this.month > 11) { this.month = -1; this.month++; this.year++; } },
Основные методы в свойстве methods описаны, также нам необходимо реализовать переключение дней недели, так как в ∀мерике все на оборот, - дни начинаются с Sunday. Поместим метод dayChange() в вычисляемое свойство computed, а не в свойство methods. Преимущество вычисляемого свойства computed заключается в том, что оно вызывается только тогда, когда будет затронута одна из его реактивных зависимостей.
computed: { dayChange: function(){ if(this.dFirstMonth == 0){ this.day = ["Su", "Mn", "Tu","We","Th","Fr","Sa"] } else { this.day = ["Mn", "Tu","We","Th","Fr","Sa", "Su"] } }, },
В завершении нам надо все собрать воедино и вывести на экран, в этом нам поможет интерполяция, то есть динамическая замена текста в двойных фигурных скобках на данные полученные из нашего функционала.
<table class="table"> <thead> <tr> <td> <button v-on:click="decrease"><</button> </td> <td colspan="5"> {{monthes[month]}} {{year}} </td> <td> <button v-on:click="increase">></button> </td> </tr> <tr> <td v-for="d in day">{{d}}</td> </tr> </thead> <tbody> <tr v-for="week in calendar()"> <td v-for="(day, index) in week"> {{ day.index }} </td> </tr> </tbody> </table>
Скачать файл с написанным кодом календаря можно по ссылке.
Как видим, фреймворк Vue.js предоставляет огромные возможности в первую очередь по реактивности данных и разнообразию способов ими манипуляции.
Простой механизм обработки дат календаря, доступно для понимания.
основное преимущество vue.js это реактивность, хотелось бы больше инфы про его взаимодействие с сервером
да, может vue.js прийдет на замену jQuery
за vue.js будущее, интересно наблюдать за его прогрессом