Въведение Vue.js за хора, които познават достатъчно jQuery, за да се справят

Логото за Vue.js

От години поддържам връзка с ненавист към любовта с JavaScript.

Запознах се с езика по любимото момче на камшика, jQuery на общността. Разбирате, по времето, когато започнах да изучавам JavaScript, като „Дизайнер, който кодира“, работата с jQuery беше вълшебно преживяване. Мога да направя модалите fadeIn и fadeOut. С библиотека на трети страни бих могъл да добавя превъртане на паралакс към портфолиото си само с едно извикване на функция. Почти всичко, за което можех да си мечтая, беше капсулирано в един, ~ 100kb файл ...

И тогава Angular излезе. Нямах друг избор освен да преработя целия си портфейл с рамката. И тогава Реакт излезе. Нямах друг избор освен да преработя цялото си портфолио с библиотеката. И тогава излезе Vue.js. Нямах друг избор, освен да преработя цялото си портфолио с библиотеката… Виждате къде отива това.

Всички вицове настрана, много ми хареса да накарам JavaScript котлети чрез изграждането на неща тук-там с тези различни рамки и библиотеки. Прочетох безброй статии и ръководства в процеса, но нито една не остана с мен повече от парчето на Шу Уесуги, „Въведение React.js за хора, които знаят просто достатъчно jQuery, за да преминат.“

Shu отвежда читателите - за които се предполага, че имат известно ниво на владеене с основите на JavaScript и jQuery - по време на пътуване през света на React, когато изграждат клонинг от компонента за „композиране на туитър“ в Twitter.

Тази концептуална рамка ми беше много полезна като човек, който се учи най-добре чрез правене. Всъщност, всеки път, когато излезе нова библиотека на JavaScript, аз се връщам към примера от тази статия, за да тествам водите. И така, бих искал да заимствам тази рамка, докато ви описвам през моя скорошен опит в обучението на Vue.

Преди да започнете стъпките по-долу, силно ви съветвам да прочетете статията на Шу. Той върши фантастична работа, като ви преведе през jQuery кода, който можете да напишете, за да внедрите някои от тези функции. По този начин и за да намаля риска от съкращаване, ще се съсредоточа върху показването на вашите добавки и изходи на Vue.

Какво строим

Повечето от нас чуруликат (някои по-плодотворно от други). Затова вероятно сме запознати с компонента на потребителския интерфейс в екрана по-долу.

Полето на Twitter за „Създаване на туит“

