TUTO Vue JS : les bases en 35 minutes!

Vue JS est un framework JavaScript progressif pour la construction d’interfaces utilisateur. Avec sa syntaxe simple et sa grande flexibilité, il est rapidement devenu l’un des outils les plus populaires pour le développement web.

Prérequis

Avant de commencer ce tutoriel, il est recommandé de connaître les bases du HTML, du CSS et du JavaScript.

Installation

Vous pouvez télécharger Vue JS depuis le site officiel de Vue. Il est également possible de l’importer directement via un CDN (Content Delivery Network).


<!-- Via le CDN de Vue JS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


Premier exemple

Pour commencer, nous allons créer une instance de Vue et la lier à un élément HTML existant.


<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Bonjour Vue!'
    }
  })
</script>


Directives

Vue JS utilise des directives pour interagir avec le DOM.

Par exemple, la directive v-bind permet de lier une propriété de l’instance Vue à un attribut HTML :


<img v-bind:src="imagePath" alt="Image">


La directive v-on permet de réagir aux événements :


<button v-on:click="increaseCounter">Incrémenter</button>


Composants

Les composants sont un moyen puissant d’organiser et de réutiliser le code dans une application Vue.


Vue.component('greeting', {
  template: '<p>{{ message }}</p>',
  data: function() {
    return {
      message: 'Bonjour!'
    }
  }
})

<greeting></greeting>


Conclusion

Ce tutoriel a couvert les bases de Vue JS en 35 minutes. Il existe de nombreuses autres fonctionnalités avancées à explorer pour construire des applications web interactives et réactives.

N’hésitez pas à consulter la documentation officielle de Vue pour en savoir plus : https://vuejs.org/