Vue.js har fått sitt rykte som ett progressivt JavaScript-ramverk. Du kan använda Vue.js för att bygga ensidiga applikationer (SPA) eller utveckla specifika användargränssnitt.

Här kommer du att lära dig grunderna i Vue.js, inklusive hur du skapar en Vue-komponent och arbetar med optionsobjektet för att rendera dynamisk data.

Vue.js är en av de mest populära JavaScript-ramverk. För att komma igång med Vue, och för att lägga till den på din HTML-sida, kopiera skripttaggen nedan och klistra in den i rubriken:

<manussrc="">manus>

Att använda CDN-länken är ett utmärkt alternativ för att förbättra statisk HTML eller lägga till funktionalitet till din applikation.

Du måste dock installera Vue.js via npm för att använda fler av dess avancerade funktioner, såsom Single-File Component (SFC) syntax, som är till hjälp när du bygger fullfjädrade Vue-appar.

Skapa en Vue-applikation

Att komma åt Vue-biblioteket via CDN-länken ger ett Vue-objekt, inklusive .createApp() metod.

Som namnet antyder kan du skapa en Vue-app med den här metoden.

Till exempel:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<manus>
 const app = Vue.createApp();
manus>
kropp>
html>

Här lagras den skapade appen i app variabel. När du har skapat appinstansen måste du rendera den med hjälp av .montera() metod. Den här metoden talar om var appen ska monteras i Document Object Model (DOM).

Såhär:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">div>
<manus>
 const app = Vue.createApp();
 app.mount("#app");
manus>
kropp>
html>

Att använda Vue's .montera() metod måste du ange ett DOM-element eller väljare som ett argument. I det här exemplet monterade vi Vue-appen med hjälp av DOM-elementet med #app ID.

Det är viktigt att notera att Vue-appen endast kontrollerar element som specificerades med en id. Appen har inte heller kontroll över något utanför dessa element, inklusive klickhändelser eller annan interaktivitet.

Det sista steget för att skapa en Vue-applikation är att anropa .montera() metod efter att ha slutfört alla appkonfigurationer.

Alternativobjektet i Vue

I Vue.js använder du alternativ objekt som ett konfigurationsobjekt för att skapa en Vue-instans eller -komponent.

Det är en viktig del av en Vue-applikation eftersom den definierar beteendet och data för varje instans eller komponent. De alternativ objekt består av flera egenskaper som representerar olika aspekter av instansen eller komponenten.

Några av de vanligaste egenskaperna i alternativ objekt är:

• data: Den här egenskapen definierar dataobjektet för Vue-applikationerna. Det är en funktion som returnerar ett objekt som innehåller dataegenskaperna och deras initiala värden.
• metoder: Den metoder egenskapen för objektet Options har viktiga funktioner för att möjliggöra dynamisk rendering.
• mall: Den här egenskapen definierar HTML-mallen för Vue-instansen eller komponenten. Det är en sträng som innehåller HTML-markeringen, som Vues mallkompilator kan analysera.

Observera att när du använder en mallegenskap kommer Vue-kompilatorn endast att återge innehåll som definierats i mallen.

Här är ett exempel på en Vue-app med data, metoder, och mall egenskaper:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<h1 @klick="reverseMessage" >{{ text }}h1>
div>
<manus>
konst app = Vue.createApp({
// mall: '
Välkommen till din Vue-app
',
 data() {
lämna tillbaka {
 text: "Detta är din Vue-app"
 };
 },
 metoder: {
 reverseMessage () {
detta.text = detta.text.split('').reverse().join('')
 }
 }
 });
app.montera("#app");
manus>
kropp>
html>

Det här programmet visar en grundläggande Vue-app som visar texten "Detta är din Vue-app" med hjälp av textinterpolation och låter användare klicka på den för att vända meddelandet.

