Guia Vue.js

Vuejs is een heel eenvoudig Javascript-framework om te gebruiken, helaas is er  geen  echte vue.js-gids

 

Met het artikel van vandaag proberen we die leemte samen op te vullen.

De gids zal, vanwege de benodigde ruimte, goed gearticuleerd zijn, maar we zullen niet in staat zijn om op sommige concepten volledig in te gaan. Zorg er echter voor dat u de antwoorden vindt die u zocht en een solide basis hebt.

Inhoudsindex

  • Wat is Vue.js
  • Waarom Vue.js gebruiken
  • Eerste Vue.js-app
    • Interpolatie
    • model v
    • v-if vs v-show
    • De for v-for lus
    • v-bind
    • Modellen en componenten
  • conclusies

Wat is Vue.js

Vue.js is een Javascript-framework ontwikkeld door   Evan You  . Het is een  duidelijk progressief raamwerk  en heeft naar mijn mening veel meer voordelen ten opzichte van de beroemde   Angular   en   React  , om er maar een paar te noemen.

Embora, de fato, não permita realizar a miríade de operações que podem ser realizadas com um framework monolítico como o Angular, Vue.js contém em si todo um ecossistema capaz de se adaptar perfeitamente a qualquer tipo de aplicação frontend.

São vários pontos fortes entre os quais, sem dúvida, a versatilidade, a facilidade de utilização e, sobretudo, a de instalação. Além disso, Vue.js é um framework minimamente invasivo que funciona muito bem tanto sozinho quanto com aplicativos amplamente usados, como  jQuery  e  Laravel .

Vue.js hoje em dia goza de grande popularidade entre os desenvolvedores front-end, graças também a uma comunidade de suporte vibrante, liderada por você. Conforme mencionado, na verdade, Vue.js é parte de um ecossistema real que gravita em torno do núcleo do framework.

Met Vue kunt u in feite ook nuttige componenten krijgen, zoals CLI-installatie en unit-test. Het zijn Vue.js-add-ons die zijn ontwikkeld door dezelfde community als het framework en worden daarom als zeer betrouwbaar beschouwd.

Waarom Vue.js gebruiken

Overstappen op een   Javascript framework   is een must als we op professioneel niveau gaan coderen. Als ons doel is om front-end developers te worden, mogen we niet in ieder geval één JS-framework missen: of het nu Vue, React of Angular is.

Frameworks stellen ons in staat om een ​​goed georganiseerde werkomgeving te hebben, ons in staat te stellen te profiteren van de MVVM (Model View View-Model), de DOM te manipuleren en “On the fly” -bewerkingen uit te voeren op veranderlijke objecten tijdens de levenscyclus van een applicatie.

Reactieve programmering heeft het concept van de front-end in feite volledig veranderd. Wat voorheen alleen via AJAX mogelijk was, is door de aanwezigheid van gelijkaardige structuren ineens een stuk makkelijker te beheren geworden.

Er zijn verschillende   sterke punten van Vue  . Ten eerste is er een zeer korte en steile leercurve. Als je een goede kennis hebt van HTML, CSS en enige kennis van Javascript, zal het niet moeilijk zijn om Vue onder de knie te krijgen.

Een ander zeer interessant aspect van Vue.js is het   gebruiksgemak  . Hoewel we het in feite kunnen installeren via de   Node Package Manager  , is het mogelijk om Vue eenvoudig te gebruiken door het vanaf het CDN op onze HTML-pagina aan te roepen. Een veel eenvoudigere methode voor beginners

Om het te gebruiken, plaatst u daarom gewoon dit script op de pagina

<script src = “https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”> </script>

Simpel, toch? Op het moment van schrijven is de nieuwste versie 2.6.10. Wanneer er nieuwe versies worden uitgebracht, hoeft u Vue alleen maar handmatig bij te werken door het versienummer in het script te wijzigen.

Na deze paar eenvoudige stappen zijn we klaar om onze eerste Vue.js-app samen te stellen.

