Сега е време да се потопим по-дълбоко във Vue и да създадем свой собствен компонент. Ще започнем като създадем такъв компонент, който да представя всеки един елемент, който сме добавили в списъка със задачи. По пътя ще научим за няколко важни концепции, като извикването на компоненти в други компоненти, предаване на данни към тях чрез props и запазване на състоянието на данните, които сме въвели по време на работа с приложението.
Забележка : Ако ви трябва да проверите кода си спрямо нашата версия, можете да намерите примерния Vue код на приложението в нашето хранилище todo-vue . За работеща версия на живо вижте https://mdn.github.io/todo-vue/dist/ .
| Предпоставки: | Познаване на основните HTML , CSS и JavaScript езици, познаване на терминала / командния ред . Компонентите на Vue са написани като комбинация от JavaScript обекти, които управляват данните на приложението и синтаксис на базиран на HTML шаблон, който се преобразува в основната DOM структура. За инсталиране и за използване на някои от по-усъвършенстваните функции на Vue (като единични файлови компоненти или функции за изобразяване) ще ви е необходим терминал с инсталиран node + npm. |
| Какво ще научите: | Ще научите как да създадете Vue компонент, да го визуализирате в друг компонент, да предадете данни в него с помощта на props и да запазите състоянието му. |
Създаване на компонент ToDoItem
Нека да създадем първия компонент, който ще показва единичен елемент от списъка. Ще използваме това, за създаване на нашия списък със задачи.
- Във вашата директория todo-vue/src/components създайте нов файл с име ToDoItem.vue. Отворете файла във вашия редактор.
- Създайте раздела за шаблон на компонента, като добавите <template></template> в най-горната част на файла.
- Създайте <script></script> раздел под раздела за шаблони. Вътре в <script> маркерите добавете експортиран обект по подразбиране export default {}, който е вашият компонент.
Вашият файл сега трябва да изглежда така:
Вече можем да започнем да добавяме действителното съдържание към нашият нов компонент ToDoItem. Понастоящем (понеже ние използваме версия 2 на Vue) на шаблоните на Vue е разрешено да имат само един елемент в корена – тоест един елемент трябва да обгърне всичко вътре в раздела за шаблони (това вече е променено във Vue 3). Ще използваме <div> елемент.
- Добавете празен <div> във вашия шаблон на компонент.
- Вътре в този <div>, нека добавим отметка и съответния етикет. Добавете id на отметката и for атрибут съответстващ на квадратчето за отметка, както е показано по-долу.
Използване на TodoItem в нашето приложение
Дотук всичко е наред, но все още не сме добавили компонента към нашето приложение, така че все още няма начин да го тестваме и да видим дали всичко работи. Нека го добавим сега.
- Отворете App.vue.
- В горната част на <script> маркера си добавете следното за да импортирате ToDoItem компонента:
import ToDoItem from ‘./components/ToDoItem.vue’; - Вътре във вашия компонент добавете components свойството, а вътре в него добавете своя ToDoItem компонент, за да бъде регистриран от Vue.
Вашето съдържание във <script> сега трябва да изглежда така:
По същия начин компонентът HelloWorld бе регистриран от Vue CLI по-рано.
За да рендирате (визуализирате) ToDoItem компонента в приложението, трябва от вашия <template> елемент да го извикате като <to-do-item></to-do-item> елемент. Обърнете внимание, че името на файла на компонента и неговото представяне в JavaScript е винаги с главни букви (например ToDoList), а еквивалентният HTML елемент винаги е с малки букви – <to-do-list>.
- Под <h1>, създайте неподреден списък ( <ul>), съдържащ единичен елемент от списъка ( <li>).
- Вътре в списъка добавете елемента <to-do-item></to-do-item>.
Вашето App.vue <template> съдържание сега трябва да изглежда по следния начин:
Ако проверите отново приложението, сега трябва да видите изобразен ToDoItem, състоящ се от квадратче за отметка и етикет.
Създаване на динамични компоненти с props
Нашият ToDoItem компонент все още не е много полезен, защото наистина можем да го включим само веднъж на страница (идентификаторите трябва да са уникални) и все още нямаме начин да зададем текст за етикета – тоест нищо от всичко това не е динамично.
Това от което се нуждаем, е някакво компонентно състояние. Това може да се постигне чрез добавяне на свойство (prop) към нашия компонент. Можете да мислите за props като нещо подобно на аргументите при функциите. Стойността на props дава на компонентите начално състояние, което влияе върху тяхното показване.
Регистрация на props
Във Vue има два начина за регистриране на props:
- Първият начин е просто да изброите props като масив от низове. Всеки запис в масива съответства на името на свойството (prop).
- Вторият начин е да дефинирате prop като обект, като всеки ключ ще съответства на името на prop. Изброяването на props като обект ви позволява да задавате стойности по подразбиране, да маркирате props според изискванията ви, да извършвате основно типизиране на обекти (по-специално около примитивните типове на JavaScript) и да извършвате прости проверки на стойността на свойството.
Забележка : Проверката на Prop се извършва само в режим на разработка, така че не можете да разчитате стриктно на него в производствен режим. Освен това, функциите за проверка на prop се извикват преди създаването на екземпляра на компонента, така че те няма да имат достъп до състоянието на компонента (или други props).
За този компонент ще използваме метода за регистрация на обект (втория метод от гореизброените).
- Върнете се във вашия ToDoItem.vue файл.
- Добавете props свойство в default {} обекта за експортиране, което да съдържа празен обект.
- Вътре в този обект добавете две свойства с ключовете label и done.
- Стойността на ключа label трябва да бъде обект с 2 свойства (или props, както се наричат в контекста, които ще са достъпни за компонентите).
- Първо е required свойството, което ще има стойност true. Това ще каже на Vue, че очакваме всеки екземпляр на този компонент да има поле за етикет. Vue ще ни изведе предупреждение, ако ToDoItem компонентът няма поле за етикет.
- Второто свойство, което ще добавим е type. Задайте стойността за това свойство да бъде от типа String на JavaScript (обърнете внимание на главното „S“). Това казва на Vue, че очакваме стойността на това свойство да бъде низ.
- Свойството done.
- Първо добавете default със стойност false. Това означава, че когато стойността на done към даден ToDoItem компонент не бъде зададена, done ще има стойност false (имайте предвид, че това не е задължително – ние се нуждаем само от default стойност само когато свойството е задължително).
- След това добавете type със стойност от тип Boolean. Това казва на Vue, че очакваме стойността на prop да бъде от булев тип на JavaScript.
Вашият компонент-обект сега трябва да изглежда така:
Използване на регистрирани props
С дефинираните props в компонентния обект, вече можем да използваме променливите стойности вътре в нашия шаблон. Нека започнем с добавянето на label към шаблона на компонента.
Във вашия <template>, заменете съдържанието на <label> елемента с {{label}}.
Двойните къдрави скоби {{}} са част от специалния синтаксис на шаблоните във Vue, който ни позволява да отпечатаме резултата от JavaScript изразите дефинирани в нашия клас, кйто е вътре в нашия шаблон, включително стойности и методи. Важно е да знаете, че съдържанието в {{}} се показва като текст, а не като HTML. В този случай отпечатваме стойността на label.
Разделът на шаблона на вашия компонент сега трябва да изглежда така:
Върнете се в браузъра си и ще видите елемента todo, изобразен както преди, но без етикет (о, не!). Отидете в DevTools на браузъра си и ще видите предупреждение в конзолата относно точно тези редове с код:
Това е така, защото маркирахме label като задължителен prop, но никога не сме предали на компонента този prop – тоест определили сме къде в шаблона искаме да се използва, но не сме го предали вътре в самият компонент. Нека да поправим това.
Във вашия App.vue файл добавете prop label към <to-do-item></to-do-item> компонента, във вид на обикновен HTML атрибут:
Сега ще видите етикета в приложението си и предупреждението вече няма да бъде изведено в конзолата.
Това е накратко работата с props. След това ще преминем към това как Vue предава състоянието на данните по веригата надолу (сега няма да розглеждаме как това става в обратна посока – нагоре).
Обектът за данни на Vue
Ако промените стойността на prop label, който е предаден в <to-do-item></to-do-item> във вашия компонент на приложението, трябва да го видите актуализиран. Това е страхотно. Имаме отметка с актуализируем етикет. Понастоящем обаче “done“ не прави нищо – можем да поставим отметка в квадратчето в потребителския интерфейс, но никъде в приложението не се записва дали действително елемента от списъка със задачи е направен на “готов”.
За да постигнем това, ще искаме да обвържем done на компонента към checked атрибута на <input> елемента, така че да може да служи като запис за това дали квадратчето на отметката е отметнато или не. Важно е обаче props да служат като еднопосочно свързване на данни – компонентът никога не трябва да променя стойността на собствените си props. Има много причини за това. Отчасти компонентите за редактиране на prop могат да направят отстраняването на грешки предизвикателство. Ако дадена стойност се предава на множество дъщерни компоненти, може да е трудно да се проследи откъде идват промените в тази стойност. В допълнение, промяната на props може да доведе до повторно изобразяване на компонентите. Така че мутиращите props в компонент биха задействали повторното изобразяване на компонента, което на свой ред може отново да задейства мутацията.
За да заобиколим това, можем да управляваме състоянието на done, използвайки data свойството на Vue. В data е мястото, където можете да управлявате локално състояние за компонента, като това свойство живее вътре в обекта на компонента заедно с props и има следната структура:
Ще забележите, че data всъщност е функция. Това е така за да се запазят уникалните стойности на данните за всеки екземпляр на компонента по време на изпълнението – функцията се извиква отделно за всеки екземпляр на даден компонент. Ако се декларират данните само като обект, всички екземпляри на този компонент ще си споделят едни и същи стойности. Това е страничен ефект от начина, по който Vue регистрира компоненти и е нещо, което ние не искаме.
Използвайте ключовата дума this за да достъпвате тези и другите свойства на компонента от data .
Забележка : Поради начина, по който this работи във функциите със стрелки (обвързващи се с контекста на родителя), няма да имате достъп до нито един от необходимите атрибути отвътре на data ако сте използвали функция със стрелка. Затова не използвайте функция със стрелка за data свойството.
Сега нека да добавим data свойство към нашия ToDoItem компонент. Това ще върне обект, съдържащ едно свойство, което ще наречем isDone, чиято стойност ще е this.done.
Актуализирайте обекта на компонента по следния начин:
Vue прави малка магия тук – свързва всички ваши реквизити директно към екземпляра на компонента, така че НЕ Е нужно да се обръщаме към тях например така: this.props.done. Също така свързва и други атрибути ( data, който вече виждаме, а други като methods и computed) директно към инстанцията на компонента. Това отчасти е така, за да станат достъпни за нашия шаблон. Недостатъкът на това е, че трябва ключове за тези атрибути да са уникални (по наименование). Ето защо ние нарекохме нашия data атрибут isDone вместо done (понеже вече сме го задали веднъж в props).
Сега трябва да прикачим (да използваме) isDone свойството към нашия компонент. По подобен начин както Vue използва {{}} за да визуализира (изведе) JavaScript изрази вътре в шаблоните, така Vue има специален синтаксис как да обвърже JavaScript изрази към избрани от нас HTML елементи и компоненти: това е v-bind.
v-bind:attribute=“expression“
С други думи, поставяте като префикс какъвто и да е атрибут / реквизит, който искате да се обвържете с v-bind:. В повечето случаи можете да използвате за по-кратко на v-bind само свойството като просто добавите префикса на атрибута / пропа с двоеточие. Така че :attribute=“expression“ работи по същия начин като и v-bind:attribute=“expression“.
Така че в случая с квадратчето за отметка в нашия ToDoItem компонент, ние можем да използваме, v-bind за да присвоим isDone свойството на checked атрибута на <input> елемента. Следните две са еквивалентни:
Можете да използвате който и да е от двата модела. Най-добре е да се придържате само към единия (краткия). Тъй като краткият синтаксис е по-често използван в този урок ще се придържаме към него.
Актуализирайте <input> елемента сега като замените checked=“false“ с :checked=“isDone“.
Тествайте компонента си, като зададете :done=“true“ към ToDoItem който извикваме в App.vue. Имайте предвид, че трябва да използвате v-bind синтаксиса, защото в противен случай true ще бъде предаден като низ. Показваното квадратче за отметка сега трябва да бъде отметнато.
Променете true на false и обратно, като презареждате приложението, за да видите как се променя състоянието.
Даване на Todos уникален идентификационен номер (id)
Сега вече имаме работеща отметка, където можем програмно да ѝ зададем състоянието. Понастоящем обаче можем да добавим само един ToDoList компонент към страницата, тъй като id е кодирано, така че да не се променя. Това би довело до грешки в технологията за асистиране, тъй като id е необходимо за правилното картографиране на етикетите в техните отметки. За да поправим това, можем програмно да зададем стойностите за id на компонента.
Можем да използваме метода uniqueid() (на библиотеката lodash) за да запаметим уникалния индекс. Този пакет експортира функция, която приема низ и добавя уникално цяло число в края на префикса. Нека добавим пакета към нашия проект с помощта на npm; спрете сървъра и въведете следната команда във терминала:
Забележка : Ако предпочитате yarn, можете да използвате yarn add lodash.uniqueid.
Вече можем да импортираме този пакет в нашия ToDoItem компонент. Добавете следния ред в горната част на <script> елемента в ToDoItem.vue:
След това добавете id към нашето data свойство, така че обектът на компонента да изглежда така:
( uniqueId() връща посочения префикс todo- с добавен уникален низ.)
След това обвържете атрибута id с нашата отметка и id атрибута на етикета for, като актуализирате съществуващите id и for атрибутите, както е показано тук:
Обобщение
Вече имаме добре работещ ToDoItem компонент, на който може да предаваме етикет за показване, съхранява провереното му състояние и се изобразява с уникален id всеки път, когато бъде извикван. Можете да проверите дали уникалните id работят, като временно добавите още няколко <to-do-item></to-do-item> в App.vue и след това проверите резултата с DevTools на вашия браузър.
Сега вече сме готови да добавим множество ToDoItem компоненти към нашето приложение. В следващата ни статия ще разгледаме как да добавяме набор от данни за елемента todo към нашия компонент App.vue, които след това ще покажем вътре ToDoItem компонента, използвайки v-for директивата.
Вижте още: