Vue.js si vydobyl pověst progresivního rámce JavaScriptu. Vue.js můžete použít k vytváření jednostránkových aplikací (SPA) nebo k vývoji specifických uživatelských rozhraní.

Zde se naučíte základy Vue.js, včetně toho, jak vytvořit komponentu Vue a pracovat s objektem options pro vykreslení dynamických dat.

Vue.js je jedním z nejpopulárnějších frameworků JavaScriptu. Chcete-li začít s Vuea chcete-li jej přidat na svou stránku HTML, zkopírujte níže uvedenou značku skriptu a vložte ji do sekce head:

<skriptsrc="">skript>

Použití odkazu CDN je vynikající možností pro vylepšení statického HTML nebo přidání funkcí do vaší aplikace.

Musíte však nainstalovat Vue.js přes npm, abyste mohli využívat více jeho pokročilých funkcí, jako je syntaxe Single-File Component (SFC), které jsou užitečné při vytváření plnohodnotných aplikací Vue.

Vytvoření aplikace Vue

Přístup ke knihovně Vue přes odkaz CDN poskytuje objekt Vue, včetně .createApp() metoda.

Jak název napovídá, pomocí této metody můžete vytvořit aplikaci Vue.

Například:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<skript>
 const app = Vue.createApp();
skript>
tělo>
html>

Zde je vytvořená aplikace uložena v aplikace variabilní. Po vytvoření instance aplikace ji musíte vykreslit pomocí .mount() metoda. Tato metoda říká, kam se má aplikace připojit Objektový model dokumentu (DOM).

Jako tak:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">div>
<skript>
 const app = Vue.createApp();
 app.mount("#app");
skript>
tělo>
html>

Chcete-li použít Vue .mount() musíte jako argument zadat prvek DOM nebo selektor. V tomto příkladu jsme připojili aplikaci Vue pomocí prvku DOM s #aplikace ID.

Je důležité si uvědomit, že aplikace Vue ovládá pouze prvky, které byly specifikovány pomocí id. Aplikace také nemá kontrolu nad ničím mimo tyto prvky, včetně událostí kliknutí nebo jakékoli jiné interaktivity.

Posledním krokem při vytváření aplikace Vue je volání .mount() po dokončení všech konfigurací aplikace.

Objekt možností ve Vue

Ve Vue.js používáte Možnosti objekt jako konfigurační objekt pro vytvoření instance nebo komponenty Vue.

Je nezbytnou součástí aplikace Vue, protože definuje chování a data pro každou instanci nebo komponentu. The Možnosti objekt se skládá z několika vlastností představujících různé aspekty instance nebo komponenty.

Některé z běžně používaných vlastností v Možnosti objektem jsou:

• data: Tato vlastnost definuje datový objekt pro aplikace Vue. Je to funkce, která vrací objekt, který obsahuje vlastnosti dat a jejich počáteční hodnoty.
• metody: The metody vlastnost objektu Options má zásadní funkce při aktivaci dynamického vykreslování.
• šablona: Tato vlastnost definuje šablonu HTML pro instanci nebo komponentu Vue. Je to řetězec obsahující značku HTML, kterou kompilátor šablon Vue dokáže analyzovat.

Všimněte si, že při použití vlastnosti šablony kompilátor Vue vykreslí pouze obsah definovaný v šabloně.

Zde je příklad aplikace Vue s data, metody, a šablona vlastnosti:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<h1 @klikněte="reverseMessage" >{{ text }}h1>
div>
<skript>
konst app = Vue.createApp({
// šablona: '
Vítejte ve své aplikaci Vue
',
 data() {
vrátit se {
 text: "Toto je vaše aplikace Vue"
 };
 },
 metody: {
 reverseMessage () {
tento.text = tento.text.split('').reverse().join('')
 }
 }
 });
aplikace.montovat("#aplikace");
skript>
tělo>
html>

Tento program zobrazuje základní aplikaci Vue, která zobrazuje text „Toto je vaše aplikace Vue“ pomocí textové interpolace a umožňuje uživatelům na ni kliknout, aby zprávu obrátili.