Вярвате или не, този UI компонент е чудесен пример за това как Vue (и React, според Shu) може да подобри живота ви като JavaScript / jQuery разработчик. Елементите на този компонент, който днес ще се съсредоточим върху изграждането, са:

  • 3. Добавихме атрибута: disabled към нашия бутон. Двоеточието предшестващо забранено означава, че бихме искали да оценим съдържанието вътре в кавичките като израз на JavaScript. Ако бяхме пропуснали дебелото черво, съдържанието ще се третира като низ. Ще отбележите също, че добавихме няколко реда CSS, за да дадем на бутона за деактивиране ясно визуален стил.

     Tweet 
    ...
    бутон [деактивиран] {
      курсор: не се допуска;
      непрозрачност: .5;
    }

    4. Ние също добавихме изчислено свойство в нашия случай, наречено tweetIsEmpty. Обърнете внимание, че това свойство всъщност е функция, която връща булева стойност въз основа на дължината на туит атрибута на нашия модел данни. Vue прави лесен за достъп до вашия модел данни както в HTML (както е показано по-горе), така и в самия екземпляр. Благодарение на магията на двупосочното свързване на данни, тази функция се оценява при актуализиране на стойността на туитър. Когато функцията се прецени като истина, бутонът ни е деактивиран и обратно.

    tweetIsEmpty: function () {
      върнете този.tweet.length === 0;
    }

    Наистина, това се чувстваше като дим и огледала, когато за първи път започнах с Vue. Това, което ми помогна, беше буквално да видя какво се случва с нашия модел данни под капака, докато взаимодействах с компонента. Тъй като можем лесно да получим достъп до нашия модел данни в нашия HTML чрез гореспоменатия синтаксис на къдрава скоба, можем да изградим бърз и визуален контур за обратна връзка. Резултат!

    Стойността на tweet е: {{tweet}}

    Стойността на tweetIsEmpty е: {{tweetIsEmpty}}

    Моля, не се колебайте да повторите тази стъпка, ако нещо по пътя е объркващо (или поради лошите ми способности за писане или кодиране, или поради самата Vue). Изпратете туитър или оставете коментар, ако имате някакви конкретни въпроси.

    Стъпка 3: Изпълнете втората функция - покажете броя на оставащите символи

    Описание на функцията: Като потребител, покажете броя на оставащите символи (от 140) в туита. Ако потребителят е въвел повече от 140 знака, деактивирайте синия бутон Tweet.

    Досега научихме за двупосочни свойства на свързване на данни и изчислени свойства, концепции, които са в основата на Vue. Нашият късметлийски ден е, защото можем да използваме тези понятия, за да изградим следващата си функция: да покажем на потребителите колко знака (от 140) да останат и да деактивираме бутона, ако този лимит е затъмнен.

    Още веднъж ще ви предам както JavaScript, така и HTML промените, необходими за прилагането на тази функция.

    В нашия JavaScript сме направили няколко неща.

    1. Като мярка за домакинство сме изброили максималната дължина на туитър (140 знака) като константа, MAX_TWEET_LENGTH.
    const MAX_TWEET_LENGTH = 140;

    2. Добавихме още едно изчислено свойство, символиRemaining, което динамично връща разликата между 140 и дължината на въведеното от потребителя туитър.

    символи Оставащи: функция () {
      връщане MAX_TWEET_LENGTH - this.tweet.length;
    }

    3. Преименувахме старото свойство tweetIsEmpty в tweetIsOutOfRange и съответно обновихме логиката на функцията. Обърнете внимание как използваме свойството изчислени символиRemaining, за да извлечем тази стойност. Ура за повторно използване на код!

    tweetIsOutOfRange: function () {
      върнете това.charactersRemaining == MAX_TWEET_LENGTH
          || this.charactersОстава <0;
     }

    От страна на HTML нещата, ние трябва да направим само няколко промени, благодарение на силата на двупосочното обвързване на данни на Vue.

       {{символиRemaining}}    Tweet

    За визуалните учащи се, гледайте магията:

    Стъпка 4: Прилагане на третата функция: Условно оформяне на индикатора „Оставащи символи“

    Описание на характеристиката: Когато съставяте Tweet, цветът на индикатора „Оставащи символи“ трябва да се промени в тъмночервен, когато останат само двадесет знака, и светлочервен, когато останат десет или по-малко.

    Манипулирането на стила или класа на даден елемент може да бъде тромаво с jQuery, а Vue предлага много по-чист начин за това. Подходът на Vue се чувства по-декларативен, тъй като описвате как искате да се промени нещо в стила (базиран например на дадено състояние) и оставяте Vue да направи тежко повдигане.

    В контекста на тази функция, нашият индикатор „Оставащи символи“ има две такива състояния и съответстващ CSS клас за всяко.

    1. Когато останат между десет и двадесет знака, индикаторът трябва да има тъмночервения клас
    2. Когато останат по-малко от десет знака, индикаторът трябва да има светлочервен клас

    Вече вашият мозък на Vue би трябвало да вика „КОМПЮТЪРНИ СВОЙСТВА!“ И така, нека да задължим този мозък и да предадем тези свойства.

    underTwentyMark: function () {
      върнете това.charactersRemaining <= 20
        && this.charactersОставащи> 10;
      }
    underTenMark: function () {
      върнете това.charactersRemaining <= 10;
    }

    Със своята логика, нека разгледаме един от начините, по които Vue се справя с условен стил: директивата v-bind: class. Тази директива очаква обект, чиито ключове са CSS класове и чиито стойности са съответните изчислени свойства.

    {'тъмночервен': underTwentyMark, 'светлочервен': underTenMark}

    С добавянето на директивата към маркера span, който затваря индикатора ни „останали знаци“, завършихме функцията си.

    <педя
      v-bind: class = "{'dark-red': underTwentyMark, 'light-red': underTenMark}">
      {{символиRemaining}}
    

    Под капака и благодарение на двупосочното свързване на данни Vue ще обработва добавянето и премахването на тези класове като функция на зададените изчислени свойства.

    Стъпка 5: Реализирайте четвъртата функция: „Прикачете снимка“ UX

    Описание на функцията: Позволете на потребителите да прикачат една снимка към своя туит чрез диалогов прозорец за избор на файл. Когато снимката е качена, покажете я под текста и разрешете на потребителите да изтрият прикачения файл, като щракнат върху изображението

    Справедливо предупреждение: в този раздел има много неща. Красотата е, че въпреки че тази функция добавя значителна функционалност, няма да се налага да пишем толкова много код. Така че, нека започнем с разбиването на дизайна на взаимодействието на стъпки.

    1. Потребителят натиска бутона „Добавяне на снимка“
    2. Потребителят вижда диалогов прозорец за избор на файл и може да избере една снимка, която да качи
    3. При избора на снимката, се появява поле под текста с избраната снимка вътре
    4. Потребителят натиска кръглия X бутон, за да премахне снимката
    5. Потребителят вижда първоначално състояние от стъпка 1

    До този момент все още не сме извършили никакви обработки на събития (слушане на кликвания върху бутони, промени в входа и т.н.). Както може би очаквате, Vue улеснява обработката на подобни събития, като ни предоставя директивата v-on (@ за кратко). Предавайки метод като стойност на тази директива, можем ефективно да слушаме DOM събития и да стартираме JavaScript, когато те се задействат.

    Преди да се потопите в нашата игра работа, някои бързи огън практика.

    Обработката на събития е толкова лесно, колкото добавянето на директивата @click към даден бутон и добавяне на съответния метод към клавиша с методи в нашия Vue инстанция.

    
    ...
    методи: {
      logNameToConsole: функция () {
        ако (това име! == 'Доналд Тръмп') {
          console.log (this.name);
        } else {
          console.warn ('Съжалявам, не разбирам');
        }
      }
    }

    Обратно към работата ни с функциите ... В тази стъпка маркировката ни и JavaScript са променени по следните начини:

    1. Добавихме бутон с директива @click. Когато потребителят натисне този бутон, методът на задействане на FileUpload ще бъде извикан.
    <бутон @ click = "ggerFileUpload "> ... 

    Така че, в нашия JavaScript, нека добавим метода ключ към нашия екземпляр Vue със споменатия метод вътре, както и атрибут на данни за нашата снимка.

    данни: {
     снимка: null
    }
    изчислено: {},
    методи: {
      TriffFileUpload: функция () {
        . Това $ refs.photoUpload.click (); // LOLWUT?
      }
    }

    2. Известно е трудно да се стилизират HTML5 файлови входове. Едно решение включва въвеждане на вход в DOM и скриване с CSS. За да може браузърът да отвори инструмента за избор на родния файл, този вход трябва да бъде щракнат. Как се кликва и как клиентът обработва това, което потребителят качва, обаче е различен въпрос.

    В нашата маркировка добавихме един такъв вход и го скрихме със специален клас скриване. Добавихме и няколко други атрибута, които си струва да извикваме:

    • Атрибутът ref се използва за регистриране на препратка към даден DOM елемент. Като се има предвид тази справка, можем да получим достъп до DOM елемента в нашия JavaScript код с това. $ Refs.photoUpload. Което означава, че можем програмно да задействаме събитие за щракване () на този елемент, като по този начин заобикаляме предизвикателството, описано по-горе.
    • Кликването върху входа е едно; боравенето с файла, който потребителят качва, е друго. За щастие, Vue ни позволява да прикачим обработващо устройство към събитието за промяна на входа чрез директивата @change. Методът, който предаваме на тази директива, ще бъде извикан, след като потребителят избере файл от файла за избор. Този метод, handlePhotoUpload, е доста лесен
    дръжкаPhotoUpload: функция (e) {
      var self = това;
      var читател = нов FileReader ();
          
      читател.onload = функция (д) {
        // Задайте този основен 64 низ на бутона за снимка на модела ни за данни
        self.photo = (e.target.result);
      }
      // Прочетете файла за качване като основен 64 низ
      reader.readAsDataURL (e.target.files [0]);
     }

    Поемете дълбоко въздух, защото почти сме свършили с тази функция!

    След като потребителят е качил снимка, трябва да покажем поле под текстовата зона с избраната снимка вътре. Точно както условното оформяне на елементите е полъх с Vue, така и условното изобразяване или показване на елементи. Ще отбележите, че в нашия HTML код сме добавили следното маркиране под textarea.

      <Фигура>     

    Vue предлага шепа помощни шаблони (v-if, v-show, v-else и т.н.), които да ви помогнат да покажете и скриете съдържанието условно. Когато израза на JavaScript, предаден на тази директива, се прецени като истина, елементът се рендира и обратно.

    В нашия случай добавихме оператор v-if, който оценява изчислената снимка на свойствотоHasBeenUploaded.

    photoHasBeenUploaded: function () {
      върнете това.photo! == null;
    }

    Когато тази функция се оцени на истина - когато ключът за снимка на нашия модел данни не е равен на нула - целият div се извежда. Готово!

    И вътре в този div ние представяме два елемента:

    1. Изображението, което беше прикачено, като предаде съдържанието на фото ключа на модела ни за данни към директивата на Vue v-bind: src
    2. Бутон за изтриване, който съдържа друг пример за обработване на @ click, този конкретен, който се позовава на функция, която „премахва“ снимката, като зададе снимков ключ на модела ни за данни на нула.
    RemovePhoto: функция () {
      this.photo = null;
    }

    Почти стигнахме.

    Стъпка 6: Корекция, потребителят може да прикачи „снимки“

    Така че можем ефективно да се справим с потребител, който прикачва една снимка към туита, но какво ще стане, ако тя би искала да качи много снимки?

    Досега би трябвало да мислите нещо за ефекта на: „Предполагам, че единствената съществена промяна тук е възможността да се показват множество изображения в това поле, което се появява условно под текстовата зона, като имаме предвид, че вече сме свързали нашите обработвачи на събития…“ И прав си! Нека да разгледаме стъпките, които трябва да следваме

    1. Трябва да актуализираме модела си на данни, като променим снимката към снимките, като новият ключ е масив от низове base64 (нито един низ base64)
    данни: {
      снимки: []
    }

    2. Трябва да актуализираме нашата изчислена снимка на собственостHasBeenUploaded, за да проверим дължината на новия ни ключ за снимки, който вече е масив.

    photoHasBeenUploaded: function () {
      върнете това.photos.length> 0;
    }

    3. Необходимо е да актуализираме нашия обработващ вход @change, за да прегледаме качените файлове и да ги натиснем върху нашия снимков ключ.

    дръжкаPhotoUpload: функция (e) {
      var self = това;
      var файлове = e.target.files;
      за (нека i = 0; i 
        читател.onloadend = функция (evt) {
          self.photos.push (evt.target.result);
        }
        reader.readAsDataURL (файлове [Ь]);
      }
    }

    От страна на HTML обаче трябва да се впуснем в нова територия. Итерацията над данни и изобразяването на съдържание с jQuery може да бъде тромава.

    var масив = [1, 2, 3, 4, 5];
    var newHTML = [];
    за (var i = 0; i ' + масив [i] + '');
    }
    $ ( ". Елемент") HTML (newHTML.join ( "")).

    За щастие, Vue предлага абстракция върху тази процедура чрез директивата v-for. Тази директива очаква от вас да предоставите израз под формата на (нещо, индекс) в collectionOfThings, където collectionOfThings е масивът на източника, нещо е псевдоним на елемента на масива, който се повтаря, а индексът е, добре, индексът на този елемент ,

    Един прототипен пример може да изглежда така:

    Където преди имахме единствен елемент на фигурата за качената от потребителя снимка, сега ще имаме N фигурни маркери, съответстващи на дължината на масива от източници на снимки.

    За щастие за нас, нашата маркировка не трябва да се променя твърде драстично, тъй като цялостната структура на дизайна е все същата.

    <фигура v-for = "(снимка, индекс) в снимки">
      <бутон @ click = "премахванеФото (индекс)">
        ...
      
      
    

    Единствената промяна, която трябва да направим, се върти около метода RemovePhoto, който преди това зададе единствения клавиш за снимка на нашия модел на данни да е нулев. Сега, тъй като имаме N брой снимки, трябва да предадем индекса на елемента на метода RemovePhoto и да извадим този елемент от масива.

    RemovePhoto: функция (индекс) {
      this.photos.splice (индекс, 1);
    }

    Стъпка 7: Анимация + допълнителен кредит

    В потребителския интерфейс на Twitter компонентът „Compose Tweet“ се отваря модално. За нашия голям финал бих искал да прилагам всички техники на Vue, които научихме досега, и да въведа още една: преходи.

    Жизнен цикъл на прехода

    Дума за предпазливост, преходите са огромна тема във земя Vue. Предстои да разгледаме и приложим тънка част от тази функционалност, а именно да интегрираме библиотека за анимация на трета страна, Velocity JS, с Vue.

    С две думи Vue предоставя преходен компонент, който ви позволява да добавяте анимации за влизане / оставяне за съдържащия се елемент, при условие че елементът е настроен да се показва условно чрез, например, v-if или v-show директива.

    <преход
      име = "модален преход"
      о-в: въведете = "modalEnter"
      о-в: оставете = "modalLeave">
        
               

    В нашия пример сме прикачили два метода, които съответстват на две събития в жизнения цикъл на прехода: v-on: enter и v-on: отпуск. По този начин ние добавихме тези дефиниции на метод към нашия Vue инстанция, отлагайки на Velocity JS, за да изчезне нашия модал в и извън.

    методи: {
      modalEnter: функция (ел, свършено) {
        Скорост (el, 'fadeIn', {продължителност: 300, завършена: готово, показване: 'flex'})
      }
      modalLeave: функция (ел, свършено) {
        Скорост (el, 'fadeOut', {продължителност: 300, завършена: готово})
      }
    }

    Както бе споменато по-горе, преходът ще се активира, когато елементът, съдържащ се вътре, е условно зададен за показване. И така, във вътрешния div на нашия компонент за преход добавихме декларация v-if, чиято стойност е булева модална показване. Нека съответно да актуализираме модела на данните на нашия инстанция.

    данни: {
      modalShowing: невярно
    }

    Сега, когато искаме да покажем модалното, всичко, което трябва да направим, е да зададем този булев на истина!

    И напишете метод, който да съвпада.

    hidModal: function () {
      this.modalShowing = невярно;
    }
    showModal: function () {
      this.modalShowing = true;
    }

    С някои CSS трикове сме прикачили и фона на обработка на събития за щракване на фона, така че потребителите да скрият модала. Резултат!

    заключение

    Е, надявам се, че това не беше твърде болезнено (и че сте научили нещо или две по пътя). Разгледахме само малка част от това, което Vue може да предложи, въпреки че, както бе споменато по-горе, тези концепции са от решаващо значение за отключване на потенциала на Vue.

    Признавам, не е честно да сравняваме Vue с jQuery. Те са продукти от различно време, със съвсем различни случаи на употреба. Въпреки това, за тези, които са преборили пътя си да научат DOM манипулация и обработка на събития чрез jQuery, надявам се, че тези понятия са глътка свеж въздух, който можете да приложите към работния си процес.