Glissant dans et hors de Vue.js

Vue.js a réalisé une croissance phénoménale de l'adoption au cours des dernières années. Elle est passée d’une bibliothèque à source ouverte à peine connue au deuxième framework le plus populaire (derrière seulement React.js).

L’une des principales raisons de sa croissance est que Vue est un progressif . ] framework – il vous permet d’adopter des morceaux à la fois. Vous n'avez pas besoin d'une application complète d'une seule page? Il suffit d'intégrer un composant. Vous ne voulez pas utiliser un système de compilation? Déposez simplement une balise de script et vous êtes opérationnel.

Cette nature progressive a rendu très facile l’adoption de Vue.js au coup par coup, sans avoir à procéder à une grande réécriture de l’architecture. Cependant, on oublie souvent qu’il n’est pas seulement facile d’incorporer Vue.js dans des sites écrits avec d’autres cadres, il est également facile d’incorporer un autre code dans Vue.js . Bien que Vue aime contrôler le DOM, il dispose de nombreuses trappes d'échappement permettant de prendre en charge le code JavaScript non-Vue qui touche également le DOM.

Cet article explore les différents types de code JavaScript tiers que vous pouvez utiliser, quelles situations vous pourriez vouloir utiliser dans un projet Vue, puis couvrez les outils et techniques qui fonctionnent le mieux pour intégrer chaque type dans Vue. Nous terminerons par quelques considérations sur les inconvénients de ces approches et sur ce qu’il faut prendre en compte pour décider de les utiliser.

Cet article suppose une certaine connaissance de Vue.js et des concepts de composants et de directives. Si vous recherchez une introduction à Vue et à ces concepts, vous pouvez consulter l'excellente introduction de Sarah Drasner à la série Vue.js ou le guide officiel Vue Guide .

Types de JavaScript tiers

Il existe trois principaux types de JavaScript tiers que nous allons examiner par ordre de complexité:

1. Bibliothèques de Toucher non-DOM
2. Bibliothèques d'augmentation d'élément
3. Composants et bibliothèques de composants

Bibliothèques non-DOM

La ​​première catégorie de JavaScript tiers est constituée par les bibliothèques fournissant une logique abstraite et n'ayant pas d'accès direct au DOM. Des outils tels que moment.js pour la gestion des dates ou lodash pour l'ajout d'utilitaires de programmation fonctionnels entrent dans cette catégorie.

Ces bibliothèques sont simples à intégrer aux applications Vue, mais peuvent être encapsulées. de deux manières pour un accès particulièrement ergonomique. Celles-ci sont très couramment utilisées pour fournir des fonctionnalités utilitaires, comme dans tout autre type de projet JavaScript.

Bibliothèques d'augmentation d'élément

L'augmentation d'élément est une méthode traditionnelle qui permet d'ajouter un peu de fonctionnalité à un élément. . Les exemples incluent des tâches telles que le chargement paresseux d’images avec Lozad ou l’ajout de masquage d’entrée à l’aide de Vanilla Masker .

Ces bibliothèques ont généralement un impact sur un élément à la fois et s’attendent à une quantité limitée de données. accès au DOM. Ils manipuleront probablement ce seul élément sans ajouter de nouveaux éléments au DOM.

Ces outils ont généralement un objectif précis et sont relativement faciles à remplacer par d'autres solutions. Ils sont souvent entraînés dans un projet Vue pour éviter de réinventer la roue.

Composants et bibliothèques de composants

Il s’agit des grands cadres et outils intensifs tels que Datatables.net ou Fondation ZURB . Ils créent un composant interactif complet, généralement avec plusieurs éléments en interaction.

Ils injectent directement ces éléments dans le DOM ou s'attendent à un niveau de contrôle élevé sur celui-ci. Ils ont souvent été construits avec un autre framework ou ensemble d'outils (ces deux exemples construisent leur code JavaScript par-dessus jQuery).

Ces outils fournissent une fonctionnalité étendue à et il peut être difficile de le remplacer par un autre outil sans modifications importantes. Ainsi, une solution pour les intégrer dans Vue peut être la clé de la migration d'une application volumineuse.

Comment utiliser In Vue

Bibliothèques non-DOM

Intégration d'une bibliothèque ne touchant pas le DOM à une Vue. Le projet js est relativement trivial. Si vous utilisez des modules JavaScript, il suffit de importer ou le module comme vous le feriez dans un autre projet. Par exemple:

 import moment de "moment";

