Digital Dynamics
L'informatique innovante et abordable

Dernière mise à jour : ven. 14 sept. 2018, 07:58

Découvrez Vue.js le framework Javascript flexible et agile

Encore un énième framework Javascript ?

 

 

La base

La seule chose à faire dans la page html, c'est d'ajouter la balise suivante entre les balises <head></head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 

La pratique

Affichage de la valeur d'une variable

<div id="div1">{{message}} est prêt</div>
<script type="text/javascript">
	var vue = new Vue({
		el: '#div1',
		data: {
			message: 'Le navigateur'
		}
	});
</script>
Résultat : {{message}} est prêt

 

Affichage d'une liste d'éléments

    <div id="div2">
		<p>Choses à faire à l'école</p>
		<ol>
			<li v-for="element in liste">{{ element.libelle }}</li>		
		</ol>
	</div>
<script type="text/javascript">
		var vue2 = new Vue({
			el: '#div2',
			data: {
				liste: [
				{ libelle: 'Apprendre à lire'},
				{ libelle: 'Apprendre à écrire'},
				{ libelle: 'Apprendre à compter'}
				]
			}
		});
</script>

 

Résultat:

Choses à faire à l'école

  1. {{ element.libelle }}

 

Affichage d'une liste d'éléments modifiables

    <div id="div3">
		<p><strong>Liste des corvées</strong></p>
		<ol>
			<li
			is="liste-item"
			v-for="(element, index) in liste"
			v-bind:key="element.id"
			v-bind:libelle="element.libelle"
			v-on:remove="liste.splice(index, 1)"
			></li>
		</ol>
		<form v-on:submit.prevent="addCorvee">
			<label for="new-corvee">Ajouter une corvée</label>
			<input v-model="newCorveeText" id="new-corvee" placeholder="Ex. nourrir le chat">
			<button>Ajouter</button>
		</form>	
	</div>
<script type="text/javascript">
		Vue.component('liste-item', {
			template: '
				<li>
				{{ libelle }}
				<button v-on:click="$emit('remove')">Supprimer</button>
				</li>
				',
			props: ['libelle']
		})
		var vue3 = new Vue({
			el: '#div3',
			data: {
				liste: [
				{ id: 0, libelle: 'Sortir la poubelle'},
				{ id: 1, libelle: 'Passer la serpillère'},
				{ id: 2, libelle: 'Faire la vaisselle'}
				],
				nextCorveeId: 3,
				newCorveeText: ''
			},
			methods: {
				addCorvee: function () {
					this.liste.push({
					id: this.nextCorveeId++,
					libelle: this.newCorveeText
					})
					this.newCorveeText = ''
				}
			}
		});
</script>

 

Résutat:

Liste des corvées

  1.  

 

Affichage d'éléments conditionnel

    <div id="div4">
		<div>
		<template v-if="langue === 'fr'">
			<p>Français</p>
			<img src="//cdn.countryflags.com/thumbs/france/flag-800.png" width=100 height=70>
		</template>
		<template v-else>
			<p>Anglais</p>
			<img src="//cdn.countryflags.com/thumbs/united-kingdom/flag-400.png" width=100 height=70>
		</template>
		</div>
		<button v-on:click="toggleLangue">Changer d'affichage</button>
	</div>
<script type="text/javascript">
		var vue4 = new Vue({
			el: '#div4',
			data: {
				langue: 'fr'
			},
			methods: {
				toggleLangue: function () {
					return this.langue = this.langue === 'fr' ? 'en' : 'fr'
				}
			}
		});
</script>

 

Résultat:

 

 

 

L'informatique facile et expliquée