Vue.js har fået sit ry som en progressiv JavaScript-ramme. Du kan bruge Vue.js til at bygge single-page applikationer (SPA'er) eller udvikle specifikke brugergrænseflader.

Her lærer du det grundlæggende i Vue.js, herunder hvordan du opretter en Vue-komponent og arbejder med optionsobjektet for at gengive dynamiske data.

Vue.js er en af ​​de mest populære JavaScript-rammer. For at komme i gang med Vue, og for at tilføje det til din HTML-side skal du kopiere script-tagget nedenfor og indsætte det i hovedafsnittet:

<manuskriptsrc="">manuskript>

Brug af CDN-linket er en glimrende mulighed for at forbedre statisk HTML eller tilføje funktionalitet til din applikation.

Du skal dog installere Vue.js via npm for at bruge flere af dets avancerede funktioner, såsom Single-File Component (SFC) syntaksen, som er nyttige, når du bygger fuldgyldige Vue-apps.

Oprettelse af en Vue-applikation

Adgang til Vue-biblioteket via CDN-linket giver et Vue-objekt, inklusive .createApp() metode.

Som navnet antyder, kan du oprette en Vue-app ved hjælp af denne metode.

For eksempel:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<manuskript>
 const app = Vue.createApp();
manuskript>
legeme>
html>

Her er den oprettede app gemt i app variabel. Når du har oprettet app-forekomsten, skal du gengive den ved hjælp af .mount() metode. Denne metode fortæller, hvor appen skal monteres i Document Object Model (DOM).

Ligesom:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">div>
<manuskript>
 const app = Vue.createApp();
 app.mount("#app");
manuskript>
legeme>
html>

At bruge Vue's .mount() metode, skal du angive et DOM-element eller en vælger som et argument. I dette eksempel monterede vi Vue-appen ved hjælp af DOM-elementet med #app ID.

Det er vigtigt at bemærke, at Vue-appen kun kontrollerer elementer, der blev specificeret ved hjælp af en id. Appen har heller ikke kontrol over noget uden for disse elementer, inklusive klikhændelser eller anden interaktivitet.

Det sidste trin i at oprette en Vue-applikation er at kalde .mount() metode efter at have fuldført alle app-konfigurationer.

Options-objektet i Vue

I Vue.js bruger du Muligheder objekt som et konfigurationsobjekt for at oprette en Vue-instans eller -komponent.

Det er en væsentlig del af en Vue-applikation, da den definerer adfærd og data for hver instans eller komponent. Det Muligheder objekt består af flere egenskaber, der repræsenterer forskellige aspekter af instansen eller komponenten.

Nogle af de almindeligt anvendte egenskaber i Muligheder objekt er:

• data: Denne egenskab definerer dataobjektet for Vue-applikationerne. Det er en funktion, der returnerer et objekt, som indeholder dataegenskaberne og deres begyndelsesværdier.
• metoder: Det metoder egenskaben for Options-objektet har vitale funktioner til at aktivere dynamisk gengivelse.
• skabelon: Denne egenskab definerer HTML-skabelonen for Vue-forekomsten eller -komponenten. Det er en streng, der indeholder HTML-markeringen, som Vues skabelonkompiler kan parse.

Bemærk, at når du bruger en skabelonegenskab, vil Vue-kompileren kun gengive indhold, der er defineret i skabelonen.

Her er et eksempel på en Vue-app med data, metoder, og skabelon ejendomme:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<h1 @klik="reverseMessage" >{{ tekst }}h1>
div>
<manuskript>
konst app = Vue.createApp({
// skabelon: '
Velkommen til din Vue app
',
 data() {
Vend tilbage {
 tekst: "Dette er din Vue App"
 };
 },
 metoder: {
 reverseMessage () {
det her.tekst = det her.text.split('').reverse().join('')
 }
 }
 });
app.mount("#app");
manuskript>
legeme>
html>

Dette program viser en grundlæggende Vue-app, der viser teksten "Dette er din Vue-app" ved hjælp af tekstinterpolation og giver brugerne mulighed for at klikke på den for at vende meddelelsen om.

Det data() funktion returnerer et objekt med en enkelt egenskab kaldet tekst. Det @klik direktiv bruges til at vedhæfte en reverseMessage() metode til element, som vender om tekst ejendom.

Når du kører dette program, vil den oprettede Vue-app se sådan ud:

Ved at klikke på teksten vendes den om.

Bemærk, at programmet kommenterede skabelonegenskaben for at tillade, at indholdet i Vue-appen kan gengives. Hvis den efterlades uden kommentarer, viser denne Vue-app kun en skabelonegenskab:

Der er andre ejendomme som rekvisitter og beregnet, som du også kan bruge til at skabe kraftfulde og fleksible Vue-applikationer, når du konfigurerer Options-objektet.

Tekstinterpolation i Vue

Tekstinterpolation i Vue er en funktion, der giver dig mulighed for at binde data til HTML-elementer dynamisk. Med andre ord vil det give dig mulighed for direkte at udlæse værdien af ​​en Vue-forekomsts dataegenskaber i HTML.

For at opnå tekstinterpolation i Vue skal du indpakke navnet på dataegenskaben i dobbelte krøllede klammeparenteser. Vue fortolker indholdet inde i de dobbelte krøllede seler som JavaScript-udtryk, og det erstatter dem yderligere med deres resulterende værdi.

For eksempel:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<h1>{{ besked }}h1>
<s>Velkommen {{ navn }}s>
div>
<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 besked: "Dette er din Vue-app.",
 navn: "Noble",
 };
 },
 });
 app.mount("#app");
