Vue.js zyskał reputację jako progresywny framework JavaScript. Możesz używać Vue.js do tworzenia aplikacji jednostronicowych (SPA) lub opracowywania określonych interfejsów użytkownika.

Tutaj nauczysz się podstaw Vue.js, w tym tworzenia komponentu Vue i pracy z obiektem opcji w celu renderowania dynamicznych danych.

Vue.js jest jednym z najpopularniejsze frameworki JavaScript. Aby rozpocząć pracę z Vuei aby dodać go do swojej strony HTML, skopiuj poniższy tag script i wklej go w sekcji head:

<scenariuszźródło="">scenariusz>

Korzystanie z łącza CDN to doskonała opcja do ulepszenia statycznego kodu HTML lub dodania funkcjonalności do aplikacji.

Jednak musisz zainstalować Vue.js przez npm, aby móc korzystać z bardziej zaawansowanych funkcji, takich jak składnia Single-File Component (SFC), która jest pomocna podczas tworzenia pełnoprawnych aplikacji Vue.

Tworzenie aplikacji Vue

Dostęp do biblioteki Vue za pośrednictwem łącza CDN zapewnia obiekt Vue, w tym .createApp() metoda.

Jak sama nazwa wskazuje, możesz stworzyć aplikację Vue za pomocą tej metody.

Na przykład:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<scenariusz>
 const aplikacja = Vue.createApp();
scenariusz>
ciało>
HTML>

Tutaj utworzona aplikacja jest przechowywana w aplikacja zmienny. Po utworzeniu instancji aplikacji należy ją wyrenderować przy użyciu .uchwyt() metoda. Ta metoda mówi, gdzie zainstalować aplikację w Obiektowy model dokumentu (DOM).

jak tak:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>dz>
<scenariusz>
 const aplikacja = Vue.createApp();
 app.mount("#aplikacja");
scenariusz>
ciało>
HTML>

Aby użyć Vue .uchwyt() metody, musisz podać element DOM lub selektor jako argument. W tym przykładzie zamontowaliśmy aplikację Vue przy użyciu elementu DOM z rozszerzeniem #aplikacja ID.

Należy zauważyć, że aplikacja Vue kontroluje tylko te elementy, które zostały określone przy użyciu ID. Ponadto aplikacja nie ma kontroli nad niczym poza tymi elementami, w tym nad zdarzeniami kliknięć ani żadną inną interaktywnością.

Ostatnim krokiem tworzenia aplikacji Vue jest wywołanie metody .uchwyt() metoda po zakończeniu wszystkich konfiguracji aplikacji.

Obiekt opcji w Vue

W Vue.js używasz Opcje obiekt jako obiekt konfiguracyjny do tworzenia instancji lub komponentu Vue.

Jest istotną częścią aplikacji Vue, ponieważ definiuje zachowanie i dane dla każdej instancji lub komponentu. The Opcje obiekt składa się z kilku właściwości reprezentujących różne aspekty instancji lub komponentu.

Niektóre z powszechnie używanych właściwości w Opcje przedmiotem są:

• dane: Ta właściwość definiuje obiekt danych dla aplikacji Vue. Jest to funkcja, która zwraca obiekt zawierający właściwości danych i ich wartości początkowe.
• metody: metody Właściwość obiektu Options pełni istotne funkcje umożliwiające renderowanie dynamiczne.
• szablon: Ta właściwość definiuje szablon HTML dla instancji lub komponentu Vue. Jest to ciąg zawierający znaczniki HTML, które kompilator szablonów Vue może przeanalizować.

Pamiętaj, że podczas korzystania z właściwości szablonu kompilator Vue będzie renderował tylko zawartość zdefiniowaną w szablonie.

Oto przykład aplikacji Vue z rozszerzeniem dane, metody, I szablon nieruchomości:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<h1 @Kliknij=„Odwrócona wiadomość” >{{tekst}}h1>
dz>
<scenariusz>
konst aplikacja = Vue. utwórz aplikację ({
// szablon: '
Witamy w Twojej aplikacji Vue
',
 dane() {
powrót {
 tekst: „To jest Twoja aplikacja Vue”
 };
 },
 metody: {
 odwrócona wiadomość () {
Ten.tekst = Ten.tekst.podział('').reverse().joint('')
 }
 }
 });
aplikacja.uchwyt("#aplikacja");
scenariusz>
ciało>
HTML>

Ten program przedstawia podstawową aplikację Vue, która wyświetla tekst „To jest Twoja aplikacja Vue” za pomocą interpolacji tekstu i umożliwia użytkownikom kliknięcie go w celu odwrócenia komunikatu.