Vue.component ('my-composant', {
  //…
  méthodes: {
    formatWithMoment (heure, formatString) {
      moment de retour (heure) .format (formatString);
    },
});

Si vous utilisez du code JavaScript global, incluez le script de la bibliothèque avant votre projet Vue:

Une autre méthode couramment utilisée pour superposer un peu plus d'intégration consiste à encapsuler votre bibliothèque ou vos fonctions à partir de la bibliothèque à l'aide d'un filtre ou d'une méthode. facilitez l'accès à l'intérieur de vos modèles.

Vue Filters

Vue Les filtres constituent un modèle vous permettant d'appliquer le formatage du texte directement dans un modèle. En prenant un exemple dans la documentation, vous pouvez créer un filtre "majuscule" puis l’appliquer dans votre modèle comme suit:

 {{myString | capitaliser}}

Lors de l'importation de bibliothèques de formatage, vous pouvez les envelopper en tant que filtre pour en faciliter l'utilisation. Par exemple, si nous utilisons moment pour formater toutes ou plusieurs de nos dates en temps relatif, nous pourrions créer un filtre relativeTime .

 const relativeTime = function (valeur) {
  si (! valeur) retourne '';
  moment de retour (valeur) .fromNow ();
}

Nous pouvons ensuite l’ajouter globalement à toutes les instances et tous les composants Vue avec la méthode Vue.filter :

 Vue.filter (’relativeTime ', relativeTime);

Ou ajoutez-le à un composant particulier à l'aide de l'option filtres :

 const myComponent = {
  filtres: {
    `RelativeTime ': relativeTime,
  }
}

Vous pouvez jouer avec cela sur CodePen ici:

Voir le stylo Intégrations Vue: Filtre de valeur relative Moment de Kevin Ball .

Bibliothèques d'augmentation d'élément

Les bibliothèques d'augmentation d'éléments sont légèrement plus complexes à intégrer que les bibliothèques qui ne touchent pas le DOM – si vous ne faites pas attention, Vue et la bibliothèque peuvent se contrecarrer, en se battant pour le contrôle.

Pour éviter cela, vous devez lier la bibliothèque au cycle de vie de Vue pour qu'elle s'exécute une fois que Vue ait terminé de manipuler l'élément DOM et gère correctement les mises à jour initiées par Vue.

Vous pouvez le faire dans un composant, mais comme ces bibliothèques ne touchent généralement qu'un seul élément. Un élément à la fois, une approche plus souple consiste à les envelopper dans une directive personnalisée.

Directives Directives

Les directives Vue sont des modificateurs qui peuvent être utilisés pour ajouter un comportement aux éléments de votre page. Vue est livré avec un certain nombre de directives intégrées avec lesquelles vous êtes probablement déjà à l'aise – des choses comme v-on v-model et v-bind . Il est également possible de créer des directives personnalisées qui ajoutent un comportement quelconque à un élément – exactement ce que nous essayons d’obtenir.

La définition d’une directive personnalisée revient à définir un composant; vous créez un objet avec un ensemble de méthodes correspondant à des crochets de cycle de vie particuliers, puis vous l'ajoutez à Vue globalement en exécutant:

 Vue.directive ('custom-directive', customDirective);

Ou localement dans un composant en l'ajoutant à l'objet de la directive du composant:

 const myComponent = {
  directives: {
    'directive-personnalisée': customDirective,
  }
}

Crochets de directive Vue

Les directives Vue disposent des crochets suivants pour définir le comportement. Bien que vous puissiez toutes les utiliser dans une même directive, il n’est pas rare d’en avoir besoin d’une ou deux. Ils sont tous facultatifs, utilisez donc uniquement ce dont vous avez besoin.

• bind (el, binding, vnode)
  Appelée une seule et unique fois lorsque la directive est liée pour la première fois à un élément. C’est un bon endroit pour un travail d’installation ponctuel, mais soyez prudent, c’est-à-dire que l’élément existe, n’est peut-être pas encore dans le document.
• inséré (el, binding, vnode)
  Appelé lorsque l’élément lié a été inséré dans son noeud parent. Cela ne garantit pas non plus la présence dans le document, mais signifie que si vous devez référencer le parent, vous pouvez.
• update (el, binding, vnode, oldVnode)
  Appelé chaque fois que le VNode du composant contenant est mis à jour. Il n'y a aucune garantie que les autres enfants du composant auront été mis à jour et la valeur de la directive peut avoir changé ou non. (Vous pouvez comparer binding.value à binding.oldValue pour voir et optimiser toutes les mises à jour inutiles.)
• composantUpdated (el, binding, vnode, oldVnode)
  de Similaire to update mais appelé après la mise à jour de tous les enfants du composant conteneur. Si le comportement de votre directive dépend de ses pairs (par exemple, v-else ), vous utiliseriez ce crochet au lieu de update.
• unbind (el, binding, vnode)
  Semblable à . ] bind il est appelé une fois et une fois seulement lorsque la directive est non liée à un élément. C'est un bon emplacement pour tout code de démontage.

Les arguments de ces fonctions sont les suivants:

• et : L'élément auquel la directive est liée;
• contraignant : un objet contenant des informations sur le arguments et valeur de la directive;
• vnode : nœud virtuel de cet élément généré par le compilateur de Vue;
• oldVNode : le nœud virtuel précédent, transmis uniquement à update et composantUpdated .

Vous trouverez plus d'informations à ce sujet dans le Guide Vue des directives douanières .

Emballage de la bibliothèque Lozad dans une directive douanière

Prenons un exemple d'utilisation de ce type d'emballage à l'aide de lozad une bibliothèque à chargement paresseux construite à l'aide de l'API Intersection Observer. L'API permettant d'utiliser lozad est simple: utilisez data-src au lieu de src sur les images, puis passez un sélecteur ou un élément à lozad () et appelez observez sur l'objet renvoyé:

 const el = document.querySelector ('img');
observateur constant = lozad (el);
observateur.observer ();

Nous pouvons le faire simplement à l'intérieur d'une directive utilisant le crochet bind .

 const lozadDirective = {
  bind (el, binding) {
    el.setAttribute ('data-src', binding.value);
    laissez observateur = lozad (el);
    observateur.observer ();
  }
}
Vue.directive ('lozad', lozadDirective)

Ceci mis en place, nous pouvons changer les images en paresseux en passant simplement la source sous forme de chaîne à la directive v-lozad:

Vous pouvez le voir à l'œuvre dans ce CodePen:

Voir le stylo Intégrations de Vue: Directive Lozad Just Bind de Kevin Ball ).

Nous ne sommes pas tout à fait fait cependant! Bien que cela fonctionne pour un chargement initial, que se passe-t-il si la valeur de la source est dynamique et que Vue la change? Cela peut être déclenché dans le stylo en cliquant sur le bouton «Permuter les sources». Si nous implémentons seulement bind, les valeurs de data-src et src ne sont pas modifiées lorsque nous voulons qu'elles le soient!

Pour implémenter cela, nous devons ajouter un . ] mis à jour crochet:

 const lozadDirective = {
  bind (el, binding) {
    el.setAttribute ('data-src', binding.value);
    laissez observateur = lozad (el);
    observateur.observer ();
  },
  update (el, binding) {
    if (binding.oldValue! == binding.value) {
      el.setAttribute ('data-src', binding.value);
      if (el.getAttribute ('chargé de données') === 'true') {
        el.setAttribute ('src', binding.value);
      }
    }
  }
}

Avec cela en place, nous sommes prêts! Notre directive met à jour tout ce que lozad touche chaque fois que Vue est mis à jour. La version finale se trouve dans ce stylo:

Voir le stylo Intégrations Vue: Directive de Lozad avec mises à jour de de Kevin Ball .

Composants et bibliothèques de composants

Le Le code JavaScript tiers le plus complexe à intégrer est celui qui contrôle des régions entières du DOM, des composants complets et des bibliothèques de composants. Ces outils s’attendent à pouvoir créer et détruire des éléments, à les manipuler, et plus encore.

Pour ceux-ci, le meilleur moyen de les insérer dans Vue est de les envelopper dans un composant dédié et d’utiliser de manière intensive les points d’accroché du cycle de vie de Vue. gérer l'initialisation, la transmission des données et le traitement des événements et des rappels.

Notre objectif est d'extraire complètement les détails de la bibliothèque tierce, afin que le reste de notre code Vue puisse interagir avec notre composant d'habillage, comme un Vue natif. Composants

Crochets de cycle de vie de composant

Pour envelopper un composant plus complexe, nous devons nous familiariser avec l'ensemble des crochets de cycle de vie disponibles dans un composant. Ces crochets sont:

• beforeCreate ()
  Appelé avant l'instanciation du composant. Assez rarement utilisé, mais utile si nous intégrons un profilage ou quelque chose de similaire.
• created ()
  Appelé après l’instanciation du composant, mais avant son ajout au DOM. Utile si nous avons une configuration unique ne nécessitant pas le DOM.
• beforeMount ()
  Appelée juste avant que le composant ne soit monté dans le DOM. (Également assez rarement utilisé.)
• mount ()
  Appelé une fois le composant placé dans le DOM. Pour les composants et les bibliothèques de composants qui supposent la présence du DOM, il s'agit de l'un de nos hooks les plus utilisés.
• beforeUpdate ()
  Appelé lorsque Vue est sur le point de mettre à jour le modèle affiché. Assez rarement utilisé, mais encore utile pour l'intégration du profilage.
• updated ()
  Appelé lorsque Vue a terminé de mettre à jour le modèle. Utile pour toute ré-instanciation nécessaire.
• beforeDestroy ()
  Appelé avant que Vue ne détache un composant. Un endroit idéal pour appeler n'importe quelle méthode de destruction ou de désallocation sur notre composant tiers
• détruit ()
  Appelé après que Vue ait détruit un composant.

Emballage d'un composant, d'un crochet à la fois

jetez un coup d'œil à la bibliothèque populaire de jquery-multiselect . Il existe de nombreux composants multiselect fins déjà écrits dans Vue, mais cet exemple nous offre une belle combinaison: assez compliqué pour être intéressant, assez simple pour être facile à comprendre.

Le premier endroit à commencer pour implémenter un wrapper de composant tiers est avec le crochet monté . Etant donné que le composant tiers s'attend probablement à ce que le DOM existe avant de le prendre en charge, vous devez vous connecter pour l'initialiser.

Par exemple, pour commencer à emballer jquery-multiselect, vous pouvez écrire:

 monté() {
  $ (this. $ el) .multiselect ();
}

Vous pouvez voir ce fonctionnement dans ce CodePen:

Cela semble plutôt bon pour commencer. S'il y avait un démontage à faire, nous pourrions également ajouter un crochet beforeDestroy mais cette bibliothèque ne possède aucune méthode de démontage à invoquer.

Traduction des rappels en événements

La prochaine chose que nous souhaitons faire avec cette bibliothèque est d’ajouter la possibilité de notifier notre application Vue lorsque l’utilisateur sélectionne des éléments. La bibliothèque jquery-multiselect le permet via des callbacks appelés aprèsSelect et afterDeselect mais pour que ce soit plus réaliste, nous allons faire en sorte que ces callbacks émettent des événements. Nous pourrions envelopper naïvement ces rappels comme suit:

 monté () {
  $ (this. $ el) .multiSelect ({
     afterSelect: (values) => this. $ emit ('select', valeurs),
     afterDeselect: (values) => this. $ emit ('désélectionner', valeurs)
   });
}

Cependant, si nous insérons un enregistreur dans les écouteurs d’événements, nous verrons que cela ne nous fournit pas une interface très semblable à une vue. Après chaque sélection ou désélection, nous recevons une liste des valeurs qui ont changé, mais pour ressembler davantage à une vue, nous devrions probablement émettre un événement change avec la liste actuelle.

Nous n'avons pas non plus de très vue – comme moyen de définir des valeurs. Au lieu de cette approche naïve, nous devrions alors envisager d’utiliser ces outils pour mettre en œuvre quelque chose comme l’approche du modèle v que Vue fournit pour les éléments sélectionnés natifs .

Implémentation de du modèle v

Pour implémenter v-model sur un composant, vous devez activer deux choses: accepter un prop qui acceptera un tableau et définira les options appropriées comme il convient, puis emit un événement input au changement qui passe le nouveau tableau complet.

Il faut gérer quatre éléments ici: la configuration initiale pour une valeur particulière, propager les modifications apportées au parent et gérer les modifications. valeur en dehors du composant, et enfin gérer toutes les modifications apportées au contenu de l'emplacement (la liste des options).

Approchons-les un à un.

1. Configuration avec un objet de valeur
   Premièrement, nous avons besoin apprendre à notre composant à accepter un prop de valeur, puis lorsque nous instancions le mu Nous allons lui indiquer les valeurs à sélectionner.

    export default {
     accessoires: {
       valeur: Array,
       défaut: [],
     },
     monté() {
       $ (this. $ el) .multiSelect ();
       $ (this. $ el) .multiSelect ('select', this.value);
     },
   }
   

2. Gestion des modifications internes
   Pour gérer les modifications dues à l’interaction de l’utilisateur avec le multisélection, nous pouvons revenir aux rappels que nous avons explorés auparavant – mais «moins naïvement» cette fois. Au lieu de simplement émettre ce qu'ils nous envoient, nous voulons transformer un nouveau tableau qui prend en compte notre valeur initiale et le changement apporté.
   
    

    monté () {
     $ (this. $ el) .multiSelect ({
       afterSelect: (values) => this. $ emit ('input', [...new Set(this.value.concat(values))]),
       afterDeselect: (values) => this. $ emit ('input', this.value.filter (x =>! values.includes (x))),
     });
     $ (this. $ el) .multiSelect ('select', this.value);
   },
   

   Ces fonctions de rappel peuvent sembler un peu denses, alors décomposons-les un peu.

   Le gestionnaire afterSelect concatène la valeur nouvellement sélectionnée avec nos valeurs existantes, mais il suffit ensuite de s'assurer qu'il existe pas de doublons, il le convertit en un ensemble (garantissant l'unicité) puis en une déstructuration pour le ramener à un tableau.

   Le gestionnaire afterDeselect filtre simplement toutes les valeurs désélectionnées dans la liste de valeurs actuelle dans l'ordre. pour émettre une nouvelle liste.

3. Gestion des mises à jour externes en valeur
   La prochaine chose à faire est de mettre à jour les valeurs sélectionnées dans l'interface utilisateur chaque fois que le paramètre de change. Cela implique la traduction d'un changement déclaratif des accessoires en un changement impératif à l'aide des fonctions disponibles sur multiselect. Le moyen le plus simple de procéder consiste à utiliser un observateur sur notre montre valeur :

   :
     // n'utilise pas réellement cette version. Voyez pourquoi ci-dessous
     valeur() {
       $ (this. $ el) .multiselect ('select', this.value);
     }
   }
   

   Cependant, il y a un problème! Parce que déclencher cette sélection aura pour résultat notre gestionnaire onSelect et utilisera donc des valeurs de mise à jour. Si nous faisons cet observateur naïf, nous nous retrouverons dans une boucle infinie./>
   Heureusement pour nous, Vue nous donne la possibilité de voir l’ancienne ainsi que les nouvelles valeurs. Nous pouvons les comparer et ne déclencher la sélection que si la valeur a changé. Les comparaisons de tableaux peuvent s'avérer délicates en JavaScript, mais pour cet exemple, nous tirerons parti du fait que nos tableaux sont simples (sans objets) et utilisent JSON stringify pour effectuer la comparaison. Après avoir pris en compte le fait que nous devons également désélectionner toutes les options qui ont été supprimées, notre observateur final se présente comme suit:

    watch: {
       valeur (newValue, oldValue) {
         if (JSON.stringify (newValue)! == JSON.stringify (oldValue)) {
           $ (this. $ el) .multiSelect ('deselect_all');
           $ (this. $ el) .multiSelect ('select', this.value);
         }
       }
     },
   

4. Gestion des mises à jour externes dans le logement
   Nous avons une dernière chose à gérer: notre multisélection utilise actuellement des éléments optionnels transmis via un logement. Si cet ensemble d’options change, nous devons demander au multiselect de s’actualiser, sinon les nouvelles options ne s’affichent pas. Heureusement, nous avons à la fois une API facile à utiliser dans cette fonction multisélect (mise à jour) et un crochet de Vue évident à accrocher dans). Le traitement de ce dernier cas est aussi simple que:

    updated () {
     $ (this. $ el) .multiSelect (’refresh ');
   },
   

   Vous pouvez voir une version de travail de cette enveloppe de composant dans ce CodePen:

   Voir le stylo Intégrations Vue: Multiselect Wrapper avec v-model de Kevin Ball .

] Inconvénients et autres considérations

Maintenant que nous avons examiné la simplicité d'utilisation du code JavaScript tiers dans Vue, il est utile de discuter des inconvénients de ces approches et du moment approprié pour les utiliser.

Répercussions sur la performance [Enchère19659017] L'un des principaux inconvénients de l'utilisation de JavaScript tiers et non écrit pour Vue dans Vue est la performance, en particulier lors de l'extraction de composants et de bibliothèques de composants ou d'éléments construits à l'aide de structures supplémentaires complètes. L'utilisation de cette approche peut générer beaucoup de code JavaScript supplémentaire qui doit être téléchargé et analysé par le navigateur avant que l'utilisateur ne puisse interagir avec notre application.

Par exemple, en utilisant le composant multisélect, nous avons développé ci-dessus, ce qui ne signifie pas uniquement attirer l'utilisateur. Le code de ce composant, mais tous jQuery aussi. Cela peut doubler la quantité de JavaScript liée à la structure que nos utilisateurs auront à télécharger, rien que pour ce composant! Il serait clairement préférable de rechercher un composant construit nativement avec Vue.js.

De plus, en cas de disparité importante entre les API utilisées par les bibliothèques tierces et l'approche déclarative adoptée par Vue, vous risquez peut-être de mettre en œuvre des modèles qui entraînent beaucoup de temps d'exécution supplémentaire. En utilisant également l'exemple multiselect, nous devions actualiser le composant (ce qui nécessitait d'examiner un tas de DOM) chaque fois qu'un emplacement était modifié, alors qu'un composant natif de Vue pouvait utiliser le DOM virtuel de Vue pour être beaucoup plus efficace dans ses mises à jour. 19659146] Quand utiliser

L'utilisation de bibliothèques tierces peut vous faire gagner beaucoup de temps de développement et signifie souvent que vous êtes en mesure d'utiliser un logiciel bien entretenu et testé, pour lequel vous n'avez pas l'expertise nécessaire. Le principal inconvénient est la performance, en particulier lors de l'intégration d'importants frameworks tels que jQuery.

Pour les bibliothèques qui ne possèdent pas ces dépendances importantes, et en particulier celles qui ne manipulent pas trop le DOM, il n'y a aucune raison de privilégier Vue unique. bibliothèques sur plus génériques. Étant donné que Vue facilite l'utilisation de JavaScript, il est préférable que vous choisissiez le meilleur outil pour votre travail, en fonction de vos besoins en termes de fonctionnalités et de performances, sans vous soucier de ce qui est spécifique à Vue.

Pour des frameworks de composants plus étendus, cliquez ici. Il existe trois cas principaux dans lesquels vous voudriez les attirer.

1. Prototypage
   Dans ce cas, la vitesse d’itération compte beaucoup plus que les performances de l’utilisateur;
2. Migration d'un site existant
   Si vous migrez d'un site existant vers Vue, le fait d'envelopper tout le framework que vous utilisez déjà dans Vue vous donnera une migration en douceur. chemin afin que vous puissiez progressivement extraire l’ancien code pièce par pièce, sans avoir à réécrire en bloc.
3. ** Lorsque la fonctionnalité n’est tout simplement pas encore disponible dans un composant Vue. **
   Si vous avez déjà Vous devez répondre à une exigence spécifique et stimulante, pour laquelle une bibliothèque tierce existe, mais il n'y a pas de composant spécifique à Vue, envisagez bien d'encapsuler la bibliothèque existante.

Lorsqu'il y a de grandes disparités entre les API utilisé par des bibliothèques tierces et par l’approche déclarative adoptée par Vue, il est possible que vous mettiez en œuvre des modèles entraînant beaucoup de temps d’exécution supplémentaire.

Exemples à l'état sauvage

Les deux premiers modèles sont utilisés dans l'ensemble de l'écosystème de code source ouvert. Vous pouvez donc explorer un certain nombre d'exemples différents. Comme emballer tout un composant complexe ou une bibliothèque de composants a tendance à être plus une solution palliative / de migration, je n'ai pas trouvé autant d'exemples de cela dans la nature, mais il y en a plusieurs, et j'ai utilisé cette approche pour clients occasionnellement selon les besoins. Voici un exemple rapide de chacun d'entre eux:

1. Vue-moment enveloppe la bibliothèque moment.js et crée un ensemble de filtres Vue pratiques;
2. Awesome-mask enveloppe la bibliothèque vanilla-masker. et crée une directive pour les entrées masquées;
3. Vue2-foundation termine la bibliothèque de composants de la fondation ZURB à l'intérieur des composants Vue.

Conclusion

La popularité de Vue.js ne montre aucun signe de ralentissement vers le bas, avec un montant énorme de crédit étant dû à l'approche progressive du cadre. En permettant l'adoption incrémentale, le caractère progressif de Vue signifie que les utilisateurs peuvent commencer à l'utiliser ici et là, un à un, sans avoir à procéder à des réécritures massives.

Comme nous l'avons vu ici, ce caractère progressif s'étend à l'autre. direction aussi. Tout comme vous pouvez incorporer Vue petit à petit dans une autre application, vous pouvez intégrer d’autres bibliothèques à l’intérieur de Vue.

Vous avez besoin d’une fonctionnalité qui n’a pas encore été portée sur un composant Vue? Enlevez-le, terminez-le, et vous êtes prêt à partir.

Pour en savoir plus sur SmashingMag:

(rb, ra, il)