Vue.js is een micro-JavaScript-framework voor het maken van herbruikbare en reactieve componenten op uw site.
Front-end frameworks verschillen sterk in zowel omvang als reikwijdte, waarbij Vue.js opvalt door zijn minimale ontwerp en focus op aanpasbaarheid. Je hebt de keuze om je hele site te bouwen met behulp van Vue.js, gewoon om een enkel element van je site reactief te maken, of iets daartussenin. Vanwege dit is het zeer benaderbaar met een ondiepe leercurve.
In dit artikel gaan we een kijkje nemen naar de kerncomponenten van Vue.js en hoe je setup en start krijgt, maar laten we eerst eens kijken wanneer je een front-end framework zoals Vue.js zou willen gebruiken en waarom .
Front-end frameworks komen, zoals de meeste frameworks, overeen met veelvoorkomende taken, de gemene deler die je tegenkomt tussen projecten. Vue.js is specifiek bedoeld om het proces van het maken van HTML-componenten te abstraheren die dynamisch worden bijgewerkt via JavaScript.
Een paar van de pijnpunten die Vue.js voor u oplost, is het genereren van de dynamische HTML, het binden van de HTML-elementenacties aan uw gegevensopslagbereik en -context, en bijhouden wanneer de HTML automatisch opnieuw moet worden gerenderd.
Stel dat u een pagina heeft met een dynamische lijst met namen. Je hebt misschien een code geschreven die er ongeveer zo uitziet:
Wanneer u de HTML handmatig opbouwt, naast het feit dat de code in grotere voorbeelden snel moeilijk te beheren is, is er geen echt verband tussen de gegevens en de gegenereerde HTML. Als de reeks namen verandert, moet je je daarvan bewust zijn en de lijst opnieuw renderen. Dit alles is ook bedoeld voor het weergeven van dynamische gegevens, als u event-handlers zoals een on-click-handler wilt toevoegen, zodat u scope kunt besparen, blijft u uw code verder nesten en verder in:
Met Vue.js scheidt u de HTML als een sjabloon die aangeeft wat er moet worden gegenereerd op basis van de gegeven gegevens, en Vue.js geeft deze automatisch weer.
Ditzelfde voorbeeld in Vue.js ziet er als volgt uit:
We hebben de volledige scheiding tussen de HTML-aspecten van de JavaScript-code en de logica van de JavaScript-code, waardoor alles op zichzelf staat en veel beter beheersbaar is. We lopen echter een beetje voorop, laten we een stapje terug doen en kijken hoe de kern van Vue.js dit bereikt ...
In de kern van Vue.js definieert u een correlatie tussen uw HTML en sommige gegevens, en telkens wanneer de gegevens veranderen, wordt de HTML bijgewerkt. De manier waarop dit werkt, is wanneer u een Vue.js-component instantieert door bepaalde gegevens door te geven in de vorm van een JavaScript-object. Vervolgens wordt dit object gewijzigd en worden de eigenschappen vervangen door traceerbare methoden voor getter en setter.
Vue.js analyseert het gegevensobject tijdens het samenstellen van de HTML en ziet welke gegevens u hebt gebruikt om de verschillende HTML-elementen binnenin weer te geven. Hiermee wordt gecontroleerd of er wijzigingen in het gegevensobject zijn aangebracht en weet deze precies wat moet worden bijgewerkt en wanneer.
Een dergelijke strakke binding tussen de gegevens en de weergave vereenvoudigt drastisch de ontwikkeling van front-endtoepassingen en minimaliseert fouten als gevolg van onjuiste voorstelling van zaken. Door deze scheiding van zorgen kunt u zich concentreren op de logica van uw toepassing zonder dat u de weergave helemaal hoeft te updaten.
Installatie voor Vue.js is net zo eenvoudig als het opnemen van de bibliotheek:
Zoals ik al zei, bestaat een Vue.js-app uit een gegevensobject en een HTML-sjabloon waarin de gegevens kunnen worden ingesloten. Dus voor onze eerste app om Vue.js in actie te zien, kunnen we toevoegen aan de body :
Eerst definiëren we een div welke onze HTML-sjabloon zal zijn voor onze Vue.js-app. Binnen gebruiken we de dubbele accolades voor gegevensinterpolatie in de HTML.
Binnen de daadwerkelijke Vue.js-app definiëren we eenvoudig de gegevens en verbinden we de div als het element voor de app om te renderen en te gebruiken als sjabloon. Vervolgens verhogen we voor toegevoegde flakkering de telvariabele in onze app één keer per seconde.
Dat is alles wat er is om een Vue.js-toepassing te maken en deze in uw browser te openen. U zult zien dat de pagina automatisch wordt bijgewerkt telkens wanneer wij de eigenschap data updaten.
Nu in de meeste applicaties waarin de DOM reageert op de gegevens die worden gewijzigd slechts de helft van het verhaal is, hebt u ook een manier nodig om de gegevens bij te werken, Vue.js zorgt hiervoor met gebeurtenissen en methoden. Methoden zijn opgeslagen functies die worden uitgevoerd in de context van uw Vue.js-app.
Laten we ons tegenvoorbeeld bijwerken om de mogelijkheid toe te voegen de timer te starten en te stoppen in plaats van dat deze gewoon wordt uitgevoerd:
In de HTML-sjabloon hebben we een knop toegevoegd om de teller te starten en te stoppen. Om dit te bereiken, hebben we de tekst op de knop nodig om dynamisch te zijn en we hebben een gebeurtenishandler nodig voor wanneer op de knop wordt geklikt.
Als u een gebeurtenis in Vue.js op een element wilt declareren, typt u de naam van alle standaard HTML DOM-gebeurtenissen met v-on: , dus de mouseover evenement wordt v-on:mouseover of de keyup evenement wordt v-on:keyup . In ons voorbeeld gebruiken we de v-on:click attribuut om de click evenement.
Iets dat je misschien hebt opgemerkt, is dat voor de tekst van de knop we een methode aanroepen in plaats van alleen naar een opgeslagen eigenschap te verwijzen. In veel situaties bevatten de gegevens die u opslaat niet noodzakelijk het formaat dat u op de pagina wilt weergeven. Methoden kunnen hier worden gebruikt om de gegevens te verwerken en alle reactiviteit die u uit eigenschappen krijgt, is van toepassing bij het gebruik van methoden. Als de onderliggende gegevens veranderen, wordt de sjabloon dienovereenkomstig bijgewerkt.
In de app Vue.js hebben we nu een nieuwe eigenschap met de timervariabele en enkele methoden. De toggle methode die gebonden is aan de klikgebeurtenis van de knop, controleert of de timer eigenschap wordt ingesteld, start of stopt de timer respectievelijk en de counterAction methode wordt gebruikt om de juiste actie in de knop weer te geven, opnieuw gebaseerd op de timervariabele.
Aangezien de schakeloptie de eigenschap timer verandert, en de methode counterAction , die zich in de sjabloon Vue.js bevindt, de eigenschap timer gebruikt, wordt elke keer dat de schakelaar wordt gebruikt, de sjabloon de tekst van de knop opnieuw weergegeven.
Het is vermeldenswaard dat hoewel we geen initiële waarde hebben voor de timer- eigenschap, deze nog steeds gedeclareerd moet worden bij het maken van de Vue.js-app. Als u de eigenschap niet vanaf het begin declareert, is de eigenschap niet reactief en wordt de HTML niet opnieuw gegenereerd wanneer deze wordt gewijzigd.
In ons voorbeeld wordt de weergave één keer per seconde bijgewerkt terwijl de timer loopt, dus één keer per seconde wordt onze counteractiemethode ook aangeroepen wanneer de knop opnieuw wordt getekend. Met Vue.js kunnen we dit optimaliseren door het resultaat van een methode in cache op te slaan en alleen de methode op te roepen als de onderliggende gegevens die specifiek in de methode zijn gebruikt, zijn gewijzigd. Dit is ook handig als u dezelfde berekende eigenschap op meerdere plaatsen op de pagina gebruikt, in plaats van de waarde meerdere keren te verwerken, door de waarde in de cache te plaatsen, kunt u veel overhead reduceren.
Laten we het voorbeeld bijwerken om gecachte eigenschappen toe te voegen:
Het belangrijkste verschil, behalve voor de caching, is dat methoden onder computed waarnaar wordt verwezen als eigenschappen in tegenstelling tot methoden, dus in de HTML-sjabloon moesten we de haakjes verwijderen uit counterAction .