Les modificateurs de directives utilisent le point (.) comme suffixe pour spécifier des opérations de traitement encapsulées, simplifiant ainsi le code.

1. Modificateurs de touches : @keyup.enter pour écouter la pression de la touche Entrée.
2. Modificateurs de v-model : v-model.trim pour supprimer les espaces en début et fin, v-model.number pour convertir la saisie en nombre.
3. Modificateurs d'événements : .stop pour arrêter la propagation de l'événement, .prevent pour empêcher le comportement par défaut.

Améliorations de v-bind pour le style

Vue étend la syntaxe de v-bind pour offrir un contrôle accru sur les classes CSS et les styles en ligne, facilitant ainsi la manipullation du style.

Gestion des classes

Syntaxe : :class="objet ou tableau"

Écriture avec objet : utile pour basculer entre des classes, comme illustré ci-dessous :

<div class="conteneur" :class="{active:true,inactive:false}"></div>

Écriture avec tableau : idéale pour ajouter ou supprimer plusieurs classes simultanément.

Exemple pratique : Navigation par onglets avec mise en surbrillance

Styles CSS de base :

.barre-nav {
  display: flex;
  flex-direction: row;
}
.onglet {
  width: 150px;
  height: 50px;
  margin-left: 10px;
  background-color: white;
  text-align: center;
  line-height: 50px;
  list-style: none;
  font-size: 20px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.onglet-actif {
  color: white;
  background-color: red;
}
hr {
  color: red;
}

Partie HTML :

<div id="app">
  <ul class="barre-nav">
    <li @click="selectionOnglet=index" v-for="(element,index) in elements" :key="element.id" :class="{onglet-actif: selectionOnglet===index}" class="onglet">{{element.libelle}}</li>
  </ul>
</div>
<hr>

Partie JavaScript :

const appli = new Vue({
  el: '#app',
  data: {
    selectionOnglet: 0,
    elements: [
      {id:1, libelle:'Ventes flash'},
      {id:2, libelle:'Offres du jour'},
      {id:3, libelle:'Flash catégories'}
    ]
  }
})

Effet : L'onglet sélectionné affiche un style de subrrillance distinctif.

Contrôle des styles en ligne

Syntaxe : :style="objet de style"

<div class="conteneur" :style="{proprieteCSS1:valeur, proprieteCSS2:valeur}"></div>

Application de v-model aux éléments de formulaire

Les éléments de formulaire courants peuvent être liés via v-model pour une récupération ou définition rapide des valeurs. Vue adapte automatiquement la méthode de mise à jour selon le type de contrôle. Pour certains contrôles, il est nécessaire de lier une valeur dans l'objet data pour gérer l'état de sélection.

Propriétés calculées

Concept : Des propriétés dérivées basées sur les données existantes. Elles se recalculent automatiquement lorsque les données dont elles dépendent changent.

Syntaxe :

1. Déclarées dans l'option computed, chaque propriété calculée est définie par une fonction.
2. Utilisation similaire aux propriétés standard : {{nomProprieteCalculee}}

Différence avec les méthodes :

• computed : encapsule une logique de traitement pour produire un résultat.
• methods : fournit des fonctions pour la logique métier, appelées via this.nomMethode().

Caractéristique de mise en cache : Les résultats sont mis en cache pour optimiser les performances, recalculés uniquement lorsque les dépendances évoluent.

Syntaxe complète pour une propriété calculée :

computed: {
  proprieteCalculee: {
    get() {
      // logique de calcul
      return resultat
    },
    set(nouvelleValeur) {
      // logique de modification
    }
  }
}

Observateurs (watch)

Fonction : Surveiller les modifications de données pour déclencher une logique métier ou des opérations asynchrones.

Syntaxe simplifiée : pour les types de données primitifs, surveillance directe.

data: {
  terme: 'pomme',
  objet: {
    terme: 'pomme'
  }
},
watch: {
  nomPropriete(nouvelleVal, ancienneVal) {
    // logique métier ou asynchrone
  },
  'objet.propriete'(nouvelleVal, ancienneVal) {
    // logique métier ou asynchrone
  }
}

Syntaxe complète avec options additionnelles :

1. deep:true pour une surveillance récursive des types complexes.
2. immediate:true pour exécuter immédiatement la méthode handler lors de l'initialisation.

data: {
  objet: {
    terme: 'pomme',
    langue: 'italien'
  }
},
watch: {
  nomPropriete: {
    deep: true,
    handler(nouvelleValeur) {
      console.log(nouvelleValeur)
    }
  }
}