Skip to content

3. project [vuejs-01]: de basis

Om de code die in [vuejs-00] wordt uitgevoerd te verklaren, gaan we deze vereenvoudigen in [vuejs-01]. We dupliceren de map [vuejs-00] in [vuejs-01]:

Image

Het project [vuejs-01] bestaat in wezen uit vier bestanden:

  • [main.js] [2] is het startpunt van het project;
  • [App.vue, HelloWorld.vue] en [3-4] zijn componenten van [Vue.js], die optioneel de volgende elementen bevatten:
    • [<template>...</template>]: code HTML;
    • [<script>...</script>]: de JavaScript-code die bij de code HTML hoort;
    • [<style>...</style>]: de stijl CSS die bij de code HTML hoort;
  • [public/index.html] [5]: het document HTML dat wordt weergegeven door de opdracht [npm run serve];

Het bestand [public/index.html] dat bij het uitvoeren van het project wordt weergegeven, is dit:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- opgebouwde bestanden worden automatisch ingevoegd -->
  </body>
</html>

Dit bestand HTML geeft dus statisch gezien niets weer. Er is hier geen code HTML. De weergave is dynamisch: de code jS van het project genereert HTML, dat de tag [<div id=’app’>] op regel 14 volledig vervangt. De code HTML, die wordt gegenereerd door de projectcode jS en wordt ingevoegd in plaats van de tag [<div>] op regel 14, is afkomstig van de tags [template] van de componenten [vue.js], waarbij de bestanden de extensie [.vue] hebben.

De code HTML wordt dynamisch ingevoegd in regel 14 door het volgende script [vuejs-01/main.js]:


// imports
import Vue from 'vue'
import App from './App.vue'

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Opmerkingen

  • regel 2: het object [Vue] wordt geleverd door het framework [vue.js];
  • regel 3: het object [App] wordt geleverd door het bestand [vuejs-01/App.vue];
  • regel 6: configuratie van het object [Vue];
  • regels 9-11: dit zijn de regels die:
    • de code HTML van de applicatie genereren. Regel 10: het bestand [App.vue] genereert deze code;
    • de in regel 10 gegenereerde code HTML laden in de sectie [<div id=’app’></div>] van het bestand [public/index.html];

Elk project [Vue.js] kan het bestand [index.html] ongewijzigd laten.

Het bestand [App.vue] van het oorspronkelijke project [vuejs-00] wordt in het project [vuejs-01] als volgt vereenvoudigd:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Opmerkingen

  • een fragment [.vue] bestaat uit maximaal drie secties:
    • [<template>...</template>]: de code HTML;
    • [<script>...</script>]: de JavaScript-code die bij de code HTML hoort;
    • [<style>...</style>]: de stijl CSS die bij de code HTML hoort;

Hier hebben we geen sectie [style].

  • regels 1-6: de code HTML van het fragment (pagina, component, weergave, ...);
  • regels 2-5: de sectie [template] mag slechts één element bevatten. Meestal wordt er een sectie [div] geplaatst die het gehele HTML van het fragment omvat. Er kan ook een <template>-tag worden geplaatst;
  • regel 3: een afbeelding;

Image

  • regel 4: een component met de naam [HelloWorld]. Het principe van [Vue.js] is het bouwen van webpagina’s met behulp van fragmenten die zijn gedefinieerd in [.vue]-bestanden, zoals hier [App.vue]. Deze component wordt gedefinieerd door het bestand [HelloWorld.vue], zoals gedefinieerd op regel 9 van het bijbehorende script jS;
  • regel 4: een component kan parameters accepteren. De parameter is hier het attribuut [msg];
  • regels 8-17: het script jS van het fragment (of de component);
  • regel 9: om de component [HelloWorld] in de component [App] te kunnen gebruiken, moet de definitie ervan worden geïmporteerd in het gedeelte [script];
  • regels 11-16: het script definieert een object en exporteert dit om het extern beschikbaar te maken;
  • regel 12: het attribuut [name] definieert de naam van de geëxporteerde component;
  • regels 13-15: het attribuut [components] somt de componenten op die door de component [App] worden gebruikt. Deze worden samen met de component geëxporteerd;

Regel 9: de component [HelloWorld] hoeft niet dezelfde naam te hebben als het bestand waarin deze is gedefinieerd. Deze zou kunnen worden geïmporteerd als [X] en geëxporteerd als component [Bonjour]:

Image

  • regel 14: de component [X] wordt geëxporteerd onder de naam [Bonjour]. Deze wordt vervolgens onder die naam gebruikt, regel 4;

