Vue.js si získal svoju povesť progresívneho rámca JavaScriptu. Vue.js môžete použiť na vytváranie jednostránkových aplikácií (SPA) alebo na vývoj špecifických používateľských rozhraní.

Tu sa naučíte základy Vue.js, vrátane toho, ako vytvoriť komponent Vue a pracovať s objektom options na vykreslenie dynamických údajov.

Vue.js je jedným z najobľúbenejšie rámce JavaScriptu. Ak chcete začať s Vuea ak ho chcete pridať na svoju stránku HTML, skopírujte nižšie uvedenú značku skriptu a vložte ju do sekcie head:

<skriptsrc="">skript>

Použitie odkazu CDN je vynikajúcou možnosťou na zlepšenie statického HTML alebo pridanie funkčnosti do vašej aplikácie.

Musíte si však nainštalovať Vue.js cez npm, aby ste mohli využívať viac jeho pokročilých funkcií, ako je syntax Single-File Component (SFC), ktoré sú užitočné pri vytváraní plnohodnotných aplikácií Vue.

Vytvorenie aplikácie Vue

Prístup ku knižnici Vue cez odkaz CDN poskytuje objekt Vue vrátane .createApp() metóda.

Ako už názov napovedá, pomocou tejto metódy môžete vytvoriť aplikáciu Vue.

Napríklad:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<skript>
 const app = Vue.createApp();
skript>
telo>
html>

Tu je vytvorená aplikácia uložená v aplikácie premenlivý. Po vytvorení inštancie aplikácie ju musíte vykresliť pomocou .mount() metóda. Táto metóda hovorí, kam sa má aplikácia pripojiť Model objektu dokumentu (DOM).

Ako:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">div>
<skript>
 const app = Vue.createApp();
 app.mount("#app");
skript>
telo>
html>

Ak chcete použiť Vue .mount() ako argument musíte poskytnúť prvok DOM alebo selektor. V tomto príklade sme pripojili aplikáciu Vue pomocou prvku DOM s #aplikácia ID.

Je dôležité poznamenať, že aplikácia Vue ovláda iba prvky, ktoré boli špecifikované pomocou id. Aplikácia tiež nemá kontrolu nad ničím mimo týchto prvkov, vrátane udalostí kliknutí alebo akejkoľvek inej interaktivity.

Posledným krokom pri vytváraní aplikácie Vue je zavolať .mount() po dokončení všetkých konfigurácií aplikácie.

Objekt možností vo Vue

Vo Vue.js používate možnosti objekt ako konfiguračný objekt na vytvorenie inštancie alebo komponentu Vue.

Je nevyhnutnou súčasťou aplikácie Vue, pretože definuje správanie a údaje pre každú inštanciu alebo komponent. The možnosti objekt pozostáva z niekoľkých vlastností reprezentujúcich rôzne aspekty inštancie alebo komponentu.

Niektoré z bežne používaných vlastností v možnosti objektom sú:

• údajov: Táto vlastnosť definuje dátový objekt pre aplikácie Vue. Je to funkcia, ktorá vracia objekt, ktorý obsahuje vlastnosti údajov a ich počiatočné hodnoty.
• metódy: The metódy Vlastnosť objektu Options má dôležité funkcie pri umožňovaní dynamického vykresľovania.
• šablóna: Táto vlastnosť definuje šablónu HTML pre inštanciu alebo komponent Vue. Je to reťazec obsahujúci značku HTML, ktorú kompilátor šablón Vue dokáže analyzovať.

Upozorňujeme, že pri použití vlastnosti šablóny kompilátor Vue vykreslí iba obsah definovaný v šablóne.

Tu je príklad aplikácie Vue s údajov, metódy, a šablóna vlastnosti:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<h1 @kliknite="reverseMessage" >{{ text }}h1>
div>
<skript>
konšt app = Vue.createApp({
// šablóna: '
Vitajte vo svojej aplikácii Vue
',
 data() {
vrátiť {
 text: "Toto je vaša aplikácia Vue"
 };
 },
 metódy: {
 reverseMessage () {
toto.text = toto.text.split('').reverse().join('')
 }
 }
 });
aplikácie.montovať("#aplikácia");
skript>
telo>
html>

Tento program zobrazuje základnú aplikáciu Vue, ktorá zobrazuje text „Toto je vaša aplikácia Vue“ pomocou textovej interpolácie a umožňuje používateľom kliknúť na ňu, aby obrátili správu.

