*framework javascript qui permer de creer des UI, des SPA

simple : il faut que css html et js, facile a aprendre selon la courbe de
l'apprentissage par rapport a d autres framework
petite taille 16 kb dans la production, rapide utilise le dom virtuel

*installation :
> telecharger la version de dev ou de prod + faire reference a ce fichier js via la
tag script
> via la CDN via la tag script
> npm install vue + faire reference au fichier minifier .vue via la tag script
> npm install -g vue-cli + vue init webpack new-app

*data binding
v-text="name" : comme {{ }} mais remplace tout le contenu du div
{{name}}
v-bind:id="idData" ou bien :id="idData" pour le binding des données avec des
attributs
v-html="htmlData" : i lfaut etre sur du contenu pour eviter tout type d'injection
v-once : pour empecher l'affichage de toute modification exemple : sitewebtitle

*style
v-bind:style="{ color : dataColor }"
v-bind:style="objStyledata"
v-bind:style=[baseStyle, additionalStyle1]
v-bind:class={"available: available, text-center: true, 'float-left': false"}

*events
v-on:x exemple : v-on:click="add" (ou bien @click) v-on:click="dbladd()" v-
on:mousemove (event.offsetX)

*event modifier
v-on:click.once="click"
<a v-on:click.prevent="click" href="www.google.com">go</a>

*keyboard event
<input v-on:keyup="logName"/>
<input v-on:keyup.enter="logName"/>
<input v-on:keyup.alt.enter="logName"/>

*2 way data binding

v-model="name"

*computed : amelioer la perdormance

computed: {
addA() { }
addB() { }
}
<p> {{ addA }} </p>
<p> {{ addB }} </p>

=> addA et addB ne sont appele que lorsque la valeur dont elle depends est changer

v-show = div + style="display: 'none'"

v-if = pas de div dans le dom
<ul>
<li v-for="(animal, index) in animals">{{index}} - <template v-
for="(key,val)">{{key}}-{{val}}</template></li>
</ul>
<input type="text ref="myInput" />
<div ref="myDiv"></div>
this.$refs.myInput.value
this.$refs.myDiv.innerText

*architecture
node_modules
package.json
index.html
src : assets, main.js, app.vue

*nested component
- globalement : dans main.js (import Ninjas from 'Ninja.vue' + Vue.component("app-
ninjas", Ninjas)) + appel au niveau du fichier <app-ninjas></app-ninjas>
- localement : dans le fichier concerné : import Ninjas from './Ninja.vue' +
components: { 'app-ninjas': Ninjas } + <app-ninjas></app-ninjas>

*Component CSS (scoped)

pour eviter tout type de confusion de style pour les composants
<style scoped>

</style>

*props:

props:[ name ]
props: {
name: {
type: string,
required: true
}
}

*parent -> child : props

*child -> parent : event : this.$emit('changeTitle', 'new title') + <child v-

on:changeTitle="updateTitle($event)" /> + updateTitle(newTitle) { this.title =
newTitle }

*two components(c1 et c2) : const bus = new Vue() + import bus from '' dans c1 +
import bus from '' dans c3 +
bus.$emit('changeTitle', 'newTitle') + created() { bus.on('changeTitle',
(newTitle) => { this.title = newTitle })}

*life cycle hook

- beforeCreate() , created(), beforeMount(), mounted(), beforeUpdate(), updated(),
beforeDestroy(), destroyed()

*slot : permet de passer du code html du parent vers le fils

<div slot="name"> hey my name is aziz </div> + <slot name="name"></slot>

*composant dynamique : permet a un composant d'avoir plusieurs vues

<keep-alive>
<component v-bind:"compoentName">/<component>
</keep-alive>

*directive : permet d 'ajouter un certain comportement a un element du dom

Vue.directive('rainbow', {
 bind(el, binding, vnode) {
if(binding.valye)
el.style.color = "#" + binding.valye
else el.style.color = "#red"
}
})

<h2 v-rainbow="'green'">hi you</h2>

*Filtre : permet de formater la donnée dans le browser

<h1>{{title | to-uppercase}}</h1>
Vue.filter('to-uppercase', function(value) {
return value.toUpperCase()
}

*mixins : permet d'eviter la reecriture d'un code, partage d'un traitement computed