Vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842037/pasted-from-clipboard.png)
FRAMEWORK JAVASCRIPT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4912994/2afc15e216fe58a41327b977cdd5f1ce3b987ded.png)
LA SIMPLICITÉ AU SERVICE DU FRONT
Un nouveau ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842440/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842443/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842037/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4912994/2afc15e216fe58a41327b977cdd5f1ce3b987ded.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4953976/pasted-from-clipboard.png)
Librairie / framework front-end
Philosophie Data-Driven
Virtual DOM
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842443/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842037/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842440/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842440/pasted-from-clipboard.png)
Evan You crée Vue seul, et sa nouvelle communauté l'a poussé à quitter Google.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842495/pasted-from-clipboard.png)
2019
v3.0
Que propose Vue ?
- Une librairie pour le front-end
-
Simple et complet !
- Léger et progressif !
- Petit mais puissant !
- Innovant et documenté
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4912994/2afc15e216fe58a41327b977cdd5f1ce3b987ded.png)
Une librairie architecturale
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842839/pasted-from-clipboard.png)
Léger et pro
Rendu déclaratif
vue
Composants
applicatifs
Routage des vues
vue-router
Gestionnaire d'état
vuex
Server-Side Rendering
Progressive Web App
Dev Env. facilities
nuxt
Native
native-script-vue
JSX support
babel-plugin-transform-vue-jsx
...
Interface de commande
@vue/cli
...
Internationalisation
vue-i18n
My Business Plugin
my-business-plugin
gressif
ooo
gressif
Simple
et complet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842941/pasted-from-clipboard.png)
- Instanciation
Par raccrochage direct ou différé au DOM
- Compilation du template
& affichage de la vue
- En attente de changement
DOM virtuel
- Destruction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842941/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842941/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4842941/pasted-from-clipboard.png)
Petit mais puissant
Vue.use(MyPlugin);
Vue.component('myCustomComponent', {
data: {},
template: `<h1>hello</h1>`,
// The next attribute is an optional attribute
// which provides the ability to handle any
// specific action/mutation defined by the plugin
myPluginAddon: { /* my plugin logic addon */ }
}
Vue.use(Vuex);
// .. Store initialization .. //
Vue.component('myCustomComponent', {
created: {
// $store attribute is an addon by Vuex
// which permits to interact with store
// without any dependency
this.$store.dispatch('myCustomAction')
}
}
Progressif !
Innovant : 3 en 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4843207/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4843212/pasted-from-clipboard.png)
Innovant : très bonne doc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4843290/Capture_d_écran_-_2018-04-24_à_00.45.07.png)
Innovant : Dev Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4843388/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4843395/vuex-devtools.gif)
Pour aller plus loin :
vueschool.io
vuemastery.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4852675/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4852681/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/275559/images/4852684/pasted-from-clipboard.png)
vuejs.org
Introduction à Vue.js
By Michel EDIGHOFFER
Introduction à Vue.js
- 669