manuskript>
legeme>
html>

I dette eksempel binder tekstinterpolationen besked og navn egenskaber for dataobjektet, der returneres i Vue-forekomsten til og elementer. Når Vue-applikationen er monteret, viser den værdierne for besked og navn egenskaber i HTML'en på deres respektive positioner.

Du kan også vise resultatet af et metodekald eller udføre grundlæggende JavaScript-handlinger inden for de dobbelte krøllede parenteser:

html>
<htmllang="da">
<hoved>
<titel>Vue apptitel>
<manuskriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">manuskript>
hoved>
<legeme>
<divid="app">
<h1>{{ besked }}h1>
<h3>Velkommen {{ name.toUpperCase() }}h3>
<s>Der er {{ nameLength() }} bogstaver i dit navn.s>
div>
<s>ikke hers>
<manuskript>
 const app = Vue.createApp({
 data() {
 Vend tilbage {
 besked: "Dette er din Vue-app",
 navn: "Noble Okafor",
 };
 },
 metoder: {
 nameLength() {
 returner this.name.length - 1;
 },
 },
 });
 app.mount("#app");
manuskript>
legeme>
html>

I dette eksempel har Vue-appen en data objekt, der indeholder to egenskaber: besked og navn.

Inde i Vue-appen viser de tre HTML-elementer data ved hjælp af Vue-forekomsten. Det h1 element viser værdien af besked ejendom, mens den h3 element viser værdien af navn ejendom med en toUpperCase() metode anvendt på det.

Det s element viser det returnerede resultat af nameLength() metode defineret i metoder genstand for Vue-appen. Det nameLength() metoden returnerer længden af navn egenskab fratrukket en.

For at få adgang til en værdi fra dataobjektet i methods-objektet skal du bruge det her søgeord. det her nøgleord refererer til den aktuelle Vue-instans og giver dig adgang til dens egenskaber og metoder inde fra Vue-instansen. Ved hjælp af det her, kan du hente værdien af navn ejendom og udføre eventuelle nødvendige manipulationer på den ved hjælp af metoder.

Denne Vue-app viser, hvordan man binder data til HTML-elementer ved hjælp af tekstinterpolation, og hvordan man definerer og kalder metoder i en Vue-instans.

Byg din front-end ved hjælp af Vue

I denne artikel lærte du, hvordan du begynder at arbejde med Vue og interpolerer tekst med Vues skabelonsyntaks. Du kan få adgang til flere andre funktioner i Vue, såsom direktiver og livscykluskroge, hvilket gør det til et fremragende valg til at bygge dynamiske front-end-applikationer.