Tutoriel Vue

Avant d’étudier Vue, vous devriez avoir une compréhension de base de :

  • HTML
  • CSS
  • JavaScript

Vue est un framework JavaScript . Il peut être ajouté à une page HTML avec une balise <script>.

Vue étend ::extends les attributs HTML avec des directives et lie les données au HTML avec des expressions .

Vue est un framework JavaScript

Vue est un framework JavaScript front-end écrit en JavaScript.

React et Angular sont des frameworks similaires à Vue, mais Vue est plus léger::light et plus facile à prendre en main::easier to learn.

Vue est distribué sous forme de fichier JavaScript et peut être ajouté à une page web avec une balise script :

<script

  src=”https://unpkg.com/vue@3/dist/vue.global.js”>

</script>

===

Ma première page

Nous allons maintenant apprendre à créer notre toute première page web Vue, en 5 étapes simples :

  1. Commencez par un fichier HTML de base.
  2. Ajoutez une <div>balise permettant id=”app”à Vue de se connecter.
  3. Indiquez au navigateur comment gérer le code Vue en ajoutant une <script>balise contenant un lien vers Vue.
  4. Ajoutez une <script>balise contenant l’instance Vue.
  5. Connectez l’instance Vue à la <div id=”app”>balise.

Ces étapes sont décrites en détail ci-dessous, avec le code complet dans un exemple « À vous de jouer » à la fin.

Étape 1 : Page HTML

Commencez par une simple page HTML :

<!DOCTYPE html>

<html lang=”en”>

<head>

  <title>My first Vue page</title>

</head>

<body>

  <div id=”app”>

    {{ message }}

  </div>

  <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>

  <script>

    const app = Vue.createApp({

      data() {

        return {

          message: “Hello World!”

        }

      }

    })

   app.mount(‘#app’)

  </script>

</body>

</html>

===

JavaScript dans l’interpolation de texte

Des expressions JavaScript simples peuvent également être écrites à l’intérieur des doubles accolades {{ }}.

===