Scribd
Importer
46 vues

Vuejs

Ce document décrit les principales fonctionnalités du framework JavaScript Vue.js, notamment le data binding, les composants, les props, les événements et l'architecture typique d'une application Vue.

Transféré par

Mohamed Aziz Rbii
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
46 vues

Vuejs

Ce document décrit les principales fonctionnalités du framework JavaScript Vue.js, notamment le data binding, les composants, les props, les événements et l'architecture typique d'une application Vue.

Transféré par

Mohamed Aziz Rbii
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 3

*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

Vous aimerez peut-être aussi