Vue.js heeft zijn reputatie verdiend als een progressief JavaScript-framework. U kunt Vue.js gebruiken om applicaties met één pagina (SPA's) te bouwen of om specifieke gebruikersinterfaces te ontwikkelen.

Hier leer je de basisprincipes van Vue.js, inclusief hoe je een Vue-component maakt en hoe je met het options-object werkt om dynamische gegevens weer te geven.

Vue.js is een van de meest populaire JavaScript-frameworks. Om aan de slag te gaan met Vue, en om het aan uw HTML-pagina toe te voegen, kopieert u de onderstaande scripttag en plakt u deze in het head-gedeelte:

<scriptsrc="">script>

Het gebruik van de CDN-link is een uitstekende optie om statische HTML te verbeteren of functionaliteit aan uw applicatie toe te voegen.

U moet Vue.js echter via npm installeren om meer van zijn geavanceerde functies te gebruiken, zoals de Single-File Component (SFC)-syntaxis, die handig is bij het bouwen van volwaardige Vue-apps.

Een Vue-applicatie maken

Toegang tot de Vue-bibliotheek via de CDN-link levert een Vue-object op, inclusief de .createApp() methode.

Zoals de naam al aangeeft, kunt u met deze methode een Vue-app maken.

Bijvoorbeeld:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<script>
 const app = Vue.createApp();
script>
lichaam>
html>

Hier wordt de aangemaakte app opgeslagen in de app variabel. Nadat u de app-instantie hebt gemaakt, moet u deze renderen met behulp van het .mount() methode. Deze methode vertelt waar de app in de Documentobjectmodel (DOM).

Zoals zo:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">div>
<script>
 const app = Vue.createApp();
 app.mount("#app");
script>
lichaam>
html>

Om Vue's te gebruiken .mount() methode, moet u een DOM-element of selector als argument opgeven. In dit voorbeeld hebben we de Vue-app gekoppeld met behulp van het DOM-element met de #app ID KAART.

Het is belangrijk op te merken dat de Vue-app alleen elementen beheert die zijn opgegeven met een ID kaart. Ook heeft de app geen controle over iets buiten deze elementen, inclusief klikgebeurtenissen of enige andere interactiviteit.

De laatste stap bij het maken van een Vue-applicatie is het aanroepen van de .mount() methode na het voltooien van alle app-configuraties.

Het Options-object in Vue

In Vue.js gebruik je de Opties object als een configuratieobject om een ​​Vue-instantie of -component te maken.

Het is een essentieel onderdeel van een Vue-applicatie omdat het het gedrag en de gegevens voor elke instantie of component definieert. De Opties object bestaat uit verschillende eigenschappen die verschillende aspecten van de instantie of component vertegenwoordigen.

Enkele van de veelgebruikte eigenschappen in de Opties voorwerp zijn:

• gegevens: Deze eigenschap definieert het gegevensobject voor de Vue-toepassingen. Het is een functie die een object retourneert dat de gegevenseigenschappen en hun beginwaarden bevat.
• methoden: De methoden eigenschap van het Options-object bevat vitale functies bij het mogelijk maken van dynamische weergave.
• sjabloon: Deze eigenschap definieert de HTML-sjabloon voor de Vue-instantie of -component. Het is een string die de HTML-opmaak bevat, die de sjablooncompiler van Vue kan ontleden.

Houd er rekening mee dat wanneer u een sjablooneigenschap gebruikt, de Vue-compiler alleen inhoud weergeeft die in de sjabloon is gedefinieerd.

Hier is een voorbeeld van een Vue-app met de gegevens, methoden, En sjabloon eigenschappen:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<h1 @Klik="omgekeerd bericht" >{{ tekst }}h1>
div>
<script>
const app = Vue.createApp({
// sjabloon: '
Welkom bij je Vue-app
',
 gegevens() {
opbrengst {
 tekst: "Dit is jouw Vue-app"
 };
 },
 methoden: {
 omgekeerdeBericht () {
dit.tekst = dit.text.split(''.reverse().join('')
 }
 }
 });
app.monteer("#app");
script>
lichaam>
html>

Dit programma toont een eenvoudige Vue-app die de tekst "Dit is uw Vue-app" weergeeft met behulp van tekstinterpolatie en stelt gebruikers in staat erop te klikken om het bericht om te keren.

De gegevens() functie retourneert een object met een enkele eigenschap genaamd tekst. De @Klik richtlijn wordt gebruikt om een omgekeerdeBericht() methode naar de element, dat het omkeert tekst eigendom.

Bij het uitvoeren van dit programma ziet de gemaakte Vue-app er als volgt uit:

Als u op de tekst klikt, wordt deze omgekeerd.

Merk op dat het programma de sjablooneigenschap heeft becommentarieerd om de inhoud in de Vue-app weer te geven. Als er geen commentaar wordt gegeven, zal deze Vue-app alleen een sjablooneigenschap tonen:

Er zijn andere eigenschappen zoals rekwisieten En berekend, die u ook kunt gebruiken om krachtige en flexibele Vue-applicaties te maken bij het configureren van het Options-object.

Tekstinterpolatie in Vue

Tekstinterpolatie in Vue is een functie waarmee u gegevens dynamisch aan HTML-elementen kunt binden. Met andere woorden, het stelt u in staat om de waarde van de gegevenseigenschappen van een Vue-instantie rechtstreeks in de HTML uit te voeren.

Om tekstinterpolatie in Vue te bereiken, moet u de naam van de data-eigenschap tussen dubbele accolades plaatsen. Vue interpreteert de inhoud binnen de dubbele accolades als JavaScript-expressies en vervangt deze verder door hun resulterende waarde.

Bijvoorbeeld:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<h1>{{ bericht }}h1>
<P>Welkom {{ naam }}P>
div>
<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 bericht: "Dit is uw Vue-app.",
 naam: "Edel",
 };
 },
 });
 app.mount("#app");
