Ево шта треба да знате о везивању података у Вуе-у

Повезивање података у веб апликацијама ствара везу између инстанце апликације и корисничког интерфејса (корисничког интерфејса). Инстанца апликације управља подацима, понашањем и компонентама, док кориснички интерфејс представља визуелни аспект са којим корисници комуницирају. Повезивање података вам омогућава да креирате динамичке веб апликације.

Овде ћете истражити различите везе у Вуе-у, укључујући једносмерне и двосмерне везе. Такође ћете научити да имплементирате ове везе помоћу шаблона за бркове и директива као што су в-бинд и в-модел.

Интерполација у Вуе

Интерполација је један од Вуе најпопуларнијих типова везивања података. Интерполација вам омогућава да прикажете вредности података у вашим ознакама језика за означавање хипертекста (ХТМЛ) са шаблоном бркови, популарно означеним двоструким витичастим заградама ({{ }}).

Са шаблоном за бркове можете да интегришете динамички садржај апликације као што су својства података и метода у свој ХТМЛ. Ово можете постићи тако што ћете приложити имена својстава података или метода из

Оптионс објецт у Вуе унутар ових витичастих заграда.

Ево примера Вуе апликације која користи шаблон бркова за постизање интерполације у Вуе-у:

<тело>
<дивид="апликација">
<х1>{{ наслов }}х1>
<стр>{{ тект.тоУпперЦасе() }}стр>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 наслов: "Добро дошли",
 текст: "Ово је твој свет?",
 };
 },
 });
 апп.моунт("#апп");
скрипта>
тело>

Горњи блок кода користи шаблон бркова да прикаже вредност својства наслова у објекту података апликације Вуе. Такође можете приказати резултате ЈаваСцрипт израза са интерполацијом. На пример, тхе {{тект.тоУпперЦасе()}} израз у стр таг приказује верзију текстуалне вредности великим словима, као што је приказано на слици испод:

Када монтирате Вуе апликацију, Вуе процењује изразе у шаблонима и приказује резултирајуће вредности у телу ХТМЛ-а. Све промене својстава података ажурирају одговарајуће вредности у корисничком интерфејсу.

На пример:

<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 наслов: "Здраво",
 текст: "Ово је твој свет?",
 };
 },
 });
 апп.моунт("#апп");
скрипта>

Горњи блок кода мења својство наслова у „Здраво". Ова промена ће се аутоматски одразити у корисничком интерфејсу пошто апликација Вуе везује својство наслова за елемент корисничког интерфејса, као што је приказано у наставку:

Интерполација даје податке само када су двоструке витичасте заграде између отварања и затварања ХТМЛ ознака.

Једносмерно повезивање података са в-бинд директивом

Као и интерполација, једносмерно повезивање података повезује инстанцу апликације са корисничким интерфејсом. Разлика је у томе што везује својства попут података и метода за ХТМЛ атрибуте.

Једносмерно повезивање података подржава једносмерни ток података, спречавајући кориснике да уносе промене које утичу на својства података на инстанци апликације. Ово је корисно када желите да прикажете податке кориснику апликације, али спречите корисника да их мења.

Можете постићи једносмерно везивање података у Вуе-у помоћу в-бинд директива или њен скраћени карактер (:):

 в-бинд директива 
<улазнитип="текст"в-бинд: вредност="текст">
 тхе: стенографски знак 
<улазнитип="текст":валуе="текст">

Блок кода показује употребу в-бинд директиве и њену скраћеницу за повезивање вредности улазне ХТМЛ ознаке за својство текстуалних података. Ево примера Вуе апликације која користи в-бинд директива за постизање једносмерног везивања података:

<тело>
<дивид="апликација">
<улазнитип="текст"в-бинд: вредност="текст">
<стр>{{ текст }}стр>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 текст: 'Вуе је сјајан!'
 }
 }
 })
 апп.моунт('#апп')
скрипта>
тело>

Изнад, поље за унос и елемент пасуса приказују вредност текст имовина. Тхе вредност атрибут поља за унос је везан за својство текста помоћу в-бинд директива.

Овај блок кода ствара једносмерно везивање, где се мења текст својство ће ажурирати вредност поља за унос, али промене направљене у пољу за унос неће ажурирати текст својство у инстанци апликације Вуе.

Да бисмо то показали, можемо почети са почетном вредношћу текст имовина, "Вуе је сјајан!“:

Након промене вредности поља за унос у „Здраво Свете!", приметите да апликација Вуе није ажурирана и да је текст у ознаци пасуса остао исти:

Међутим, када променимо вредност текст власништво до Здраво Свете! у инстанци апликације Вуе уместо из поља за унос, поље за унос се ажурира да одражава нову вредност:

Овај начин везивања података је згодан у сценаријима где желите да прикажете податке кориснику, али спречите корисника да их директно мења. Користећи в-бинд у Вуе.јс, можете успоставити једносмерно везивање, лако повезујући податке ваше апликације са елементима корисничког интерфејса.

Двосмерно повезивање података са в-модел директивом

Двосмерно повезивање података омогућава да се промене вредности УИ елемента аутоматски одразе на основни модел података и обрнуто. Већина фронт-енд ЈаваСцрипт оквири као Ангулар користи двосмерно везивање за дељење података и управљање догађајима у реалном времену.

Вуе.јс омогућава двосмерно повезивање са в-модел директива. Тхе в-модел директива ствара двосмерно повезивање података између улазног елемента форме и својства података. Када унесете уносни елемент, вредност се аутоматски ажурира у својству података, а све промене својства података ће такође ажурирати елемент уноса.

Ево примера Вуе апликације која користи в-модел директива за постизање двосмерног везивања података:

<глава>
<наслов>Двосмерно повезивање података у Вуе-унаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<улазнитип="текст"в-модел="текст">
<стр>{{ текст }}стр>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 текст: 'Вуе је сјајан!'
 }
 }
 })
 апп.моунт('#апп')
скрипта>
тело>

Блок кода изнад има улазни елемент са в-модел директива која га обавезује на текст својства података. Тхе текст својство је првобитно подешено на „Вуе је сјајан!“.

Поље за унос ажурира својство текста када га унесете и одражава промене својства текста у стр таг. Вуе.јс користи директиву в-модел и улазни елемент за постизање двосмерног повезивања података.

Док в-бинд омогућава једносмерну комуникацију од Вуе апликације до корисничког интерфејса, в-модел обезбеђује двосмерну комуникацију између Вуе апликације и корисничког интерфејса. Због своје способности да омогући двосмерну комуникацију, в-модел се често користи када се ради са елементима форме у Вуе-у.

Проширите своју стручност у изградњи Вуе апликација

Научили сте о повезивању података у Вуе-у, укључујући интерполацију и директиве в-бинд и в-модел. Ова везивања података су од суштинског значаја, јер служе као основа Вуе апликација.

Вуе има много других директива за случајеве коришћења, као што су приказивање листе, везивање догађаја и условно приказивање. Разумевање Вуе директива вам помаже да изградите динамичан и интерактивни фронт-енд за ваше веб апликације.