En prenant connaissance du fichier html suivant :
<html>
<head>
<title>Ma page Vue.js</title>
</head>
<body>
<div id="app">
<nav-bar titre="Mon application" @efface="effaceUtilisateur($event)" @ajout="ajoutUtilisateur($event)" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./app.js"></script>
</body>
</html>
Et du fichier app.js :
const app = Vue.createApp({
data() {
return {
}
},
methods: {
effaceUtilisateur(userID) {
console.log(`Utilisateur ${userID} efface`)
},
ajoutUtilisateur(userID) {
console.log(`Utilisateur ${userID} ajoute`)
}
}
})
app.component('nav-bar', {
template: `
<div>
{{ titre }}
...navigation bar code...
<br/> <input type='text' ref='saisie' @keyup.delete='envoiEfface(10);' @keyup.enter='envoiAjout(11);' />
</div>
`,
props: {
titre: {
type: String,
required: true,
default: 'Mon application'
}
},
methods: {
envoiEfface(userId) {
this.$emit('efface', userId)
},
envoiAjout(userId) {
this.$emit('ajout', userId)
}
}
})
app.mount('#app');
Essayer de comprendre le fonctionnement de cette application.
Le fichier html et le fichier js de départ sont fournis en ressources dans \\prof\vue js\td6\ressources.