De eerste versie komt het meest voor, dus zullen we onze componenten op deze manier definiëren;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Regel 14 is een afkorting voor de code [HelloWorld : HelloWorld]: de component [HelloWorld] (rechts, geïmporteerd op regel 9) wordt geëxporteerd onder de naam [HelloWorld] (links).

Image

We vereenvoudigen de component [HelloWorld.vue] als volgt:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Opmerkingen

  • de component [HelloWorld] heeft dezelfde bestandsstructuur als de hoofdcomponent [App];
  • regel 3: hier vindt een evaluatie van een JavaScript-uitdrukking plaats, in dit geval de uitdrukking [msg];
  • regels 10-12: hierin worden de eigenschappen van de component gedefinieerd, meer bepaald de parameters ervan. Toen de component [App] een instantie van de component [HelloWorld] aanmaakte, gebeurde dit met de volgende syntaxis: 

<HelloWorld msg="Notre première application Vue.js" />

De component [HelloWorld] wordt geïnstantieerd door een waarde toe te kennen aan de parameter (attribuut) [msg]. Als we de [template] van de component [HelloWorld] volgen, wordt deze:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • regels 7-14: de eigenschappen van de component, gedefinieerd in de vorm van een object dat wordt geëxporteerd;
    • regel 9: de component wordt geëxporteerd onder de naam [HelloWorld];
    • regels 10-12: de parameters ervan worden gedefinieerd door de eigenschap [props];

Als we ten slotte de sjablonen van de twee gebruikte [App, HelloWorld]-componenten samenvoegen, ziet het weergegeven bestand [index.html] er als volgt uit:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

We starten de toepassing door de opdracht [serve] [1] in het bestand [package.json] aan te passen:

Image

De weergegeven pagina is dan [2].

Laten we nu eens kijken naar de code van deze pagina:

Image

  • in [1], verander in [clic droit];
  • in [2], de broncode van de pagina. We zien dat dit de code is van het oorspronkelijke bestand [index.html] en dat is niet wat er is weergegeven. Het is inderdaad de pagina [index.html] die aanvankelijk is geladen. Vervolgens heeft JavaScript deze pagina dynamisch gewijzigd, maar dat wordt ons niet getoond;

Wanneer pagina’s dynamisch door JavaScript worden gegenereerd, heeft de optie [2] geen zin. Je moet naar de browsertools gaan (F12 in Firefox) om de code van de momenteel weergegeven pagina te bekijken:

Image

  • in [1], de inspecteur van het Document Object Model (DOM) van het weergegeven document;
  • in [2], wat er werkelijk in dit DOM staat;
  • [3-4], de tools die we zullen gebruiken om de JavaScript-objecten weer te geven die door het framework [Vue.js] worden gebruikt;
  • [4] is een extensie (in dit geval voor Firefox) om [Vue.js]-toepassingen te debuggen:
    • voor Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • voor Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Laten we het tabblad [Vue] [4] eens bekijken:

Image

De weergave [1-4] toont ons de structuur [Vue.js] van het document: de root van het document [2] (index.html) bevat de component [App] (3), die op zijn beurt de component [HelloWorld] (4) bevat. Als u op [4] klikt, verschijnen de eigenschappen van de componenten [HelloWorld] en [5].

In [4] (rechts) is de indicator [$vm0] te zien. Dit is de naam van de variabele die we in de console JavaScript [6] kunnen gebruiken om het object [HelloWorld] aan te duiden. Laten we dat eens doen:

Image

  • in [2] laten we de uitdrukking [$vm0] evalueren, waardoor de structuur ervan wordt weergegeven. Normaal gesproken hoeven we deze structuur niet rechtstreeks te gebruiken;

Laten we afsluiten door te laten zien hoe [hot reload] de opdracht [serve] kan gebruiken om het project uit te voeren:

  • wijzig in [App.vue] het bericht dat door [HelloWorld] wordt weergegeven:

Image

  • in [1] wordt het weergegeven bericht gewijzigd;
  • in [2-3] wordt de pagina automatisch bijgewerkt zonder dat we daar iets voor hoeven te doen;

We gaan nu verschillende projecten [vuejs-xx] aanmaken om de belangrijke punten van [Vue.js] te illustreren. Met ‘belangrijk’ bedoelen we ‘dat we deze zullen gebruiken in de client [vue.js] van de belastingberekeningsserver’. Andere ‘belangrijke’ punten zullen buiten beschouwing worden gelaten als ze niet in de client worden gebruikt. Er wordt dus geen uitputtende presentatie van [vue.js] gegeven.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 Ongewijzigd.