5. project [vuejs-03]: gebeurtenisbeheer
Het project [vuejs-03] introduceert twee concepten:
- het beheer van een [clic]-gebeurtenis op een knop;
- de richtlijn [v-if] waarmee een blok HTML voorwaardelijk kan worden weergegeven;
De projectstructuur is als volgt:
5.1. Het hoofdscript [main.js]
Het script [main.js] blijft ongewijzigd:
// imports
import Vue from 'vue'
import App from './App.vue'
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// configuratie
Vue.config.productionTip = false
// project instantiëren [App]
new Vue({
render: h => h(App),
}).$mount('#app')
5.2. De hoofdcomponent [App.vue]
De hoofdcomponent [App.vue] maakt gebruik van de component [ClickOnMe] in plaats van de component [HelloBootstrap]:
<template>
<b-container>
<b-card>
<!-- Bootstrap Jumbotron -->
<b-jumbotron>
<!-- regel -->
<b-row>
<!-- kolom met breedte 4 -->
<b-col cols="4">
<img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
</b-col>
<!-- kolom met breedte 8 -->
<b-col cols="8">
<h1>Calculez votre impôt</h1>
</b-col>
</b-row>
</b-jumbotron>
<!-- component -->
<ClickOnMe msg="Information..." />
</b-card>
</b-container>
</template>
<script>
import ClickOnMe from "./components/ClickOnMe.vue";
export default {
name: "app",
components: {
ClickOnMe
}
};
</script>
5.3. De component [ClickOnMe]
De component [ClickOnMe] introduceert de volgende nieuwe concepten:
<template>
<div>
<!-- bericht op groene achtergrond -->
<b-alert show variant="success" align="center">
<h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
</b-alert>
<!-- bericht op gele achtergrond -->
<b-alert show variant="warning" align="center" v-if="show">
<h4>{{msg}}</h4>
</b-alert>
<!-- blauwe knop -->
<b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
</div>
</template>
<script>
export default {
name: "ClickOnMe",
// instellingen van de component
props: {
msg: String
},
// attributen van de component
data() {
return {
// titel van de knop
buttonTitle: "Cacher",
// regelt de weergave van het bericht
show: true
};
},
// methoden
methods: {
// toont / verbergt het bericht
changer() {
if (this.show) {
// het bericht wordt verborgen
this.show = false;
this.buttonTitle = "Montrer";
} else {
// het bericht wordt weergegeven
this.show = true;
this.buttonTitle = "Cacher";
}
}
}
};
</script>
Opmerkingen
- regels 4-6: een groene Bootstrap-waarschuwing. Het aantal gebruikte kolommen wordt niet aangegeven. Er worden dan de 12 kolommen van Bootstrap gebruikt;
- regels 8-10: een gele Bootstrap-waarschuwing:
- regel 8: de richtlijn [v-if] van [Vue.js] regelt de zichtbaarheid van een blok HTML. De waarschuwing wordt hier geregeld door een booleaanse waarde [show] (regel 29). Als [show==true] geldt, is de waarschuwing zichtbaar; anders is dat niet het geval;
- regel 9: de waarschuwing geeft een bericht weer [msg], dat een eigenschap (regels 20-22) van de component is;
- regel 12: een blauwe knop waarop je kunt klikken om de waarschuwing [warning] te verbergen of weer te geven;
- regels 16-48: de code jS van de component. Deze code regelt de dynamische werking van de component:
- regels 20-22: de eigenschappen van de component;
- regels 24-31: de attributen van de component;
Wat is het verschil tussen [propriétés] en [attributs] van een component, en tussen de velden [props] en [data] van het object dat door de component wordt geëxporteerd in de regels 17-47?
- Zoals we al hebben gezien, zijn de eigenschappen [props] van een component parameters van de component. Hun waarden worden buiten de component vastgelegd. Een component A die gebruikmaakt van een component B met de eigenschappen [prop1, prop2, ..., propn], zal deze als volgt gebruiken: <B :prop1=’val1’ :prop2=’val2’ ...> ;
- het object dat wordt geretourneerd door de functie [data] in de regels 24-31 vertegenwoordigt de toestand van de component of de attributen van de component. Deze toestand wordt bewerkt door de methoden van de component (regels 33-46). De <template> in de regels 1-14 maakt zowel gebruik van [propriétés]-elementen als van [attributs]-elementen:
- de waarden van de eigenschappen worden vastgelegd door een bovenliggende component;
- de waarden van de attributen worden in eerste instantie vastgesteld door de functie [data] en kunnen vervolgens worden gewijzigd door de methoden;
- in beide gevallen reageert de visuele weergave onmiddellijk op wijzigingen in een eigenschap (bovenliggende component) of een attribuut (methode van de component). We spreken dan van een reactieve interface;
In de [template] van een component is er geen verschil tussen een eigenschap [prop] en een attribuut [data]. Om te bepalen of een dynamische waarde van [template] in het attribuut [props] moet worden geplaatst of in het object dat door de functie [data] wordt geretourneerd, moet men zich eenvoudigweg afvragen wie de waarde van deze gegevens vaststelt:
- als het antwoord de bovenliggende component is, dan plaatsen we het gegeven in het attribuut [props];
- als het antwoord de methode is die een dergelijke gebeurtenis van de component afhandelt, dan wordt het gegeven in het object geplaatst dat door de functie [data] wordt geretourneerd;
[template] maakt hier gebruik van de volgende dynamische gegevens:
- [show], regel 8. Dit gegeven wordt intern verwerkt door de methode [changer], die de gebeurtenis [click] op de knop van regel 12 afhandelt. Het is dus een attribuut dat wordt aangemaakt door de functie [data] (regel 29);
- [msg], regel 9. Dit is een bericht dat door de bovenliggende component is vastgelegd. Het wordt dus in het attribuut [props] (regel 21) geplaatst;
- [buttonTitle], regel 12. Deze gegevens worden intern verwerkt door de methode [changer], die de gebeurtenis [click] op de knop van regel 12 afhandelt. Het is dus een attribuut dat wordt aangemaakt door de functie [data] (regel 27);
- de namen van de attributen [name, props, data, methods] van het door de component geëxporteerde object zijn vooraf gedefinieerd. Er kunnen geen andere namen worden gebruikt;
- regel 12: het attribuut [@click] van de knop dient om de methode aan te duiden die moet reageren op een klik op de knop. Deze methode moet zich bevinden in de eigenschap [methods] van de component;
- regel 33: het attribuut [methods] van de component bevat alle methoden van de component. Meestal zijn dit functies die reageren op een gebeurtenis van de component;
- regels 35-46: de methode [changer] wordt aangeroepen wanneer de gebruiker op de knop klikt:
- als de waarschuwing [warning] wordt weergegeven, wordt deze verborgen en verandert de tekst van de knop in [Montrer] (regel 39);
- als de waarschuwing [warning] verborgen is, wordt deze weergegeven en wordt de tekst van de knop [Cacher] (regel 43);
- om de waarschuwing [warning] weer te geven of te verbergen, wijzigt men de waarde van de booleaanse variabele [show] (regels 38 en 42);
- wanneer een methode moet verwijzen naar het attribuut [attr] dat door de functie [data] wordt gerenderd, schrijft men [this.attr] (regels 38 en 42). Dit betekent dat de attributen van het object dat door de functie [data] wordt geretourneerd, directe attributen zijn van de component [this];
5.4. Uitvoering van het project
Het resultaat is als volgt:
