Syntaxe de base de Vue3

Vue.js est un framework JavaScript progressif, principalement utilisé pour construire des interfaces utilisateur.

Vue.js est basé sur les concepts de composants et de données réactives, offrant un moyen simple et efficace de construire des interfaces utilisateur.

Composants à fichier unique de Vue

Le composant à fichier unique de Vue (SFC) est un format de fichier du framework Vue.js qui permet aux développeurs de placer du code HTML, JavaScript et CSS dans un seul fichier, généralement avec.vuecomme extension de fichier.

Un composant à fichier unique est une forme d'organisation de code réutilisable qui encapsule le HTML, le CSS et le JavaScript appartenant au même composant dans un fichier en utilisant.vuecomme suffixe de fichier.

Voici quelques syntaxes et concepts de base courants de Vue.js, notamment la syntaxe des templates, les directives, la gestion des événements, les propriétés calculées et les composants, qui seront expliqués en détail dans les chapitres suivants.

1. Création d'une instance Vue

Créer une instance Vue est la première étape pour commencer à utiliser Vue.js. Généralement, vous créez une instance Vue dans un fichier HTML et la montez sur un élément DOM.

Exemple

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Essayez-le »

Description de la section HTML :

<div id="hello-vue" class="demo">:

  • Il s’agit d’un<div>élément, qui a un id dehello-vueet une classe dedemo。
  • Dans l'application Vue, ceci<div>sera géré par l'instance Vue, et son contenu sera mis à jour lorsque les données changent.

{{ message }}:

  • Ceci est la syntaxe de template de Vue.js, utilisée pour lier lesmessagedonnées à la page.
  • Lorsque les données dans l'instance Vuemessagechangent, le contenu de la page sera mis à jour en conséquence.

Description de la section JavaScript :

Définition de l'instance Vue :

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
  • HelloVueAppest un objet JavaScript simple contenant les options de composant Vue.
  • data()la méthode renvoie un objet contenantmessagela propriété, et la valeur initiale de cette propriété est'Hello Vue!!'。

Créer et monter l'application Vue :

  • Vue.createApp()méthode est utilisée pour créer une instance d'application Vue, et le paramètre est un objet contenant les options du composant (ici c'estHelloVueApp）。
  • .mount('#hello-vue')méthode monte l'instance d'application Vue sur l'élément de page avecid="hello-vue"l'élément DOM.

Processus d'exécution

  • Lorsque la page se charge, le navigateur analyse le HTML et le JavaScript.
  • Lorsque le script Vue.js s'exécute, il crée une instance d'application Vue et la lie à l'<div id="hello-vue">élément.
  • L'instance d'application Vue, selon lesdata()données initiales dans, vamessageafficher la valeur de ... sur la page{{ message }}position.
  • QuandmessageLorsque les données changent (par exemple, via l'interaction de l'utilisateur ou des opérations asynchrones), la page se mettra automatiquement à jour pour refléter ces changements.

2. Syntaxe de template

Interpolation

Vue.js utilise des doubles accolades{{ }}pour représenter l'interpolation de texte :

Exemple

<div>{{ message }}</div>

Directives

Les directives sont des attributs spéciaux avec le préfixev-utilisé pour exprimer la logique dans les templates.

v-bind: lie dynamiquement un ou plusieurs attributs, ou une prop de composant.

<a v-bind:href="url.html">Link</a>

Raccourci :

<a :href="url.html">Link</a>

v-if / v-else-if / v-else: rendu conditionnel.

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for: rendu de liste.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: liaison de données bidirectionnelle.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: écouteur d'événement.

<button v-on:click="doSomething">Click me</button>

Raccourci :

<button @click="doSomething">Click me</button>

3. Gestion des événements

Dans Vue.js, vous pouvez utiliser la directive v-on pour écouter les événements DOM et exécuter du code JavaScript lorsqu'ils sont déclenchés.

Exemple

<div id="app">
  <button @click="greet">Saluer</button>
</div>

<script>
  createApp({
    methods: {
      greet() {
        alert('Bonjour !');
      }
    }
  }).mount('#app');
</script>

4. Propriétés calculées

Les propriétés calculées sont des propriétés mises en cache en fonction de leurs dépendances. Une propriété calculée n'est recalculée que lorsque ses dépendances associées changent.

Exemple

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Bonjour'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

5. Composants

Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants permettent de construire de grandes applications à l'aide de petits composants indépendants et généralement réutilisables.

Exemple

const app = createApp({});

app.component('my-component', {
  template: '<div>Un composant personnalisé !</div>'
});

Utilisation des composants

Exemple

<div id="app">
  <my-component></my-component>
</div>

<script>
  const app = createApp({});

  app.component('my-component', {
    template: '<div>Un composant personnalisé !</div>'
  });

  app.mount('#app');
</script>

6. Props et événements

Props

Les props servent à transmettre des données entre les composants.

Exemple

<div id="app">
  <blog-post title="Mon parcours avec Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

Événements

Les composants enfants utilisent$emitpour déclencher des événements, et les composants parents peuvent écouter ces événements.

Exemple

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Clics totaux : {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">Vous m'avez cliqué {{ count }} fois.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
Autres extensions