SlideShare une entreprise Scribd logo
1  sur  8
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 »

Contenu connexe

Similaire à VueJS.pptx

Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
vlabatut
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
Livre blanc a la decouverte de windows azure
Livre blanc a la decouverte de windows azureLivre blanc a la decouverte de windows azure
Livre blanc a la decouverte de windows azure
Microsoft Technet France
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO CAMP
 

Similaire à VueJS.pptx (20)

Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
Techdays 2012 : Mise en place d'une démarche ALM avec Visual Studio pour Wind...
 
Introduction à Vaadin
Introduction à VaadinIntroduction à Vaadin
Introduction à Vaadin
 
Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Expérience pratique de développement Azure
Expérience pratique de développement AzureExpérience pratique de développement Azure
Expérience pratique de développement Azure
 
Framework JavaScript Web - Brief techno
Framework JavaScript Web - Brief technoFramework JavaScript Web - Brief techno
Framework JavaScript Web - Brief techno
 
Oracle Developer adf
Oracle Developer adfOracle Developer adf
Oracle Developer adf
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Livre blanc a la decouverte de windows azure
Livre blanc a la decouverte de windows azureLivre blanc a la decouverte de windows azure
Livre blanc a la decouverte de windows azure
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 

VueJS.pptx

  • 1. Vue.js Formation du Framework Front-end Vue.js
  • 2. 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.
  • 3. 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:
  • 4. 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
  • 5. 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
  • 6. 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 ->
  • 7. 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>
  • 8. 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 »