Tout ce que vous devez savoir sur les filtres dans Vue

Dans cet article, nous allons passer en revue tout ce que vous devez savoir sur les filtres Vue.js, de la façon de les utiliser dans votre application Vue.js à la façon de créer vos propres filtres.

Des filtres? Vous aimez les filtres Instagram? ✌?? Euh… ?NON! Désolé.

? Les filtres sont en fait une fonctionnalité fournie par Vue.js qui vous permet d'appliquer une mise en forme de texte commune à vos données. Les filtres ne modifient PAS les données elles-mêmes, mais modifient plutôt la sortie vers le navigateur en renvoyant une version filtrée de ces données.

Je parie que cela dit de cette façon vous vous dites: «D'accord, merci FYI! »Mais pour avoir une idée de leur utilité, permettez-moi de vous dire ce que j'aime le plus pour les utiliser: le formatage des prix, la capitalisation des données provenant d'une API ou même en spécifiant un repli commun pour une variable donnée. La liste s'allonge encore et encore car ils peuvent être utilisés de multiples façons.

Je parie que j'ai attiré votre attention maintenant! 1965

Nous allons parcourir tout ce que vous devez savoir sur les filtres Vue.js, de la façon de les utiliser dans votre application Vue.js à la création de vos propres filtres. [Excitantn'est-cepas?

Comment utiliser les filtres dans une application Vue.js

??Il fut un temps où les filtres étaient une fonction intégrée dans Vue.js. Bien que les filtres intégrés soient utiles, ils manquaient de flexibilité. Notre seigneur et sauveur, Evan You, a donc décidé de les supprimer de Vue 2.0. ☝? Alors méfiez-vous, mes chers amis, des anciens tutoriels!

Maintenant, voici comment utiliser les filtres: soit dans les interpolations de moustache Hé {{username | capitaliser}} OU dans une expression de liaison en V (remarquez le tuyau dans les deux).

 < h1 >  {{article.title | majuscule}}  </  h1 > 


 < title-component   : title  =  " article.title | majuscule "   /> 
 

Vous pouvez définir un filtre comme global (disponible dans tous les composants) ou local (uniquement dans le composant dans lequel il est défini). Voici comment définir un filtre local :

 export    par défaut    {
  filtres :    {
    capitaliser :    fonction  ( valeur )    {
       si    (!  valeur )    {[19659032] retour    "" ; 
      } 
      value  =  value .  toString  () ; 
       return  value .  charAt  ([[19659043] 0 ) .  toUpperCase  ()    +  valeur .  tranche  ( 1  1  ) ; 
    } 
  } 
} ; 

⚠️ Un filtre local portant le même nom qu'un filtre global sera toujours amorcé.

Comment écrire vos propres filtres globaux

Faire votre propre filtre est assez facile si vous comprenez ce que nous avons vu jusqu'à présent. Mais nous allons parcourir les étapes ensemble afin que vous puissiez avoir une idée claire de la façon de le faire.

Parce que la création d'un filtre local est assez simple, nous créons d'abord un filtre global pour Vue.js puis pour Nuxt .js. Ce filtre formatera un texte d'aperçu d'article de deux manières: mettez d'abord la première lettre en majuscule, puis tronquez le texte.

Mettons-nous au travail! 1965

Définition d'un filtre global dans Vue.js

Créez un fichier séparé dans lequel vous stockez vos filtres. Pour les petits projets, je les stockais généralement dans un dossier nommé helpers .

 import  Vue  de    "vue" ; 

Vue .  filtre  ( "capitaliser"    fonction  ( valeur )    {
   si    si    (!  valeur )    {
     return    "" ; 
  } 
  value  =  value .  toString  () ; 
   return  value .  charAt  ([[19659043] 0 ) .  toUpperCase  ()    +  valeur .  tranche  ( 1  1  ) ; 
} ) ; 

Vue .  filtre  ( "cutText"    fonction  ( valeur  longueur  suffixe )    {
   si    ( valeur .  longueur >  longueur )    {
     retour  valeur .  sous-chaîne  ( 0  longueur )    +  suffixe ; 
  }    else    {
     return  value ; 
  } 
} ) ; 

Ensuite, importez simplement ce fichier dans votre point d'entrée Vue (généralement: main.js ).

 import    "@ / helpers / filters" ; 

Rappel: Il s'agit d'un filtre global. Ainsi, il sera défini dans chacun de vos composants si vous ne le remplacez pas par un filtre local du même nom.

Définition d'un filtre global dans Nuxt.js

Pour Nuxt, ce n'est pas si différent . Nous utilisons un plugin pour les stocker.

 import  Vue  de    "vue" ; 

Vue .  filtre  ( "capitaliser"    fonction  ( valeur )    {
   si    si    (!  valeur )    {
     return    "" ; 
  } 
  value  =  value .  toString  () ; 
   return  value .  charAt  ([[19659043] 0 ) .  toUpperCase  ()    +  valeur .  tranche  ( 1  1  ) ; 
} ) ; 

Vue .  filtre  ( "cutText"    fonction  ( valeur  longueur  suffixe )    {
   si    ( valeur .  longueur >  longueur )    {
     retour  valeur .  sous-chaîne  ( 0  longueur )    +  suffixe ; 
  }    else    {
     return  value ; 
  } 
} ) ; 

Et nous l'importons dans notre nuxt.config.js fichier.

 module .  exportations  =    {
  plugins :    [ { src :    "@ / plugins / filters.js"   } ] 
} ; ; ; ; 19659211] Présentation de l'option de filtre soigné numéro un: ?  Chaînage  
 Mais que dois-je faire si je veux utiliser deux filtres (soyons fous: ou plus) au lieu d'un seul filtre? Citron peasy facile presser mes amis: Vous les enchaînez, ⛓ simplement en répétant la syntaxe de la pipe comme ceci:  hey {{username | repli | capitaliser}}! 

 ⚠️ Gardez à l'esprit que l'ordre dans lequel vos filtres sont utilisés est important. Dans l'exemple ci-dessus, nous allons d'abord récupérer le nom d'utilisateur, puis nous appliquons le filtre  fallback  (qui remplace le mot username par un mot de secours comme «there» si nous ne pouvons pas récupérer un nom d'utilisateur à partir de l'API) . Ensuite, ET SEULEMENT ALORS, le filtre  capitaliser  sera appliqué. 

 Présentation de l'option de filtre soigné numéro deux: ?  Arguments  
 ? FYI: parce que les filtres sont simplement des fonctions JavaScript, vous pouvez pousser vos filtres un peu plus loin et y ajouter un ou plusieurs arguments. 
 Dans l'exemple ci-dessus, nous avons  article.preview  comme premier argument du filtre tronqué (la valeur  ). Ensuite,  200  est ici pour définir la longueur   comme deuxième argument du filtre, et ainsi de suite avec  "..."  utilisé comme troisième argument comme  suffixe . 
   < modèle > 
 < h2 >  {{article.title}}  </  h2 > 
 < p >  {{article.preview | capitaliser | tronquer (200, '...')}}  </  p > 
 </  modèle > 
 
   < script > 
 exportation   défaut   {
   données  ()   {
     retour   {
article :   {
title :   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
aperçu :   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat vivamus à augue eget arcu dictum. Nibh ipsum conséquat nisl vel pretium lectus quam id. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Scelerisque in dictum non consectetur. Asseyez-vous amet consectetur adipiscing elit ut aliquam purus sit amet. Viverra justo nec ultrices dui sapien. Feugiat in ante metus dictum à. In massa tempor nec feugiat nisl pretium fusce id. Maecenas accumsan lacus vel facilisis volutpat est velit. Facilisis magna etiam tempor orci eu lobortis. Asseyez-vous amet consectetur adipiscing elit duis. Vel risus commodo viverra maecenas accumsan. Id neque aliquam vestibulum morbi blandit. »
	  } 
    } 
  } 
} 
 < /  script > 
 Comme nous l'avons mentionné, Vue.js n'a plus de filtres intégrés et vous ne voulez peut-être pas passer par les tracas de la création de vos propres filtres. La communauté Vue.js vous couvre comme d'habitude! ?
  Aleksandr Statciuk  a créé  ce package INCROYABLE  qui nous offre 12 des filtres les plus couramment utilisés.
 ? Vous pouvez trouver des filtres encore plus utiles créés par la communauté  ici dans le référentiel GitHub awesome-vue (dans la section sur les filtres) .
 My homeboy  Rachid Laasri  ( curieux?  ?  c'est  ] Rabat  ) partage avec nous 11 autres filtres Super Duper Vue.js dans  son ​​article  que vous pouvez utiliser dans votre projet.
 Un autre filtre que j'utilise assez souvent est  vue-moment . Il vous permettra de formater votre chaîne avec moment.js en un clin d'œil!
 Un autre que j'aime:  vue-numeral-filter . Il vous permettra de formater vos nombres avec numeral.js.
 Comment accéder à des filtres globaux dans votre composant JavaScript?
 Parfois, vous devez gérer une logique complexe et vous pouvez utiliser des propriétés calculées. Vous pouvez toujours utiliser un filtre à l'intérieur. C'est un peu bavard, mais tous vos filtres seront disponibles dans l'objet  this. $ Options.filters .
 export    default    {
  calculé :    {
     formatage  ()    {
       laissez  résultat  =    "bonjour" ; 
       if    ( this .  user )    {
        résultat  + =    this .  user .  name ; 
      }    else    {
        result  + =    this .  generateARandomName  () ; 
      } 
       return    this .  $ options .  filtres .  capitaliser  ( résultat ) ; 
    } 
  } 
} ; ; ; ] 19659130]  Et Voilà!  ? 
 Une dernière pensée… 
 ??‍?Comme  Sarah Drasner  l'a souligné dans  son ​​article les filtres sont pas la solution parfaite pour résoudre tous les problèmes. Tout d'abord, ils doivent réexécuter chaque mise à jour. Comme elle l'a dit, si vous avez quelque chose comme une entrée qui se met à jour à chaque fois que vous tapez, ce ne sera pas performant. Une propriété calculée sera mieux adaptée car elle mettra en cache les résultats en fonction de leurs dépendances et ne sera réévaluée que lorsque ces dépendances changeront. 
 Si vous avez des questions, n'hésitez pas à me contacter dans les commentaires ci-dessous ou à contacter à moi sur Twitter  @RifkiNada . ?