VueJs pour débutant Liaison de données de partie VueJs

Dans le blog/article précédent, nous avons appris à créer, importer et utiliser des composants. Cette fois, nous explorerons la liaison de données dans les composants.

Utiliser des données dans des composants

Définir des données dans un composant
Les données sont définies dans la fonction data() et renvoyées sous forme d'objet.
Voici un exemple :

data() {
  return {
    message: 'Hello World!'
  };
}

Liant aux directives

v-bind : lier les attributs HTML aux données.

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

v-model : la directive v-model est utilisée pour la liaison de données bidirectionnelle sur les entrées de formulaire. Il maintient la valeur d'entrée synchronisée avec les données de l'instance Vue. Essentiellement, v-model combine @input (qui écoute les modifications) et :value (qui définit la valeur d'entrée). Par exemple :

<input v-model="message" />

Cela équivaut à :

<input :value="message" @input="message = $event.target.value" />

Voici comment utiliser :value et @input séparément :

<input :value="message" @input="message = $event.target.value" />

La directive v-if restitue conditionnellement les éléments en fonction d'une valeur booléenne. Si la condition est vraie, l'élément sera rendu ; si c’est faux, ce ne sera pas le cas. Par exemple :

<p v-if="isVisible">This is visible!</p>

La directive v-for est utilisée pour parcourir un tableau ou un objet pour restituer des éléments. Chaque élément peut recevoir une clé unique pour de meilleures performances. Par exemple :

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

v-on
La directive v-on est utilisée pour écouter les événements sur les éléments. Vous pouvez utiliser le raccourci @ pour plus de commodité. Par exemple :

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

Ceci peut être raccourci en :

<button @click="handleClick">Click me!</button>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!