De data() funktion returnerar ett objekt med en enda egenskap som kallas text. De @klick direktiv används för att bifoga en reverseMessage() metod för att element, som vänder på text fast egendom.

När du kör det här programmet kommer den skapade Vue-appen att se ut så här:

Om du klickar på texten vänds den.

Observera att programmet kommenterade mallegenskapen för att tillåta att innehållet i Vue-appen renderas. Om den lämnas utan kommentar kommer denna Vue-app bara att visa en mallegenskap:

Det finns andra egenskaper som rekvisita och beräknad, som du också kan använda för att skapa kraftfulla och flexibla Vue-applikationer när du konfigurerar Options-objektet.

Textinterpolation i Vue

Textinterpolation i Vue är en funktion som låter dig binda data till HTML-element dynamiskt. Med andra ord kommer det att göra det möjligt för dig att direkt mata ut värdet för en Vue-instanss dataegenskaper i HTML-koden.

För att uppnå textinterpolation i Vue måste du linda in namnet på dataegenskapen med dubbla klammerparenteser. Vue tolkar innehållet inuti de dubbla lockiga klammerparenteserna som JavaScript-uttryck, och det ersätter dem ytterligare med deras resulterande värde.

Till exempel:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<h1>{{ meddelande }}h1>
<sid>Välkommen {{ namn }}sid>
div>
<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 meddelande: "Detta är din Vue-app.",
 namn: "Adel",
 };
 },
 });
 app.mount("#app");
manus>
kropp>
html>

I det här exemplet binder textinterpolationen meddelande och namn egenskaper för dataobjektet som returneras i Vue-instansen till och element. När Vue-applikationen har monterats visar den värdena för meddelande och namn egenskaper i HTML-koden på sina respektive positioner.

Du kan också visa resultatet av ett metodanrop eller utföra grundläggande JavaScript-operationer inom de dubbla parenteserna:

html>
<htmllang="en">
<huvud>
<titel>Vue apptitel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
huvud>
<kropp>
<divid="app">
<h1>{{ meddelande }}h1>
<h3>Välkommen {{ name.toUpperCase() }}h3>
<sid>Det finns {{ nameLength() }} bokstäver i ditt namn.sid>
div>
<sid>inte härsid>
<manus>
 const app = Vue.createApp({
 data() {
 lämna tillbaka {
 meddelande: "Detta är din Vue-app",
 namn: "Noble Okafor",
 };
 },
 metoder: {
 nameLength() {
 returnera this.name.length - 1;
 },
 },
 });
 app.mount("#app");
manus>
kropp>
html>

I det här exemplet har Vue-appen en data objekt som innehåller två egenskaper: meddelande och namn.

Inuti Vue-appen visar de tre HTML-elementen data med Vue-instansen. De h1 elementet visar värdet på meddelande egendom, medan h3 elementet visar värdet på namn fastighet med en toUpperCase() metod som tillämpas på den.

De sid elementet visar det returnerade resultatet av nameLength() metod som definieras i metoder föremål för Vue-appen. De nameLength() metod returnerar längden på namn egenskapen subtraherad med en.

För att komma åt ett värde från dataobjektet i metodobjektet måste du använda detta nyckelord. detta nyckelordet refererar till den aktuella Vue-instansen och låter dig komma åt dess egenskaper och metoder inifrån Vue-instansen. Genom att använda detta, kan du hämta värdet på namn egendom och utföra alla nödvändiga manipulationer på den med hjälp av metoder.

Denna Vue-app visar hur man binder data till HTML-element med hjälp av textinterpolation och hur man definierar och anropar metoder i en Vue-instans.

Bygg ditt front-end med Vue

I den här artikeln lärde du dig hur du börjar arbeta med Vue och interpolerar text med Vues mallsyntax. Du kan komma åt flera andra funktioner i Vue, som direktiv och livscykelhakar, vilket gör det till ett utmärkt val för att bygga dynamiska front-end-applikationer.