VueJS - Présentation
Vueest un framework JavaScript pour créer des interfaces utilisateur. Sa partie principale se concentre principalement sur la couche de vue et est très facile à comprendre. La version de Vue que nous allons utiliser dans ce tutoriel est 2.0.
Comme Vue est essentiellement conçu pour le développement frontend, nous allons traiter de nombreux fichiers HTML, JavaScript et CSS dans les prochains chapitres. Pour comprendre les détails, commençons par un exemple simple.
Dans cet exemple, nous allons utiliser la version de développement de vuejs.
Exemple
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>Production
C'est la première application que nous avons créée avec VueJS. Comme vu dans le code ci-dessus, nous avons inclus vue.js au début du fichier .html.
<script type = "text/javascript" src = "js/vue.js"></script>Il y a un div qui est ajouté dans le corps qui imprime “My first VueJS Task” dans le navigateur.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>Nous avons également ajouté un message dans une interpolation, ie {{}}. Cela interagit avec VueJS et imprime les données dans le navigateur. Pour obtenir la valeur du message dans le DOM, nous créons une instance de vuejs comme suit -
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})Dans l'extrait de code ci-dessus, nous appelons l'instance Vue, qui prend l'identifiant de l'élément DOM, c'est-à-dire e1: '# intro', c'est l'identifiant du div. Il y a des données avec le message auquel la valeur est attribuée‘My first VueJS Task’. VueJS interagit avec DOM et change la valeur dans le DOM {{message}} avec’My first VueJS Task’.
Si nous changeons la valeur du message dans la console, la même chose sera reflétée dans le navigateur. Par exemple -
Détails de la console
Dans la console ci-dessus, nous avons imprimé l'objet vue_det, qui est une instance de Vue. Nous mettons à jour le message avec“VueJs is interesting” et la même chose est immédiatement modifiée dans le navigateur, comme indiqué dans la capture d'écran ci-dessus.
Ceci est juste un exemple de base montrant la liaison de VueJS avec DOM, et comment nous pouvons le manipuler. Dans les prochains chapitres, nous en apprendrons davantage sur les directives, les composants, les boucles conditionnelles, etc.