Вуе.јс је стекао репутацију прогресивног ЈаваСцрипт оквира. Можете да користите Вуе.јс за прављење апликација на једној страници (СПА) или за развој специфичних корисничких интерфејса.

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

Вуе.јс је један од најпопуларнији ЈаваСцрипт оквири. Да бисте започели са Вуе-ом, и да бисте га додали на своју ХТМЛ страницу, копирајте ознаку скрипте испод и налепите је у одељак заглавља:

<скриптасрц="">скрипта>

Коришћење ЦДН везе је одлична опција за побољшање статичког ХТМЛ-а или додавање функционалности вашој апликацији.

Међутим, потребно је да инсталирате Вуе.јс преко нпм-а да бисте користили више његових напредних функција, као што је синтакса компоненте једне датотеке (СФЦ), која је од помоћи приликом прављења пуноправних Вуе апликација.

Креирање Вуе апликације

Приступ Вуе библиотеци преко ЦДН везе обезбеђује Вуе објекат, укључујући .цреатеАпп() методом.

Као што назив имплицира, можете креирати Вуе апликацију користећи овај метод.

На пример:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<скрипта>
 цонст апп = Вуе.цреатеАпп();
скрипта>
тело>
хтмл>

Овде се креирана апликација чува у апликација променљива. Након креирања инстанце апликације, морате је приказати помоћу .моунт() методом. Овај метод говори где да монтирате апликацију у Модел објекта документа (ДОМ).

Овако:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">див>
<скрипта>
 цонст апп = Вуе.цреатеАпп();
 апп.моунт("#апп");
скрипта>
тело>
хтмл>

Да бисте користили Вуе .моунт() метод, морате обезбедити ДОМ елемент или селектор као аргумент. У овом примеру смо монтирали Вуе апликацију користећи ДОМ елемент са #апликација ИД.

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

Последњи корак креирања Вуе апликације је позивање .моунт() метод након завршетка свих конфигурација апликације.

Објекат Опције у Вуе-у

У Вуе.јс користите Опције објекат као конфигурациони објекат за креирање Вуе инстанце или компоненте.

То је суштински део Вуе апликације јер дефинише понашање и податке за сваку инстанцу или компоненту. Тхе Опције објекат се састоји од неколико својстава која представљају различите аспекте инстанце или компоненте.

Нека од најчешће коришћених својстава у Опције објекти су:

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

Имајте на уму да када користите својство шаблона, Вуе компајлер ће приказати само садржај дефинисан у шаблону.

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

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<х1 @клик="обрнута порука" >{{ текст }}х1>
див>
<скрипта>
конст апп = Вуе.цреатеАпп({
// шаблон: '
Добродошли у вашу Вуе апликацију
',
 дата() {
повратак {
 текст: „Ово је ваша Вуе апликација“
 };
 },
 методе: {
 реверсеМессаге () {
ово.тект = ово.тект.сплит('').реверсе().јоин('')
 }
 }
 });
апликација.моунт("#апликација");
скрипта>
тело>
хтмл>

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

Тхе подаци() функција враћа објекат са једним својством под називом текст. Тхе @цлицк директива се користи за прилагање а реверсеМессаге() метод за елемент, који преокреће текст имовина.

Када покренете овај програм, креирана Вуе апликација ће изгледати овако:

Кликом на текст ће се обрнути.

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

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

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

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

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

На пример:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<х1>{{ порука }}х1>
<стр>Добро дошли {{ наме }}стр>
див>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 порука: „Ово је ваша Вуе апликација.“,
 име: "племенити",
 };
 },
 });
 апп.моунт("#апп");
скрипта>
тело>
хтмл>

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

Такође можете приказати резултат позива методе или извршити основне ЈаваСцрипт операције унутар двоструких витичастих заграда:

хтмл>
<хтмлланг="ен">
<глава>
<наслов>Вуе апликацијанаслов>
<скриптасрц=" https://unpkg.com/vue@3/dist/vue.global.js">скрипта>
глава>
<тело>
<дивид="апликација">
<х1>{{ порука }}х1>
<х3>Добро дошли {{ наме.тоУпперЦасе() }}х3>
<стр>У вашем имену постоје слова {{ намеЛенгтх() }}.стр>
див>
<стр>не овдестр>
<скрипта>
 цонст апп = Вуе.цреатеАпп({
 дата() {
 врати {
 порука: "Ово је ваша Вуе апликација",
 име: "Племенити Окафор",
 };
 },
 методе: {
 намеЛенгтх() {
 ретурн тхис.наме.ленгтх - 1;
 },
 },
 });
 апп.моунт("#апп");
скрипта>
тело>
хтмл>

У овом примеру, апликација Вуе има а података објекат који садржи два својства: порука и име.

Унутар апликације Вуе, три ХТМЛ елемента приказују податке користећи Вуе инстанцу. Тхе х1 елемент приказује вредност порука имовине, док је х3 елемент приказује вредност име имање са а тоУпперЦасе() метод примењен на њега.

Тхе стр елемент приказује враћени резултат намеЛенгтх() метод дефинисан у методе објекат апликације Вуе. Тхе намеЛенгтх() метода враћа дужину име својство одузето за један.

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

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

Направите свој фронт-енд користећи Вуе

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