script>
lichaam>
html>

In dit voorbeeld bindt de tekstinterpolatie de bericht En naam eigenschappen van het gegevensobject geretourneerd in de Vue-instantie naar de En elementen. Zodra de Vue-applicatie is geactiveerd, worden de waarden van de bericht En naam eigenschappen in de HTML op hun respectieve posities.

U kunt ook het resultaat van een methodeaanroep weergeven of eenvoudige JavaScript-bewerkingen uitvoeren binnen de dubbele accolades:

html>
<htmllang="en">
<hoofd>
<titel>Vue-apptitel>
<scriptsrc=" https://unpkg.com/vue@3/dist/vue.global.js">script>
hoofd>
<lichaam>
<divID kaart="app">
<h1>{{ bericht }}h1>
<h3>Welkom {{ name.toUpperCase() }}h3>
<P>Er zijn {{ nameLength() }} letters in je naam.P>
div>
<P>niet hierP>
<script>
 const app = Vue.createApp({
 gegevens() {
 opbrengst {
 bericht: "Dit is uw Vue-app",
 naam: "Nobele Okafor",
 };
 },
 methoden: {
 naamLengte() {
 retourneer deze.naam.lengte - 1;
 },
 },
 });
 app.mount("#app");
script>
lichaam>
html>

In dit voorbeeld heeft de Vue-app een gegevens object dat twee eigenschappen bevat: bericht En naam.

In de Vue-app geven de drie HTML-elementen gegevens weer met behulp van de Vue-instantie. De h1 element geeft de waarde weer van de bericht eigendom, terwijl de h3 element geeft de waarde weer van de naam pand met een naarHoofdletter() methode erop toegepast.

De P element geeft het geretourneerde resultaat weer van de naamLengte() methode gedefinieerd in de methoden object van de Vue-app. De naamLengte() methode retourneert de lengte van de naam eigenschap met één afgetrokken.

Om toegang te krijgen tot een waarde uit het gegevensobject in het methodenobject, moet u gebruiken dit trefwoord. dit sleutelwoord verwijst naar de huidige Vue-instantie en geeft u toegang tot de eigenschappen en methoden vanuit de Vue-instantie. Door het gebruiken van dit, kunt u de waarde van de ophalen naam eigendom en voer de nodige manipulaties uit met behulp van de methoden.

Deze Vue-app laat zien hoe u gegevens kunt binden aan HTML-elementen met behulp van tekstinterpolatie en hoe u methoden in een Vue-instantie kunt definiëren en aanroepen.

Bouw uw front-end met behulp van Vue

In dit artikel heb je geleerd hoe je met Vue kunt werken en hoe je tekst kunt interpoleren met de sjabloonsyntaxis van Vue. U hebt toegang tot verschillende andere functies in Vue, zoals richtlijnen en lifecycle-hooks, waardoor het een uitstekende keuze is voor het bouwen van dynamische front-end-applicaties.