The údaje () funkcia vracia objekt s jednou volanou vlastnosťou text. The @klikni smernica sa používa na pripojenie a reverseMessage() metóda k prvok, ktorý obráti text nehnuteľnosť.

Pri spustení tohto programu bude vytvorená aplikácia Vue vyzerať takto:

Kliknutím na text ho obrátite.

Všimnite si, že program zakomentoval vlastnosť šablóny, aby umožnil vykreslenie obsahu v aplikácii Vue. Ak zostane bez komentára, táto aplikácia Vue zobrazí iba vlastnosť šablóny:

Sú tam aj iné vlastnosti ako napr rekvizity a vypočítané, ktorý môžete použiť aj na vytváranie výkonných a flexibilných aplikácií Vue pri konfigurácii objektu možností.

Interpolácia textu vo Vue

Interpolácia textu vo Vue je funkcia, ktorá vám umožňuje dynamicky spájať údaje s prvkami HTML. Inými slovami, umožní vám priamo výstup hodnoty dátových vlastností inštancie Vue v HTML.

Ak chcete dosiahnuť interpoláciu textu vo Vue, musíte názov vlastnosti dát zabaliť do dvojitých zložených zátvoriek. Vue interpretuje obsah vo vnútri dvojitých zložených zátvoriek ako JavaScriptové výrazy a ďalej ich nahrádza ich výslednou hodnotou.

Napríklad:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<h1>{{ správa }}h1>
<p>Vitajte {{ meno }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 správa: "Toto je vaša aplikácia Vue.",
 meno: "Noble",
 };
 },
 });
 app.mount("#app");
skript>
telo>
html>

V tomto príklade sa interpolácia textu viaže na správu a názov vlastnosti dátového objektu vráteného v inštancii Vue do a prvkov. Akonáhle sa aplikácia Vue pripojí, zobrazí hodnoty správu a názov vlastnosti v HTML na ich príslušných pozíciách.

Môžete tiež zobraziť výsledok volania metódy alebo vykonať základné operácie JavaScriptu v dvojitých zložených zátvorkách:

html>
<htmllang="sk">
<hlavu>
<titul>Aplikácia Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlavu>
<telo>
<divid="aplikácia">
<h1>{{ správa }}h1>
<h3>Vitajte {{ name.toUpperCase() }}h3>
<p>Vo vašom mene sú písmená {{ nameLength() }}.p>
div>
<p>nie tup>
<skript>
 const app = Vue.createApp({
 data() {
 vrátiť {
 správa: "Toto je vaša aplikácia Vue",
 meno: "Noble Okafor",
 };
 },
 metódy: {
 názovDĺžka() {
 vrátiť toto.názov.dĺžka - 1;
 },
 },
 });
 app.mount("#app");
skript>
telo>
html>

V tomto príklade má aplikácia Vue a údajov objekt, ktorý obsahuje dve vlastnosti: správu a názov.

Vo vnútri aplikácie Vue tri prvky HTML zobrazujú údaje pomocou inštancie Vue. The h1 prvok zobrazuje hodnotu správu majetok, pričom h3 prvok zobrazuje hodnotu názov nehnuteľnosť s a toUpperCase() metóda, ktorá sa na ňu vzťahuje.

The p element zobrazuje vrátený výsledok názovDĺžka() metóda definovaná v metódy objekt aplikácie Vue. The názovDĺžka() metóda vráti dĺžku názov vlastnosť odpočítaná o jednotku.

Ak chcete získať prístup k hodnote z údajového objektu v objekte metód, musíte použiť toto kľúčové slovo. toto kľúčové slovo odkazuje na aktuálnu inštanciu Vue a umožňuje vám prístup k jej vlastnostiam a metódam z inštancie Vue. Používaním toto, môžete získať hodnotu názov majetku a vykonajte s ním všetky potrebné manipulácie pomocou metódy.

Táto aplikácia Vue ukazuje, ako viazať údaje na prvky HTML pomocou textovej interpolácie a ako definovať a volať metódy v inštancii Vue.

Zostavte si svoj front-end pomocou Vue

V tomto článku ste sa naučili, ako začať pracovať s Vue a interpolovať text pomocou syntaxe šablón Vue. Vo Vue máte prístup k niekoľkým ďalším funkciám, ako sú smernice a háčiky životného cyklu, vďaka čomu je vynikajúcou voľbou pre vytváranie dynamických front-end aplikácií.