Quelles sont les fonctions personnalisées de vue ?

Vue, en tant que l'un des frameworks front-end les plus populaires à l'heure actuelle, possède une multitude de fonctions et d'instructions personnalisées. Parmi elles, les fonctions personnalisées constituent une partie très importante de Vue. Les fonctions personnalisées permettent aux développeurs d'utiliser leurs propres fonctions JavaScript dans les applications Vue pour gérer les événements, les propriétés calculées, les filtres, etc.

Dans cet article, nous présenterons quelques fonctions personnalisées de Vue et explorerons leur application dans les applications Vue. Ces fonctions personnalisées incluent :

1. Directive personnalisée

La directive personnalisée est l'une des fonctions personnalisées les plus élémentaires de Vue. Ils peuvent être utilisés pour ajouter un comportement aux éléments DOM. Les directives personnalisées sont un moyen de manipuler directement les éléments DOM et peuvent être référencées dans le modèle d'un composant. Par exemple, lorsque l'utilisateur saisit des données, vous pouvez utiliser une directive personnalisée pour limiter cette saisie aux seuls nombres :

Vue.directive('numeric', {
bind: function (el, contraignant, vnode) {

el.addEventListener('input', function () {
  var s = el.value;
  if (s.length === 0 || isNaN(s)) {
    el.value = '';
    return;
  }
  s = parseFloat(s);
  el.value = isNaN(s) ? '' : s.toString();
});

}
});

2. Composant personnalisé

Le composant personnalisé est une fonction personnalisée très courante dans Vue. Grâce à des composants personnalisés, les développeurs peuvent encapsuler certaines fonctions courantes pour une utilisation facile à plusieurs endroits. Le composant personnalisé de Vue est un fichier .vue contenant des collections de modèles, de scripts et de styles. Par exemple, le composant suivant est un compteur avec un bouton qui incrémente la valeur du compteur à chaque clic :

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<style scoped>
button {
  background-color: blue;
  color: white;
}
</style>

3. Filtres personnalisés

Les filtres personnalisés de Vue sont utilisés pour modifier les fonctions de formatage et de style du texte, et ils peuvent être utilisés. pour la sortie de texte à partir de n’importe quelle application. Par exemple, un filtre de formatage de date peut être implémenté comme ceci :

Vue.filter('formatDate', function (value) {
var date = new Date(value);

var year = date.getFullYear();
var mois = date.getMonth() + 1;
var jour = date.getDate();

if (mois < 10) {

month = '0' + month;

}
if (jour < 10) {

day = '0' + day;

}

année de retour + '-' + mois + '-' + jour ;
});

4. Mixins personnalisés

Les mixins Vue (mélange) sont un moyen d'encapsuler du code logique qui peut être partagé entre plusieurs composants technologiques. Ces codes logiques peuvent être des blocs de code communs dans des composants tels que des fonctions et des données de cycle de vie. Par exemple, le code suivant montre un objet mixin qui ajoute un événement global au composant :

var globalMixin = {
Mounted() {

window.addEventListener('scroll', this.handleScroll)

},
destroy() {

window.removeEventListener('scroll', this.handleScroll)

},
méthodes : {

handleScroll() {
  console.log('scrolling')
}

}
};

Vue.mixin(globalMixin);

À travers les exemples ci-dessus, vous pouvez voir que les fonctions personnalisées de Vue sont très riches et diverses, et qu'elles peuvent résoudre divers besoins que nous rencontrons dans nos applications. Les développeurs peuvent utiliser de manière flexible les fonctions personnalisées fournies par Vue en fonction de besoins spécifiques pour rendre les applications plus évolutives et plus maintenables.

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!