VueJS - Guide de démarrage pour les templates

Salut là, future superstar de Vue.js ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde des templates de Vue.js. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux te garantir que Vue.js est l'un des frameworks les plus accessibles pour les débutants. Alors,Attache-toi bien et plongeons dedans !

Qu'est-ce qu'un template Vue.js ?

Avant de commencer à coder, comprehension ce qu'est un template dans Vue.js. Penses-y comme l'ossature de ta page web - c'est là que tu définis la structure de ton HTML et que tu ajoutes un peu de magie Vue.js pour le rendre dynamique et interactif.

Structure de base

Voici un exemple de template Vue.js simple :

<div id="app">
{{ message }}
</div>

Dans cet exemple, {{ message }} est une syntaxe spéciale dans Vue.js appelée "interpolation". C'est comme un placeholder que Vue.js remplacera par des données réelles.

Voyons cela en action :

<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue !'
}
})
</script>

Lorsque tu exécuteras ce code, tu verras "Hello, Vue !" affiché sur ta page. De la magie, non ?

Le {{ message }} dans le template est remplacé par la valeur de message dans les données de notre instance Vue.

Directives : Les instructions spéciales de Vue

Passons maintenant aux directives. Ce sont des attributs spéciaux qui commencent par v- et donnent des instructions à Vue.js sur comment se comporter. Ils sont comme de petits sorciers qui jettent des sorts sur ton HTML !

v-bind : Attributs dynamiques

La directive v-bind est utilisée pour lier dynamiquement un attribut à une expression. Elle est tellement courante qu'il y a même un raccourci pour elle : :.

<div id="app">
<a v-bind:href="url">Clique-moi !</a>
<!-- Raccourci -->
<a :href="url">Clique-moi !</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

Dans cet exemple, l'attribut href de la balise <a> est dynamiquement défini à la valeur de url dans les données de notre instance Vue.

v-if, v-else-if, v-else : Rendu conditionnel

Ces directives te permettent de rendre des éléments conditionnellement en fonction de la vérité de l'expression.

<div id="app">
<p v-if="seen">Maintenant tu me vois</p>
<p v-else>Maintenant tu ne me vois pas</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

Essaye de changer seen en false et observe la magie se produire !

v-for : Rendu de liste

La directive v-for est utilisée pour rendre une liste d'items basée sur un tableau.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Apprendre JavaScript' },
{ text: 'Apprendre Vue' },
{ text: 'Construire quelque chose d\'incroyable' }
]
}
})
</script>

Cela rendra une liste de todos. Chaque élément <li> est créé pour chaque item dans le tableau todos.

Gestion des événements avec v-on

La directive v-on est utilisée pour écouter des événements DOM et exécuter un peu de JavaScript lorsque ceux-ci sont déclenchés. Elle est tellement utile qu'elle a même un raccourci : @.

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Inverser le message</button>
<!-- Raccourci -->
<button @click="reverseMessage">Inverser le message</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js !'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

Clique sur le bouton et observe ton message faire un backflip !

Liaison bidirectionnelle avec v-model

La directive v-model crée une liaison bidirectionnelle sur les éléments d'entrée de formulaire ou les composants.

<div id="app">
<input v-model="message">
<p>Le message est : {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue !'
}
})
</script>

Tape dans le champ d'entrée et vois le message se mettre à jour en temps réel. C'est comme de la magie, mais mieux - c'est Vue.js !

Propriétés calculées et observateurs

Propriétés calculées

Les propriétés calculées sont comme des propriétés de données super-puissantes. Ce sont des propriétés qui sont calculées en fonction d'autres propriétés.

<div id="app">
<p>Message original : "{{ message }}"</p>
<p>Message inversé calculé : "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

La propriété reversedMessage sera toujours l'inverse de message, et elle se met à jour automatiquement lorsque message change !

Observateurs

Les observateurs sont comme des gardiens vigilants pour tes données. Ils observent les changements dans les données et effectuent des actions lorsque ces changements se produisent.

<div id="app">
<p>
Pose une question oui/non :
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: 'Les questions contiennent généralement un point d\'interrogation. ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'En attente que tu arrêtes de taper...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Les questions contiennent généralement un point d\'interrogation. ;-)'
return
}
this.answer = 'Réfléchissant...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Erreur ! Impossible de joindre l\'API. ' + error
})
}
}
})
</script>

Dans cet exemple, nous observons la propriété question. Lorsqu'elle change, nous mettons à jour answer et appelons une méthode pour récupérer une nouvelle réponse à partir d'une API.

Tableau des méthodes

Voici un tableau récapitulatif des méthodes que nous avons couvertes :

Méthode	Description	Exemple
v-bind	Lier dynamiquement des attributs	<a v-bind:href="url">
v-if	Rendu conditionnel	<p v-if="seen">Maintenant tu me vois</p>
v-for	Rendu de liste	<li v-for="item in items">{{ item }}</li>
v-on	Gestion des événements	<button v-on:click="doSomething">
v-model	Liaison bidirectionnelle	<input v-model="message">

Et voilà ! Tu viens de faire tes premiers pas dans le merveilleux monde des templates Vue.js. Souviens-toi, la pratique rend parfait, alors n'hesite pas à expérimenter avec ces concepts. Avant de t'en rendre compte, tu seras en train de construire des applications incroyables avec Vue.js. Bon codage !

Credits: Image by storyset