VueJS.pptx

Vue.js
Formation du Framework Front-end Vue.js

Il sert à implémenter des SPA (Single Page Application)
Qu’est ce que Vue.js ?
C’est un Framework Javascript Front-end. Il vous permettra de
développer des petites applications aussi bien que des
applications à l’échelle de l’entreprise.

Caractéristiques de Vue.js
C’est un Framework très léger: son noyau fait seulement 16k
de taille quand il est minifié et gzippé.
Il est également rapide en terme de performance comparé à
des Frameworks concurrents:

Angular vs React vs Vue : Les plus et les moins
Angular :
Plus :
Très populaire pour les grosses et moyennes entreprises
Permet une bonne productivité
Performant
Excellent soutien par Google et la communauté
Moins :
Long et complexe à apprendre
Moins de liberté
Pas adapté aux petits projets sans complexité
Problèmes de passage de version à une autre
React :
Plus :
Facile à prendre en main
Framework le plus répandu et le plus populaire
Performant
Excellent soutien de Facebook et la communauté
Moins :
Pas de gestion d’état ni de router officiels
Nécessite un bon niveau en JavaScript
Nécessite un bon développeur sénior, sinon le travail en équipe sera
compliqué avec une mauvaise architecture de l’application
Vue.js :
Plus :
Facile à prendre en main
Une popularité en croissance constante
Flexible et complet
Performant
Moins :
Pas de soutien GAFAM

Caractéristiques de Vue.js
En dépit de sa petite taille, Vue.js est très riche en fonctionnalités
Components
Computed properties
Events
Developer tools
Double binding
Conditionals
Mixins Filters
Directives
Dynamic styles
Watchers

Getting Started …
 Visitez http://www.vuejs.org
 Cliquez sur « Get Started »
Cliquez sur le menu « Installation ». Plusieurs manière d’installer vue.js s’offrent à vous. Mais pour le moment
commençons par l’installation la plus simple. Insérez le lien suivant dans votre page HTML:
"https://unpkg.com/vue".
 Créez une page HTML5 simple avec un éditeur et intégrez ce lien Javascript
 Créez un élément html que vous voulez contrôler avec Vue.js (un div par exemple) avec id=« app »
 Créez une balise <script> qui crée un objet Vue comme suit ->

Premier programme Vue.js …
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="https://unpkg.com/vue "></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
</script>
</body>
</html>

Premier contact avec la gestion des évènements
Maintenant nous souhaitons rendre le message dynamique, dépendant de ce qui est saisi dans un champs texte.
Utilisation de la directive v-on, qui indique ce qu’il faut faire lors de l’occurrence d’un évènement donné
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src=" https://unpkg.com/vue "></script>
</head>
<body>
<div id="app">
<input type="text" v-on:input="updateMessage">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World'
},
methods: {
updateMessage: function (event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
Les directives peuvent avoir des arguments (comme dans
l’exemple: La directive « v-on » avec l’argument « input »
est représentée avec la syntaxe « v-on:input »

VueJS.pptx

Recommandé

Recommandé

Contenu connexe

Similaire à VueJS.pptx

Similaire à VueJS.pptx (20)

VueJS.pptx