The data() funkce vrací objekt s jednou volanou vlastností text. The @klikněte směrnice se používá k připojení a reverseMessage() metoda k prvek, který obrátí text vlastnictví.

Při spuštění tohoto programu bude vytvořená aplikace Vue vypadat takto:

Kliknutím na text jej obrátíte.

Všimněte si, že program okomentoval vlastnost šablony, aby umožnil vykreslení obsahu v aplikaci Vue. Pokud zůstane bez komentáře, tato aplikace Vue zobrazí pouze vlastnost šablony:

Existují další vlastnosti jako rekvizity a vypočítané, který můžete také využít k vytváření výkonných a flexibilních aplikací Vue při konfiguraci objektu možností.

Interpolace textu ve Vue

Interpolace textu ve Vue je funkce, která umožňuje dynamicky vázat data na prvky HTML. Jinými slovy, umožní vám přímo výstup hodnoty datových vlastností instance Vue v HTML.

Chcete-li dosáhnout textové interpolace ve Vue, musíte zabalit název vlastnosti data do dvojitých složených závorek. Vue interpretuje obsah uvnitř dvojitých složených závorek jako JavaScriptové výrazy a dále je nahrazuje jejich výslednou hodnotou.

Například:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<h1>{{ zpráva }}h1>
<p>Vítejte {{ jméno }}p>
div>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 zpráva: "Toto je vaše aplikace Vue.",
 jméno: "Noble",
 };
 },
 });
 app.mount("#app");
skript>
tělo>
html>

V tomto příkladu se interpolace textu váže na zpráva a název vlastnosti datového objektu vráceného v instanci Vue do a Prvky. Jakmile se aplikace Vue připojí, zobrazí hodnoty zpráva a název vlastnosti v HTML na jejich příslušných pozicích.

Můžete také zobrazit výsledek volání metody nebo provádět základní operace JavaScriptu ve dvojitých složených závorkách:

html>
<htmllang="en">
<hlava>
<titul>Aplikace Vuetitul>
<skriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">skript>
hlava>
<tělo>
<divid="aplikace">
<h1>{{ zpráva }}h1>
<h3>Vítejte {{ name.toUpperCase() }}h3>
<p>Vaše jméno obsahuje písmena {{ nameLength() }}.p>
div>
<p>tady nep>
<skript>
 const app = Vue.createApp({
 data() {
 vrátit se {
 zpráva: "Toto je vaše aplikace Vue",
 jméno: "Noble Okafor",
 };
 },
 metody: {
 názevDélka() {
 vrátit toto.jméno.délka - 1;
 },
 },
 });
 app.mount("#app");
skript>
tělo>
html>

V tomto příkladu má aplikace Vue a data objekt, který obsahuje dvě vlastnosti: zpráva a název.

Uvnitř aplikace Vue tři prvky HTML zobrazují data pomocí instance Vue. The h1 prvek zobrazuje hodnotu zpráva majetek, zatímco h3 prvek zobrazuje hodnotu název nemovitost s a toUpperCase() metoda, která se na něj aplikuje.

The p element zobrazí vrácený výsledek názevDélka() metoda definovaná v metody objekt aplikace Vue. The názevDélka() metoda vrací délku název vlastnost odečtená o jedna.

Chcete-li získat přístup k hodnotě z datového objektu v objektu metod, musíte použít tento klíčové slovo. tento klíčové slovo odkazuje na aktuální instanci Vue a umožňuje vám přistupovat k jejím vlastnostem a metodám z instance Vue. Používáním tento, můžete získat hodnotu název majetku a provádějte s ním veškeré potřebné manipulace pomocí metody.

Tato aplikace Vue ukazuje, jak svázat data s prvky HTML pomocí textové interpolace a jak definovat a volat metody v instanci Vue.

Sestavte si svůj front-end pomocí Vue

V tomto článku jste se naučili, jak začít pracovat s Vue a jak interpolovat text pomocí šablonovací syntaxe Vue. Ve Vue máte přístup k několika dalším funkcím, jako jsou směrnice a háky životního cyklu, což z něj činí vynikající volbu pro vytváření dynamických front-end aplikací.