1°/ Rappels Vuejs
1.1°/ organisation et structuration basique des fichiers.
- Même si l'on utilise pas vue-cli, il convient de structurer son application en séparant le code dans différents fichiers.
- Il faut donc au moins créer :
- un fichier html représentant la page principale de l'application SPA (i.e. dans un modèle MVC : la partie vue)
- un fichier js permettant de créer l'instance de Vue, de la "monter" sur un des éléments de la page html, et ensuite de réagir à des interactions de l'utilisateur (i.e. dans un modèle MVC : la partie contrôle).
- Il est également conseillé de créer :
- un ou plusieurs fichier js contenant les données gérées par l'application (i.e. dans MVC : le "modèle")
- un ou plusieurs fichier js décrivant les composants nécessaires pour créer l'application. NB : un tel fichier décrit les trois parties modèle, vue contrôle du composant.
Exemple :
- le fichier modèle de données : model.js
var items = [
{name:'helmet', price:200},
{name:'hauberk', price:500}
];
- le fichier html : index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/model.js"></script>
<script src="/shop-title.js"></script>
</head>
<body>
<div id="myapp">
<shop-title title="The Smith's shop"></shop-title>
<p> Today <input v-bind:value="date"/> </p>
<ol>
<li v-for="it in items">{{it.name}} : {{it.price}} gp</li>
</ol>
</div>
<script src="/index.js"></script>
</body>
</html>
- le fichier du composant shop-title : shop-title.js
Vue.component("shopTitle", {
props : [ 'title' ],
data : function() {
return {
msg : "Welcome to "
},
template: `
<div>\
<h1> {{msg}} {{ title }} </h1>\
</div>
`,
});
- le fichier créant la vue : index.js
var app = new Vue({
el: '#myapp',
data: {
items,
date : "01/01/1001"
}
})
1.2°/ Syntaxe
1.2.1°/ les champs principaux de la vue
- Dans l'instance de Vue (nommée app), le champ el pemet de préciser sur quel élément du fichier html on "accroche" (le mot officiel est monter) la vue. Généralement, on met la valeur de l'attribut id d'une balise <div>. A l'intérieur de cette balise, tout sera gérer par vuejs. C'est pourquoi on met généralement cette balise tout au début de <body>, pour que toute la age soit gérée grâce à vuejs.
- Le champ data contient toutes les variables qui seront observées par la vue afin de constater leur changement et si besoin reporter ce changement dans le visuel de la page, ou bien appeler une fonction.
- Dans le cas présent, la ligne items indique à la vue d'observer la variable items, se trouvant dans le modèle.
- Mais le champ data peut contenir des variables qui ne sont pas définies dans model.js. La vue observe alors ses propres données. Par exemple, date est une variable propre à la vue.
1.2.2°/ les instructions d'affichage
Remarque : quelle que soit l'instruction utilisée, elle ne peut s'appliquer QUE sur des variables observées par la vue.
- {{ nom_var_observée }} : permet d'afficher dans la page la valeur d'une variable observée par la vue. Si cette variable est un objet JSON avec plusieurs champs, on a également accès à la valeur de ces champs. Par exemple {{ it.price }}.
- v-for : permet de créer une suite de balises du même type, dont les attributs et/ou le contenu sont fixés grâce aux valeurs de variables observées par la vue. Par exemple <li v-for="it in items" ...> va générer autant de balises <li> qu'il y a d'éléments dans items.
- v-bind : permet de relier un attribut d'une balise à une valeur observée. Dans cet exemple, on veut que l'attribut value de <input> (donc ce qui est affiché dans la boite) prenne la valeur de la variable date. Si la valeur de date change, la valeur dans la boite est mise à jour. L'inverse n'est pas vrai. Pour cela, il faut une liaison bidirectionnelle, possible grâce à v-model.
- Pour les autres instructions (v-model, v-if, ...) et la définition de fonctions, reprenez les cours passés, ou bien consultez le guide d'utilisation : https://fr.vuejs.org/v2/guide/
1.2.3°/ le composant
Rappel : il existe deux méthodes pour déclarer un composant, soit de façon globale (utilisée dans cet exemple), soit la méthode locale (grâce au champ component) qui est plus utilisée avec vue-cli.
- Pour définir un composant à l'échelle globale (donc utilisable directement dans d'autres composants), il suffit d'appeler la méthode component(), avec en paramètre le nom du composant et un objet json décrivant ses propriétés et méthodes.
- l'objet json doit contenir au minimum un champ template décrivant le visuel du composant.
- Pour rendre paramétrable ce visuel, l'objet json peut contenir :
- un champ props, donnant une liste de noms de paramètres. La valeur de ces paramètres peut être fixée lorsque l'on utilise le composant dans le html (i.e. <shop-title title="...">)
- un champ data, qui est une fonction renvoyant un objet json. Cette objet contient des variables qui seront observées par la vue et donc utilisables pour paramétrer le visuel.
- Un composant étant une sorte de mini-vue, il est également possible de définir des fonctions.