Avant de debuter avec un generateur de projet utilisant des outils de build du style webpack nous allons exposer dans cet introduction la mise en place simple d’une application afin d’eviter toute complication dans la comprehension des notions de base de ce framework.
effectivement pour demarrer la creation d’une application à base de vuejs il suffit d’integrer dans le point d’entrée de notre application (index.html) le script vue.js.
les pre-requis pour la realisation de cet exemple sont donc les suivants:
un serveur léger par exemple live-server (npm install -g live-server) pour servir notre application et faire de l’auto-reload.
le script vue.js disponible sur cdnjs à l’adresse suivante: https://cdnjs.com/
nous allons aussi utiliser un framework de style (bootstrap ou semantic) disponible aussi sur cdnjs.
et un editeur de texte evoluer pour faciliter l’écriture du code
pour le moment la structure de notre application est tres simple:
un simple index.html qui contient notre vue.js (pour la phase de dev nous ne prenons pas de fichier min car les erreurs sont plus verbeuse avec un fichier non minifier)
et un script app.js dans le repertoire js qui contiendra notre code javascript.
Tutoriel 1
.main.container{
padding-top: 50px;
}
Tutoriel</div>
{{message}}
pour faire la liaison entre notre application js avec notre point d’entrer html nous devons preciser dans une des balises de notre body qui se chargera de l’affichage qu’il s’agit d’un element destiné a acceuillir des elements js.
id="app"; // le tag id fait la liaison entre app.js et notre html
{{message}} //affichage de la varible du modele
pour servir notre application nous allons utiliser live-server apres avoir fait l’installation via npm nous allons demarrer notre serveur leger a l’emplacement ou se trouve index.html
$live-server
comme nous pouvons le voir notre model n’etant pas encore creer nous avons un simple texte qui apparait la varible entre double accolade devrait etre interpreter.
dans notre application « js/app.js » nous allons a présent definir les elements de base:
pour initialiser notre application:
new Vue({
el: '#app'
})
new : creation d’une nouvelle application VueJs el : parametre precisant l’element de notre index.html sur lequel sera greffer le js dans notre cas ca sera sur la balise contenant l’id app. vuejs ce charge de la construction de notre page html final en greffant les different el (elements) taguer dans les script js. chaque template prendra donc sa place selon l’emplacement des id dans les balise html. ce qui a pour effet de prendre en compte le {{message}} qui est a present interpreter par Vuejs. Nous recuperons aussi l’erreur suivante sur notre console car la variable message n’est pas defini dans notre app.js:
il va donc falloir definir le « state » de notre application et ce a travers le parametre data. la notion de state est a peu pres la meme que sur du reactjs a la difference prés que sur vuejs la mise a jour du state se fait automatiquement.
el: '#app',
data: {
message: 'Salut tous le monde'
}
ce qui a pour resultat de nous afficher le contenu de la variable message
v-bind:
prenons maintenant le cas ou je voudrais ajouter un lien dynamique a mon message:
nous ajoutons donc la variable link:
data: {
message: 'Salut tous le monde',
link: 'http://www.google.com'
}
et dans notre index.html :
<div class="ui main container" id="app">
<a href="{{link}}">{{message}}</a></div>
cela génere l’erreur suivante qui dit que l’interpolation n’est pas possible à l’interieur des attribu et qu’il faut utiliser v-bind
voici comment faire de l’interpolation à l’interieur des attributs
<div class="ui main container" id="app">
<a>{{message}}</a></div>
un raccourcis pour « v-bind:href » est « :href » dans l’exemple les deux facons d’ecrire le v-bind
on utilise donc v-bind pour mapper une variable de notre modele dans l’attribut d’une balise ce qui a pour effet de dynamiser notre page html
v-if :
pour afficher une balise sous condition:
ajout de la variable boolean success:
app.js:
data: {
message: 'Salut tous le monde',
link: 'http://www.google.com',
success: false
}
ajout d’un v-if a notre div
<div class="ui main container" id="app">
<a>{{message}}</a>
<div class="ui success message">
Bravo Enregistrement effectué</div>
</div>
si on change la valeur de success a false la balise n’est plus injecter dans notre code html
on peux aussi utiliser v-show a la place de v-if, la difference est que v-show injecte l’element mais caché.
v-esle:
nous ajoutons un second message qui s’affichera en cas de success= false:
div class="ui success message" v-if="success"> Bravo Enregistrement effectué</div> <div class="ui error message"> Echec de l'enregistrement</div>
v-for:
nous creeons une liste de personnes:
..app.js.. link: 'http://www.google.com', success: true, personnes: ['Ziyad', 'Mohamed', 'Tarik', 'Kenza'] }
index.html:
<ul>
<li>{{personne}}</li>
</ul>
lié la methode a un evenement click:
<div class="ui success message"> <i class="close icon"></i> Bravo Enregistrement effectué</div>
v-model: modification du model par l’utilisateur en utilisant le concept MVVM (M = Model V=View)
app.js:
new Vue({
el: '#app',
data: {
message: 'Salut tous le monde',
link: 'http://www.google.com',
success: true,
personnes: ['Ziyad', 'Mohamed', 'Tarik', 'Kenza']
},
methods:{
close: function(){
if(this.success){
this.success = false
}else{
this.success=true
}
},
style: function(){
if(this.success){
return {background: '#00FF00'}
}else{
return {background: '#FF0000'}
}
}
}
})
index.html:
Tutoriel 1
.main.container{
padding-top: 50px;
}
<div class="ui inverted fixed menu">
<div class="header item">Tutoriel</div>
</div>
<div class="ui main container" id="app">
<a>{{message}}</a>
<div class="ui success message">
<i class="close icon"></i>
Bravo Enregistrement effectué</div>
<div class="ui error message">
<i class="close icon"></i>
Echec de l'enregistrement</div>
<div class="ui message">
{{message}}</div>
<div class="ui message">
autre facons de faire</div>
<div class="ui message">
utilisation de style</div>
<ul>
<li>{{personne}}</li>
</ul>
</div>
Les Filtres:
je souhaite appliquer un filtre qui met en majuscule le texte contenu dans la varible message. j’applique donc un pipe pour appliquer le filtre
<div class="ui main container" id="app">
{{message | capitalize}}</div>
il faut ajouter le filtre a notre code js:
Vue.filter('capitalize', function (value) {
return value.toUpperCase()
})
Blog Developpement 