Vue.js har fått sitt rykte som et progressivt JavaScript-rammeverk. Du kan bruke Vue.js til å bygge enkeltsideapplikasjoner (SPAer) eller utvikle spesifikke brukergrensesnitt.

Her vil du lære det grunnleggende om Vue.js, inkludert hvordan du oppretter en Vue-komponent og jobber med opsjonsobjektet for å gjengi dynamiske data.

Vue.js er en av de mest populære JavaScript-rammeverk. For å komme i gang med Vue, og for å legge den til HTML-siden din, kopier script-taggen nedenfor og lim den inn i head-delen:

<manussrc="">manus>

Å bruke CDN-koblingen er et utmerket alternativ for å forbedre statisk HTML eller legge til funksjonalitet til applikasjonen din.

Du må imidlertid installere Vue.js via npm for å bruke flere av de avanserte funksjonene, slik som Single-File Component (SFC)-syntaksen, som er nyttig når du bygger fullverdige Vue-apper.

Opprette en Vue-applikasjon

Å få tilgang til Vue-biblioteket via CDN-koblingen gir et Vue-objekt, inkludert .createApp() metode.

Som navnet tilsier, kan du lage en Vue-app ved å bruke denne metoden.

For eksempel:

html>
<htmllang="no">
<hode>
<tittel>Vue apptittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<manus>
 const app = Vue.createApp();
manus>
kropp>
html>

Her lagres den opprettede appen i app variabel. Etter å ha opprettet app-forekomsten, må du gjengi den ved hjelp av .mount() metode. Denne metoden forteller hvor du skal montere appen i Document Object Model (DOM).

Som så:

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

For å bruke Vue's .mount() metoden, må du oppgi et DOM-element eller en velger som argument. I dette eksemplet monterte vi Vue-appen ved å bruke DOM-elementet med #app ID.

Det er viktig å merke seg at Vue-appen kun kontrollerer elementer som ble spesifisert ved hjelp av en id. Appen har heller ikke kontroll over noe utenfor disse elementene, inkludert klikkhendelser eller annen interaktivitet.

Det siste trinnet for å lage en Vue-applikasjon er å ringe .mount() metode etter å ha fullført alle appkonfigurasjonene.

Options-objektet i Vue

I Vue.js bruker du Alternativer objekt som et konfigurasjonsobjekt for å lage en Vue-forekomst eller komponent.

Det er en viktig del av en Vue-applikasjon da den definerer oppførselen og dataene for hver instans eller komponent. De Alternativer objekt består av flere egenskaper som representerer ulike aspekter ved instansen eller komponenten.

Noen av de ofte brukte egenskapene i Alternativer objektet er:

• data: Denne egenskapen definerer dataobjektet for Vue-applikasjonene. Det er en funksjon som returnerer et objekt som inneholder dataegenskapene og deres startverdier.
• metoder: Den metoder egenskapen til Options-objektet har viktige funksjoner for å aktivere dynamisk gjengivelse.
• mal: Denne egenskapen definerer HTML-malen for Vue-forekomsten eller komponenten. Det er en streng som inneholder HTML-markeringen, som Vues malkompilator kan analysere.

Merk at når du bruker en malegenskap, vil Vue-kompilatoren bare gjengi innhold som er definert i malen.

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

html>
<htmllang="no">
<hode>
<tittel>Vue apptittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<h1 @klikk="reverseMessage" >{{ tekst }}h1>
div>
<manus>
konst app = Vue.createApp({
// mal: '
Velkommen til Vue-appen din
',
 data() {
komme tilbake {
 tekst: "Dette er din Vue-app"
 };
 },
 metoder: {
 reverseMessage () {
dette.tekst = dette.text.split('').reverse().join('')
 }
 }
 });
app.mount("#app");
manus>
kropp>
html>

Dette programmet viser en grunnleggende Vue-app som viser teksten "This is your Vue App" ved hjelp av tekstinterpolasjon og lar brukere klikke på den for å reversere meldingen.

De data() funksjonen returnerer et objekt med en enkelt egenskap kalt tekst. De @klikk direktiv brukes til å legge ved en reverseMessage() metoden til element, som reverserer tekst eiendom.

