*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 ([Link])
*event modifier
v-on:[Link]="click"
<a v-on:[Link]="click" href="[Link]">go</a>
*keyboard event
<input v-on:keyup="logName"/>
<input v-on:[Link]="logName"/>
<input v-on:[Link]="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.$[Link]
this.$[Link]
*architecture
node_modules
[Link]
[Link]
src : assets, [Link], [Link]
*nested component
- globalement : dans [Link] (import Ninjas from '[Link]' + [Link]("app-
ninjas", Ninjas)) + appel au niveau du fichier <app-ninjas></app-ninjas>
- localement : dans le fichier concerné : import Ninjas from './[Link]' +
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) { [Link] =
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() { [Link]('changeTitle',
(newTitle) => { [Link] = 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
[Link]('rainbow', {
bind(el, binding, vnode) {
if([Link])
[Link] = "#" + [Link]
else [Link] = "#red"
}
})
<h2 v-rainbow="'green'">hi you</h2>
*Filtre : permet de formater la donnée dans le browser
<h1>{{title | to-uppercase}}</h1>
[Link]('to-uppercase', function(value) {
return [Link]()
}
*mixins : permet d'eviter la reecriture d'un code, partage d'un traitement computed