The dane() funkcja zwraca obiekt z pojedynczą właściwością o nazwie tekst. The @Kliknij dyrektywa służy do dołączania a odwrócona wiadomość() metoda do element, który odwraca tekst nieruchomość.

Po uruchomieniu tego programu utworzona aplikacja Vue będzie wyglądać następująco:

Kliknięcie na tekst spowoduje jego odwrócenie.

Zauważ, że program skomentował właściwość szablonu, aby umożliwić renderowanie zawartości w aplikacji Vue. Jeśli pozostawisz bez komentarza, ta aplikacja Vue pokaże tylko właściwość szablonu:

Istnieją inne właściwości, np rekwizyty I obliczone, które można również wykorzystać do tworzenia wydajnych i elastycznych aplikacji Vue podczas konfigurowania obiektu opcji.

Interpolacja tekstu w Vue

Interpolacja tekstu w Vue to funkcja, która pozwala dynamicznie wiązać dane z elementami HTML. Innymi słowy, umożliwi Ci bezpośrednie wyprowadzenie wartości właściwości danych instancji Vue w kodzie HTML.

Aby uzyskać interpolację tekstu w Vue, musisz ująć nazwę właściwości danych w podwójne nawiasy klamrowe. Vue interpretuje zawartość podwójnych nawiasów klamrowych jako wyrażenia JavaScript, a następnie zastępuje je ich wartością wynikową.

Na przykład:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<h1>{{ wiadomość }}h1>
<P>Witamy {{ nazwa }}P>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 wiadomość: "To jest Twoja aplikacja Vue.",
 imię: „Szlachetny”,
 };
 },
 });
 app.mount("#aplikacja");
scenariusz>
ciało>
HTML>

W tym przykładzie interpolacja tekstu wiąże plik wiadomość I nazwa właściwości obiektu danych zwróconego w instancji Vue do I elementy. Po zamontowaniu aplikacji Vue wyświetla ona wartości wiadomość I nazwa właściwości w kodzie HTML na odpowiednich pozycjach.

Możesz także wyświetlić wynik wywołania metody lub wykonać podstawowe operacje JavaScript w podwójnych nawiasach klamrowych:

HTML>
<HTMLlang="pl">
<głowa>
<tytuł>Aplikacja Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<h1>{{ wiadomość }}h1>
<h3>Witamy {{ name.toUpperCase() }}h3>
<P>Twoje imię ma {{ nameLength() }} liter.P>
dz>
<P>nie tutajP>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 wiadomość: „To jest Twoja aplikacja Vue”,
 nazwa: „Szlachetny Okafor”,
 };
 },
 metody: {
 nazwaDługość() {
 zwróć to.nazwa.długość - 1;
 },
 },
 });
 app.mount("#aplikacja");
scenariusz>
ciało>
HTML>

W tym przykładzie aplikacja Vue ma plik dane obiekt, który zawiera dwie właściwości: wiadomość I nazwa.

Wewnątrz aplikacji Vue trzy elementy HTML wyświetlają dane przy użyciu instancji Vue. The h1 element wyświetla wartość wiadomość nieruchomość, podczas gdy h3 element wyświetla wartość nazwa nieruchomość z A na wielkie litery() zastosowana w nim metoda.

The P element wyświetla zwrócony wynik nazwaDługość() metoda zdefiniowana w metody obiekt aplikacji Vue. The nazwaDługość() Metoda zwraca długość nazwa właściwość odjęta przez jeden.

Aby uzyskać dostęp do wartości z obiektu danych w obiekcie metod, musisz użyć Ten słowo kluczowe. Ten słowo kluczowe odnosi się do bieżącej instancji Vue i umożliwia dostęp do jej właściwości i metod z poziomu instancji Vue. Używając Ten, możesz pobrać wartość nazwa własności i wykonywać na niej wszelkie niezbędne manipulacje za pomocą metody.

Ta aplikacja Vue pokazuje, jak powiązać dane z elementami HTML za pomocą interpolacji tekstu oraz jak definiować i wywoływać metody w instancji Vue.

Zbuduj swój front-end za pomocą Vue

W tym artykule nauczyłeś się, jak rozpocząć pracę z Vue i interpolować tekst za pomocą składni szablonów Vue. Możesz uzyskać dostęp do kilku innych funkcji w Vue, takich jak dyrektywy i haki cyklu życia, co czyni go doskonałym wyborem do tworzenia dynamicznych aplikacji front-end.