Når du kjører dette programmet, vil den opprettede Vue-appen se slik ut:

Hvis du klikker på teksten, reverseres den.

Merk at programmet kommenterte malegenskapen for å tillate at innholdet i Vue-appen gjengis. Hvis den står uten kommentarer, vil denne Vue-appen bare vise en malegenskap:

Det er andre eiendommer som Rekvisitter og beregnet, som du også kan bruke til å lage kraftige og fleksible Vue-applikasjoner når du konfigurerer Options Object.

Tekstinterpolasjon i Vue

Tekstinterpolering i Vue er en funksjon som lar deg binde data til HTML-elementer dynamisk. Med andre ord, det vil gjøre deg i stand til å sende ut verdien til en Vue-forekomsts dataegenskaper direkte i HTML-en.

For å oppnå tekstinterpolering i Vue, må du pakke inn navnet på dataegenskapen i doble krøllete klammeparenteser. Vue tolker innholdet i de doble krøllete klammeparentesene som JavaScript-uttrykk, og erstatter dem ytterligere med den resulterende verdien.

For eksempel:

html>
<htmllang="no">
<hode>
<tittel>Vue apptittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<h1>{{ beskjed }}h1>
<s>Velkommen {{ navn }}s>
div>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 melding: "Dette er Vue-appen din.",
 navn: "Edel",
 };
 },
 });
 app.mount("#app");
manus>
kropp>
html>

I dette eksemplet binder tekstinterpolasjonen beskjed og Navn egenskapene til dataobjektet returnert i Vue-forekomsten til og elementer. Når Vue-applikasjonen monteres, viser den verdiene til beskjed og Navn egenskaper i HTML-en på sine respektive posisjoner.

Du kan også vise resultatet av et metodekall eller utføre grunnleggende JavaScript-operasjoner innenfor de doble krøllete parentesene:

html>
<htmllang="no">
<hode>
<tittel>Vue apptittel>
<manussrc=" https://unpkg.com/vue@3/dist/vue.global.js">manus>
hode>
<kropp>
<divid="app">
<h1>{{ beskjed }}h1>
<h3>Velkommen {{ name.toUpperCase() }}h3>
<s>Det er {{ nameLength() }} bokstaver i navnet ditt.s>
div>
<s>ikke hers>
<manus>
 const app = Vue.createApp({
 data() {
 komme tilbake {
 melding: "Dette er din Vue-app",
 navn: "Noble Okafor",
 };
 },
 metoder: {
 nameLength() {
 return this.name.length - 1;
 },
 },
 });
 app.mount("#app");
manus>
kropp>
html>

I dette eksemplet har Vue-appen en data objekt som inneholder to egenskaper: beskjed og Navn.

Inne i Vue-appen viser de tre HTML-elementene data ved hjelp av Vue-forekomsten. De h1 element viser verdien av beskjed eiendom, mens h3 element viser verdien av Navn eiendom med en toUpperCase() metode brukt på det.

De s element viser det returnerte resultatet av nameLength() metode definert i metoder objektet til Vue-appen. De nameLength() metoden returnerer lengden på Navn eiendom trukket fra med én.

For å få tilgang til en verdi fra dataobjektet i metodeobjektet, må du bruke dette nøkkelord. dette nøkkelord refererer til gjeldende Vue-forekomst og lar deg få tilgang til egenskapene og metodene fra Vue-forekomsten. Ved bruk av dette, kan du hente verdien av Navn eiendom og utføre eventuelle nødvendige manipulasjoner på den ved å bruke metoder.

Denne Vue-appen viser hvordan du binder data til HTML-elementer ved hjelp av tekstinterpolasjon og hvordan du definerer og kaller metoder i en Vue-forekomst.

Bygg din front-end med Vue

I denne artikkelen lærte du hvordan du begynner å jobbe med Vue og interpolerer tekst med Vues malsyntaks. Du kan få tilgang til flere andre funksjoner i Vue, som direktiver og livssykluskroker, noe som gjør det til et utmerket valg for å bygge dynamiske front-end-applikasjoner.