Eerste Vue.js-app

Nu we een algemeen begrip hebben van de wereld van Vue, kunnen we beginnen met het bouwen van onze eerste app. Laten we eerst in HTML een div maken met een bepaalde ID. Dit wordt de container voor onze app.

<div id = “app”> </div>

Laten we deze div voorlopig leeg laten en zorgen voor het Javascript-gedeelte. Om Vue te starten, moeten   we een instantie maken  . Deze instantie van Vue, die we zullen opnemen in een variabele met de naam   vm   , zal een element bevatten, de app-ID van onze div, en een object, data genaamd, dat de taak heeft om de gegevens nauwkeurig te bevatten.

var  vm =    nieuwe  Vue ({

van: ‘#app’,

datum: {

foo: ‘bar’

}

})

Interpolatie in Vue.js

Het interpolatieconcept is een van de belangrijkste in Javascript-frameworks. Een andere is de mogelijkheid om een ​​koppeling te maken tussen een JS-variabele en wat later in de HTML wordt getoond.

In ons eerste voorbeeld maken we een variabele in het data-object dat we foo noemen. Variabele foo wordt momenteel echter niet afgedrukt in de DOM.

Dus laten we de code aanpassen om dat mogelijk te maken.

<div id = “app”> {{foo}} </div>

Als alles goed gaat, vind je de woordbalk in de div met id-app.
Vind dit eerste volledige voorbeeld in codepen:   Vue.js interpolatievoorbeeld

Als je al ervaring hebt met Angular, zul je merken dat de syntaxis erg op elkaar lijkt. Zelfs het Google-framework beheert de variabelen in de interpolatie en plaatst ze tussen twee accolades.

Er zijn echter veel verschillen tussen Vue en de meest bekende Javascript-frameworks op de markt. Als je ze in detail wilt kennen, raad ik   het speciale gedeelte   in de officiële gids aan, in het Engels.

Het model v

Nu we het concept van interpolatie kennen, kunnen we overgaan tot iets veel praktischers, namelijk het v-model. Model v creëert, in tegenstelling tot interpolatie, een onlosmakelijke link tussen de variabele en zijn initiële model.

Dat gezegd hebbende, ik weet dat de definitie misschien een beetje vaag lijkt, maar ik ben ervan overtuigd dat een praktisch voorbeeld je zal helpen je hoofd leeg te maken.

Laten we een eenvoudige tekstinvoer maken, daarin zullen we wat tekst invoegen. Laten we tot slot een vetgedrukt element maken dat de tekst bevat die in de invoer is getypt. Hier is onze eerste HTML

<div id = “app”> <input type = “text” v-model = “value” />

 

De ingevoerde waarde is <b> reste {value}} {}} </div>

De JS-code die alles regelt, is echter als volgt:

var  vm =    nieuwe  Vue ({

van: ‘#app’,

Dobbelsteen : {

waarde : “

}

})

Probeer nu wat tekst in uw invoer in te voegen. Wat gebeurt er? de v-sjabloon kan de variabele binden aan de huidige waarde van de tekstinvoer.

Door dit te doen, ziet u uw tekst meteen vetgedrukt. Dit kleine voorbeeld, beschikbaar op codepen (   Voorbeeld v-model Vue.JS   ).

Stel je voor dat je hetzelfde zou moeten doen met jQuery of eenvoudig Javascript. Hoeveel regels code had je moeten gebruiken? Dit is hier een van de redenen om voor een structuur als Vue te kiezen.

v-als vs. v-show

Na de interpolatie en het model stuiten we op een ander onderwerp dat de ontwikkelaar heel goed kent: ik heb het over   conditionele constructies.

In feite laat Vue je ook logische bewerkingen uitvoeren en variabelen vergelijken. Laten we daarom een ​​praktisch voorbeeld nemen. Laten we een eenvoudige app maken die, na het vastleggen van de exacte tijd, ons een andere begroeting geeft op basis van het tijdstip van de dag waarop we ons bevinden.

Hier is ons HTML-gedeelte

<div id = “app”>

<p v-if = “tijd <12 && tijd> 5”> Goedemorgen! </p>

<p v-else-if = “time> = 12 && time <= 18”> Goedemiddag! </p>

<p v-else> Goedenacht! </p>

</div>

Het JS-gedeelte daarentegen is als volgt.

var  vm =    nieuwe  Vue ({

van: ‘#app’,

datum: {

tijd:    nieuwe   datum. getHours();

}

})

Zoals je kunt zien, heb ik de logische bewerkingen rechtstreeks naar de weergave gedelegeerd, omdat dit triviale berekeningen zijn. Als alternatief had ik het logische deel binnen de JS kunnen verplaatsen en de variabele al met de juiste waarde hebben geretourneerd.

Dit voorbeeld is ook beschikbaar in codepen:   Voorbeeld v-if Vue.js

Nauw verwant aan v-if vinden we v-show. Het belangrijkste verschil tussen v-if en v-show wat is het en wanneer gebruik je het een of het ander?

v-show doet niets anders dan het element verbergen, terwijl met v-if het element dat niet overeenkomt met de waarheid in de vergelijking niet in de HTML wordt afgedrukt.

Op prestatieniveau heeft v-if meer invloed, maar in veel gevallen heeft het nog steeds de voorkeur omdat, zoals gezegd, v-show niets anders doet dan het element in de DOM verbergen. Hier is een praktisch voorbeeld. Het html-gedeelte is als volgt:

<div id = “app”>

<p v-show = “check”> V-Show </p>

</div>

terwijl JS dit is

var  vm =    nieuwe  Vue ({

van: ‘#app’,

Dobbelsteen : {

check:    false

}

})

Ik nodig je uit om de verificatievariabele van false naar true te veranderen en te kijken wat er gebeurt. Focus niet alleen op de visuals, inspecteer het element ook met Firefox of Google Chrome.

Vind hier het volledige codepen-voorbeeld ->   v-show Vue.js-voorbeeld

De for:v-for-lus

Como qualquer linguagem de programação que se preze, Vue.js também permite que você percorra um determinado elemento, seja um array ou um objeto. O loop em um objeto é uma ótima maneira de obter informações, evitando operações redundantes. O loop for no Vue.js é muito simples de configurar. Neste exemplo, criamos um array em JS com uma série de dados dentro. No html, então, faremos um ciclo neste array obtendo os dados.
Aqui está a parte HTML

<div id = “app”>

<ul>

<li v-for = “cachorro em cachorros”> {{cachorro}} </li>

</ul>

</div>

A parte do Javascript é a seguinte

var vm =   novo Vue ({

from: ‘#app’,

data : {

cães: [‘Poodle’, ‘Volpino’, ‘pastor alemão’]

}

})

Het voorbeeld is gemakkelijk te begrijpen. We maken eenvoudig een matrix met hondenrassen en onderzoeken deze vervolgens door door de matrix te lopen. Het volledige voorbeeld is beschikbaar op codepen:   Voorbeeld v-for Vue.js

Het is duidelijk dat niets ons ervan weerhoudt meer geleerde constructies samen te voegen. Als we bijvoorbeeld willen dat de tekst vet is als het ras van de hond hetzelfde is als een poedel, kunnen we onze HTML op deze manier aanpassen

<div id = “app”>

<ul>

<li v-for = “hond in honden”>

<b v-if = “hond == ‘Poedel’”> <span> {{dog}} </span> </b>

<span v-else> {{dog}} </span>

</li>

</ul>

</div>

Een element binden: de v-bind

Je hebt waarschijnlijk wel eens gehoord van het concept van binding. De v-bind-instructie wordt gebruikt om een ​​waarde aan een HTML-attribuut te binden. Er zijn twee syntaxis voor v-binding.

We kunnen de gebruikelijke lange syntaxis v-bind = “waarde” gebruiken of deze inkorten met i: in plaats van v-bind. De keuze is aan jou, ik gebruik persoonlijk altijd een dubbele punt. Het belangrijkste is om dezelfde syntaxis in de hele code te behouden.

Laten we een eenvoudige knop maken. Het type knop wordt bepaald door een v-bind.

<div id = “app”> <button: type = “buttonType”> Testknop </button> </div>

In plaats daarvan is dit JS

var  vm =    nieuwe  Vue ({

van: ‘#app’,

Dobbelsteen : {

knopType: ‘verzenden’

}

});

De html die door dit voorbeeld wordt gegenereerd, is als volgt:

<button type = “submit”> Testknop </button>

Het volledige voorbeeld is beschikbaar op Codepen:   Voorbeeld v-bind Vue.js

Modellen en componenten

Een ander belangrijk aspect van Vue zijn de modellen en componenten. Het zijn niets meer dan stukjes code die we gemakkelijk kunnen hergebruiken in onze lay-out. Laten we dus eens kijken hoe we een herbruikbare sjabloon kunnen maken die is ingesloten in code met behulp van een Vue-component. Componenten zijn een zeer belangrijk onderdeel omdat ze ons in staat stellen de Vue-kern uit te   breiden   .

Laten we eerst onze component in het html-gedeelte maken. Om dit te doen, hoeven we alleen maar een soort tag te maken.

<div id = “app”>

<first-component> </cousin-component>

</div>

Het JS-gedeelte dat dit onderdeel aanpast, is als volgt:

var  primeComponent = {

sjabloon: ‘</code>

<div> eersteComponent. Het nummer: {{num}} </div>

‘,

datum:    functie  () {

retour   {

nummer: wiskunde. Willekeurig ( )

}

},

methoden: {

toonNum:    functie  () {

waarschuwing (“mijn nummer is” +    dit  .num);

}

}

}

 

vm =    nieuwe  Vue ({

van: ‘#app’,

Dobbelsteen : {

aantal: 42

},

componenten: {

firstComponent: firstComponent

}

})

Zoals je kunt zien, heb ik het gebruikelijke exemplaar van Vue gemaakt. Ik heb een nummer in mijn gegevens ingevoegd en een nieuw object gemaakt met de naam componenten. In componenten heb ik niets anders gedaan dan de syntaxis van de componentdeclaratie wijzigen, van degene met de middelste balk naar de gewone JS-notatie en vervolgens van de eerste component naar de eerste component.

Vervolgens definieer ik de eerste componentvariabele die daarin een sjabloon heeft: dat wil zeggen degene die daadwerkelijk wordt afgedrukt. Gegevens: waar we een eenvoudige javascript-functie hebben die een willekeurig getal retourneert. Een methode: die een functie bevat met de naam showNum die niets anders doet dan de waarschuwing van het eerder berekende willekeurige getal tonen.

Het volledige voorbeeld is beschikbaar op Codepen:   Vue.js component voorbeeld

conclusies

Als je mijn Italiaanse Vue.js-gids zorgvuldig hebt gevolgd   ,   zou je de basisprincipes van Vue.js volledig moeten hebben begrepen en vooral het grote potentieel ervan moeten waarderen. Mijn advies is om mijn voorbeelden aan te passen, waardoor ze complexer worden.

Als je alle geheimen van VueJS wilt leren kennen, raad ik   dit boek aan dat beschikbaar is op Amazon  , het is in het Engels, maar het zal je in staat stellen om in details te treden, zelfs met enkele praktische voorbeelden. Het boek is makkelijk te begrijpen en geschikt voor beginners.

Om Vue.js te ontwikkelen, moet u Google Chrome gebruiken en deze interessante   extensie voor Vue.js downloaden  .

 Altijd   volgen de officiële Vue.js documentatie   en als u nog vragen hebben, dan kunt u niet   aarzelen om te   komen  in  contact met mij en ik zal blij te beantwoorden.

Leave a Comment

Your email address will not be published. Required fields are marked *