Deslizándose dentro y fuera de Vue.js

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Accesibilidad para diseñadores, con Stéphanie Walter

  • Índice
    1. Tipos de JavaScript de terceros
      1. Bibliotecas no DOM
      2. Bibliotecas de aumento de elementos
      3. Componentes y bibliotecas de componentes
    2. Cómo utilizar en Vue
      1. Bibliotecas no DOM
      2. Bibliotecas de aumento de elementos
      3. Componentes y bibliotecas de componentes
    3. Inconvenientes y otras consideraciones
      1. Implicaciones de rendimiento
      2. Cuándo usar
      3. Ejemplos en la naturaleza
    4. Conclusión
      1. Lecturas adicionales sobre SmashingMag:

    Una de las ventajas clave de Vue.js es que funciona muy bien con otros códigos: es fácil de incrustar progresivamente en otras aplicaciones, pero también es fácil resumir código que no es de Vue en Vue. Este artículo explora esta segunda ventaja, cubriendo tres tipos distintos de JavaScript de terceros y formas de integrar cada uno de ellos en Vue.

     

    Vue.js ha logrado un crecimiento de adopción fenomenal en los últimos años. Ha pasado de ser una biblioteca de código abierto apenas conocida al segundo marco de interfaz de usuario más popular (solo detrás de React.js).

    Una de las principales razones de su crecimiento es que Vue es un marco progresivo : le permite adoptar partes a la vez. ¿No necesita una aplicación completa de una sola página? Simplemente incruste un componente. ¿No quieres utilizar un sistema de compilación? Simplemente introduzca una etiqueta de secuencia de comandos y estará listo y funcionando.

     

    Esta naturaleza progresiva ha hecho que sea muy fácil comenzar a adoptar Vue.js poco a poco, sin tener que hacer una gran reescritura de la arquitectura. Sin embargo, una cosa que a menudo se pasa por alto es que no sólo es fácil incrustar Vue.js en sitios escritos con otros marcos, sino que también es fácil incrustar otro código dentro de Vue.js. Si bien a Vue le gusta controlar el DOM, tiene muchas trampillas de escape disponibles para permitir JavaScript que no sea de Vue y que también toque el DOM.

    Este artículo explorará los diferentes tipos de JavaScript de terceros que quizás quieras usar, en qué situaciones podrías querer usarlos dentro de un proyecto de Vue y luego cubrirá las herramientas y técnicas que funcionan mejor para incrustar cada tipo dentro de Vue. Cerraremos con algunas consideraciones sobre los inconvenientes de estos enfoques y qué considerar al decidir si usarlos.

    Este artículo supone cierta familiaridad con Vue.js y los conceptos de componentes y directivas. Si está buscando una introducción a Vue y estos conceptos, puede consultar la excelente introducción de Sarah Drasner a la serie Vue.js o la Guía oficial de Vue .

    Tipos de JavaScript de terceros

    Hay tres tipos principales de JavaScript de terceros que veremos en orden de complejidad:

    1. Bibliotecas táctiles no DOM
    2. Bibliotecas de aumento de elementos
    3. Componentes y bibliotecas de componentes

    Bibliotecas no DOM

    La primera categoría de JavaScript de terceros son las bibliotecas que proporcionan lógica en abstracto y no tienen acceso directo al DOM. Herramientas como moment.js para manejar fechas o lodash para agregar utilidades de programación funcionales entran en esta categoría.

    Estas bibliotecas son fáciles de integrar en aplicaciones Vue, pero se pueden agrupar de varias maneras para un acceso particularmente ergonómico. Se utilizan muy comúnmente para proporcionar funcionalidad de utilidad, igual que lo harían en cualquier otro tipo de proyecto de JavaScript.

    Bibliotecas de aumento de elementos

    El aumento de elementos es una forma tradicional de agregar solo un poco de funcionalidad a un elemento. Los ejemplos incluyen tareas como cargar imágenes de forma diferida con lozad o agregar enmascaramiento de entrada usando Vanilla Masker .

    Estas bibliotecas normalmente afectan a un solo elemento a la vez y esperan una cantidad limitada de acceso al DOM. Probablemente manipularán ese único elemento, pero no agregarán nuevos elementos al DOM.

    Por lo general, estas herramientas tienen un alcance específico y son relativamente sencillas de intercambiar con otras soluciones. A menudo se verán arrastrados a un proyecto de Vue para evitar reinventar la rueda.

     

    Componentes y bibliotecas de componentes

    Estos son los marcos y herramientas grandes e intensivos como Datatables.net o ZURB Foundation . Crean un componente interactivo completo, normalmente con múltiples elementos interactivos.

    O están inyectando directamente estos elementos en el DOM o esperan un alto nivel de control sobre el DOM. A menudo se crearon con otro marco o conjunto de herramientas (ambos ejemplos construyen su JavaScript sobre jQuery).

    Estas herramientas brindan una amplia funcionalidad y puede resultar difícil reemplazarlas con una herramienta diferente sin modificaciones importantes, por lo que una solución para integrarlas en Vue puede ser clave para migrar una aplicación grande.

    Cómo utilizar en Vue

    Bibliotecas no DOM

    Integrar una biblioteca que no toca el DOM en un proyecto Vue.js es relativamente trivial. Si está utilizando módulos de JavaScript, simplemente importo requireel módulo como lo haría en otro proyecto. Por ejemplo:

    import moment from 'moment';Vue.component('my-component', { //… methods: { formatWithMoment(time, formatString) { return moment(time).format(formatString); },});

    Si usa JavaScript global, incluya el script de la biblioteca antes de su proyecto Vue:

    script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"/scriptscript src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"/scriptscript src="/project.js"/script

    Una forma común adicional de agregar un poco más de integración es resumir su biblioteca o funciones de la biblioteca usando un filtro o método para facilitar el acceso desde dentro de sus plantillas.

    Filtros de vista

    Los filtros Vue son un patrón que le permite aplicar formato de texto directamente en línea en una plantilla. Tomando un ejemplo de la documentación, puede crear un filtro de 'mayúsculas' y luego aplicarlo en su plantilla de la siguiente manera:

    {{myString | capitalize}}

    Al importar bibliotecas relacionadas con el formato, es posible que desee incluirlas como un filtro para facilitar su uso. Por ejemplo, si utilizamos momentpara formatear todas o muchas de nuestras fechas en tiempo relativo, podríamos crear un relativeTimefiltro.

    const relativeTime = function(value) { if (!value) return ''; return moment(value).fromNow();}

    Luego podemos agregarlo globalmente a todas las instancias y componentes de Vue con el Vue.filtermétodo:

    Vue.filter(’relativeTime', relativeTime);

    O agréguelo a un componente en particular usando la filtersopción:

    const myComponent = { filters: { ’relativeTime': relativeTime, } }

    Puedes jugar con esto en CodePen aquí:

    Vea las integraciones de Pen Vue: Filtro de valor relativo de momento de Kevin Ball .

    Bibliotecas de aumento de elementos

    Las bibliotecas de aumento de elementos son un poco más complejas de integrar que las bibliotecas que no tocan el DOM; si no tienes cuidado, Vue y la biblioteca pueden terminar con propósitos opuestos, luchando entre sí por el control.

    Para evitar esto, debe conectar la biblioteca al ciclo de vida de Vue, de modo que se ejecute después de que Vue haya terminado de manipular el elemento DOM y maneje adecuadamente las actualizaciones que Vue inicia.

     

    Esto se podría hacer en un componente, pero dado que estas bibliotecas normalmente tocan solo un elemento a la vez, un enfoque más flexible es envolverlas en una directiva personalizada.

    Directivas Vue

    Las directivas de Vue son modificadores que se pueden usar para agregar comportamiento a los elementos de su página. Vue viene con una serie de directivas integradas con las que probablemente ya se sienta cómodo, como v-on, v-modely v-bind. También es posible crear directivas personalizadas que agreguen cualquier tipo de comportamiento a un elemento, exactamente lo que estamos tratando de lograr.

    Definir una directiva personalizada es muy parecido a definir un componente; creas un objeto con un conjunto de métodos correspondientes a ganchos de ciclo de vida particulares y luego lo agregas a Vue globalmente ejecutando:

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

    O localmente en un componente agregándolo al directivesobjeto en el componente:

    const myComponent = { directives: { 'custom-directive': customDirective, } }

    Ganchos de directiva Vue

    Las directivas de Vue tienen los siguientes enlaces disponibles para definir el comportamiento. Si bien puedes usarlos todos en una sola directiva, tampoco es raro que solo necesites uno o dos. Todos son opcionales, así que usa sólo lo que necesites.

    • bind(el, binding, vnode)
      Se llama una vez y sólo una vez, cuando la directiva se vincula por primera vez a un elemento. Este es un buen lugar para un trabajo de configuración único, pero tenga cuidado, es decir, el elemento existe, es posible que aún no esté en el documento.
    • inserted(el, binding, vnode)
      Se llama cuando el elemento vinculado se ha insertado en su nodo principal. Esto tampoco garantiza la presencia en el documento, pero sí significa que si necesita hacer referencia al padre, puede hacerlo.
    • update(el, binding, vnode, oldVnode)
      Se llama cada vez que se actualiza el VNode del componente que lo contiene. No hay garantías de que otros elementos secundarios del componente se hayan actualizado y el valor de la directiva puede haber cambiado o no. (Puede comparar binding.valuepara binding.oldValuever y optimizar cualquier actualización innecesaria).
    • componentUpdated(el, binding, vnode, oldVnode)
      Similar a update, pero se llama después de que todos los elementos secundarios del componente que lo contiene se hayan actualizado. Si el comportamiento de su directiva depende de sus pares (por ejemplo v-else), usaría este gancho en lugar de actualizar.
    • unbind(el, binding, vnode)
      De manera similar a bind, esto se llama una vez y solo una vez, cuando la directiva no está vinculada a un elemento. Esta es una buena ubicación para cualquier código de desmontaje.

    Los argumentos de estas funciones son:

    • el: El elemento al que está vinculada la directiva;
    • binding: objeto que contiene información sobre los argumentos y el valor de la directiva;
    • vnode: El nodo virtual para este elemento producido por el compilador de Vue;
    • oldVNode: El nodo virtual anterior, solo pasado a updatey componentUpdated.

    Puede encontrar más información sobre estos en la Guía Vue sobre directivas personalizadas .

     

    Envolviendo la biblioteca Lozad en una directiva personalizada

    Veamos un ejemplo de cómo realizar este tipo de ajuste usando lozad , una biblioteca de carga diferida creada con la API de Intersection Observer. La API para usar lozad es simple: use data-srcen lugar de srcen imágenes y luego pase un selector o un elemento lozad()y llame observeal objeto que se devuelve:

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

    Podemos hacer esto simplemente dentro de una directiva usando el bindgancho.

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

    Con esto implementado, podemos cambiar las imágenes a carga diferida simplemente pasando la fuente como una cadena a la directiva v-lozad:

    img v-lozad="'https://placekitten.com/100/100'" /

    Puedes observar esto en funcionamiento en este CodePen:

    Vea las integraciones de Pen Vue: Directiva Lozad Just Bind de Kevin Ball ).

    ¡Aunque aún no hemos terminado! Si bien esto funciona para una carga inicial, ¿qué sucede si el valor de la fuente es dinámico y Vue lo cambia? Esto se puede activar en el lápiz haciendo clic en el botón "Cambiar fuentes". Si solo implementamos bind, los valores de data-srcy srcno se cambian cuando queremos que lo hagan.

    Para implementar esto, necesitamos agregar un updatedgancho:

    const lozadDirective = { bind(el, binding) { el.setAttribute('data-src', binding.value) ; let observer = lozad(el); observer.observe(); }, update(el, binding) { if (binding.oldValue !== binding.value) { el.setAttribute('data-src', binding.value); if (el.getAttribute('data-loaded') === 'true') { el.setAttribute('src', binding.value); } } }}

    Con esto en su lugar, ¡estamos listos! Nuestra directiva ahora actualiza todo lo que toca lozad cada vez que se actualiza Vue. La versión final se puede encontrar en este bolígrafo:

    Consulte las integraciones de Pen Vue: Directiva Lozad con actualizaciones de Kevin Ball .

    Componentes y bibliotecas de componentes

    El JavaScript de terceros más complejo de integrar es el que controla regiones enteras del DOM, componentes completos y bibliotecas de componentes. Se espera que estas herramientas puedan crear y destruir elementos, manipularlos y más. Trucos y guías de videojuegos

    Para estos, la mejor manera de incorporarlos a Vue es envolverlos en un componente dedicado y hacer un uso extensivo de los enlaces del ciclo de vida de Vue para administrar la inicialización, pasar datos y manejar eventos y devoluciones de llamadas.

    Nuestro objetivo es abstraer completamente los detalles de la biblioteca de terceros, para que el resto de nuestro código Vue pueda interactuar con nuestro componente envolvente como un componente nativo de Vue.

     

    Ganchos del ciclo de vida de los componentes

    Para comprender un componente más complejo, necesitaremos estar familiarizados con el complemento completo de enlaces de ciclo de vida disponibles en un componente. Esos ganchos son:

    • beforeCreate()
      Se llama antes de que se cree una instancia del componente. Rara vez se usa, pero es útil si integramos perfiles o algo similar.
    • created()
      Se llama después de crear una instancia del componente, pero antes de agregarlo al DOM. Útil si tenemos una configuración única que no requiere el DOM.
    • beforeMount()
      Se llama justo antes de que el componente se monte en el DOM. (También se usa muy raramente).
    • mounted()
      Se llama una vez que el componente se coloca en el DOM. Para componentes y bibliotecas de componentes que asumen la presencia de DOM, este es uno de nuestros enlaces más utilizados.
    • beforeUpdate()
      Se llama cuando Vue está a punto de actualizar la plantilla renderizada. Rara vez se usa, pero nuevamente es útil si se integra la creación de perfiles.
    • updated()
      Se llama cuando Vue ha terminado de actualizar la plantilla. Útil para cualquier creación de instancias que sea necesaria.
    • beforeDestroy()
      Se llama antes de que Vue destruya un componente. Una ubicación perfecta para invocar cualquier método de destrucción o desasignación en nuestro componente de terceros.
    • destroyed()
      Se llama después de que Vue haya derribado un componente.

    Envolver un componente, un gancho a la vez

    Echemos un vistazo a la popular biblioteca jquery-multiselect . Existen muchos componentes de selección múltiple excelentes ya escritos en Vue, pero este ejemplo nos brinda una buena combinación: lo suficientemente complicado como para ser interesante, lo suficientemente simple como para ser fácil de entender.

    El primer lugar para comenzar al implementar un contenedor de componentes de terceros es con el mountedgancho. Dado que el componente de terceros probablemente espera que el DOM exista antes de hacerse cargo de él, aquí es donde se conectará para inicializarlo.

    Por ejemplo, para comenzar a empaquetar jquery-multiselect, podríamos escribir:

    mounted() { $(this.$el).multiselect();}

    Puedes ver esto funcionando en este CodePen:

    Vea las integraciones de Pen ue: Simple Multiselect Wrapper de Kevin Ball .

    Esto pinta bastante bien para empezar. Si tuviéramos que realizar algún desmontaje, también podríamos agregar un beforeDestroyenlace, pero esta biblioteca no tiene ningún método de desmontaje que debamos invocar.

    Traducir devoluciones de llamada a eventos

    Lo siguiente que queremos hacer con esta biblioteca es agregar la capacidad de notificar a nuestra aplicación Vue cuando el usuario selecciona elementos. La biblioteca jquery-multiselect permite esto a través de devoluciones de llamada llamadas afterSelecty afterDeselect, pero para hacerlo más parecido a vue, haremos que esas devoluciones de llamada emitan eventos. Podríamos envolver esas devoluciones de llamada ingenuamente de la siguiente manera:

     

    mounted() { $(this.$el).multiSelect({ afterSelect: (values) = this.$emit('select', values), afterDeselect: (values) = this.$emit('deselect', values) });}

    Sin embargo, si insertamos un registrador en los detectores de eventos, veremos que esto no nos proporciona una interfaz muy parecida a la de vue. Después de cada selección o anulación de selección, recibimos una lista de los valores que han cambiado, pero para ser más parecidos a vue, probablemente deberíamos emitir un evento de cambio con la lista actual.

    Tampoco tenemos una forma muy parecida a la de vue para establecer valores. Entonces, en lugar de este enfoque ingenuo, deberíamos considerar el uso de estas herramientas para implementar algo como el enfoque de modelo v que Vue proporciona para elementos de selección nativos .

    Implementarv-model

    Para implementar v-modelen un componente, necesitamos habilitar dos cosas: aceptar un valueaccesorio que aceptará una matriz y establecerá las opciones apropiadas como seleccionadas, y luego emitirá un inputevento al cambiar que pase la nueva matriz completa.

    Hay cuatro partes que manejar aquí: configuración inicial para un valor particular, propagar cualquier cambio realizado al padre, manejar cualquier cambio en el valor que comience fuera del componente y, finalmente, manejar cualquier cambio en el contenido en la ranura (la lista de opciones). ).

    Acerquémonos a ellos uno por uno.

    1. Configuración con una propuesta de valor
      Primero, debemos enseñarle a nuestro componente a aceptar una propuesta de valor y luego, cuando instanciamos la selección múltiple, le indicaremos qué valores seleccionar.
      export default { props: { value: Array, default: [], }, mounted() { $(this.$el).multiSelect(); $(this.$el).multiSelect('select', this.value); },}
    2. Manejar cambios internos
      Para manejar los cambios que ocurren debido a que el usuario interactúa con la selección múltiple, podemos volver a las devoluciones de llamada que exploramos antes, pero esta vez "menos ingenuamente". En lugar de simplemente emitir lo que nos envían, queremos convertir un nuevo array que tenga en cuenta nuestro valor original y el cambio realizado.
      mounted() { $(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);},

      Esas funciones de devolución de llamada pueden parecer un poco densas, así que analicémoslas un poco.

      El afterSelectcontrolador concatena el valor recién seleccionado con nuestros valores existentes, pero luego, solo para asegurarse de que no haya duplicados, lo convierte en un Conjunto (garantiza la unicidad) y luego lo desestructura para volver a convertirlo en una matriz.

      El afterDeselectcontrolador simplemente filtra los valores no seleccionados de la lista de valores actual para emitir una nueva lista.

    3. Manejo de actualizaciones externas del valor
      Lo siguiente que debemos hacer es actualizar los valores seleccionados en la interfaz de usuario cada vez que valuecambie la propiedad. Esto implica traducir de un cambio declarativo a los accesorios a un cambio imperativo utilizando las funciones disponibles en la selección múltiple. La forma más sencilla de hacer esto es utilizar un observador en nuestro valueaccesorio:
      watch: // don’t actually use this version. See why below value() { $(this.$el).multiselect('select', this.value); }}

      Sin embargo, ¡hay un problema! Porque activar esa selección en realidad dará como resultado nuestro onSelectcontrolador y, por lo tanto, utilizará valores de actualización. Si hacemos este observador ingenuo, terminaremos en un bucle infinito.

       

      Afortunadamente, para nosotros, Vue nos brinda la posibilidad de ver tanto los valores antiguos como los nuevos. Podemos compararlos y solo activar la selección si el valor ha cambiado. Las comparaciones de matrices pueden resultar complicadas en JavaScript, pero para este ejemplo, aprovecharemos el hecho de que nuestras matrices son simples (no contienen objetos) y usaremos JSON stringify para hacer la comparación. Después de tener en cuenta que también debemos deseleccionar las opciones que se hayan eliminado, nuestro observador final se ve así:

      watch: { value(newValue, oldValue) { if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) { $(this.$el).multiSelect('deselect_all'); $(this.$el).multiSelect('select', this.value); } } },
    4. Manejo de actualizaciones externas a la ranura
      Tenemos una última cosa que debemos manejar: nuestra selección múltiple actualmente utiliza elementos de opción pasados ​​a través de una ranura. Si ese conjunto de opciones cambia, debemos decirle a la selección múltiple que se actualice; de ​​lo contrario, las nuevas opciones no aparecen. Afortunadamente, tenemos una API sencilla para esto en selección múltiple (la función 'actualizar' y un gancho Vue obvio para conectar) actualizado. Manejar este último caso es tan simple como:
      updated() { $(this.$el).multiSelect(’refresh');},

      Puede ver una versión funcional de este contenedor de componentes en este CodePen:

      Vea las integraciones de Pen Vue: Multiselect Wrapper con v-model de Kevin Ball .

    Inconvenientes y otras consideraciones

    Ahora que hemos visto lo sencillo que es utilizar JavaScript de terceros dentro de Vue, vale la pena analizar los inconvenientes de estos enfoques y cuándo es apropiado usarlos.

    Implicaciones de rendimiento

    Uno de los principales inconvenientes de utilizar JavaScript de terceros que no está escrito para Vue dentro de Vue es el rendimiento, especialmente cuando se incorporan componentes y bibliotecas de componentes o elementos creados utilizando marcos adicionales completos. El uso de este enfoque puede generar una gran cantidad de JavaScript adicional que el navegador debe descargar y analizar antes de que el usuario pueda interactuar con nuestra aplicación.

    Por ejemplo, usar el componente de selección múltiple que desarrollamos anteriormente significa incorporar no solo el código de ese componente, sino también todo jQuery. Eso puede duplicar la cantidad de JavaScript relacionado con el marco que nuestros usuarios descargarán, ¡solo para este componente! Claramente, sería mejor encontrar un componente creado de forma nativa con Vue.js.

     

    Además, cuando hay grandes discrepancias entre las API utilizadas por las bibliotecas de terceros y el enfoque declarativo que adopta Vue, es posible que se encuentre implementando patrones que resulten en mucho tiempo de ejecución adicional. También usando el ejemplo de selección múltiple, teníamos que actualizar el componente (lo que requería mirar una gran cantidad de DOM) cada vez que cambiaba una ranura, mientras que un componente nativo de Vue podía utilizar el DOM virtual de Vue para ser mucho más eficiente en sus actualizaciones.

    Cuándo usar

    El uso de bibliotecas de terceros puede ahorrarle una gran cantidad de tiempo de desarrollo y, a menudo, significa que puede utilizar software probado y bien mantenido para el que no tiene la experiencia necesaria. El principal inconveniente es el rendimiento, especialmente cuando se incorporan marcos grandes como jQuery.

    Para las bibliotecas que no tienen esas grandes dependencias, y particularmente aquellas que no manipulan en gran medida el DOM, no hay ninguna razón real para favorecer las bibliotecas específicas de Vue sobre las más genéricas. Debido a que Vue hace que sea tan fácil incorporar otro JavaScript, debes basarte en tus necesidades de funciones y rendimiento, simplemente eligiendo la mejor herramienta para el trabajo, sin preocuparte por algo específico de Vue.

    Para marcos de componentes más extensos, hay tres casos principales en los que querrás incorporarlos.

    1. Creación de prototipos
      En este caso, la velocidad de iteración importa mucho más que el rendimiento del usuario; use lo que haga el trabajo más rápido.
    2. Migrar un sitio existente.
      Si está migrando desde un sitio existente a Vue, poder empaquetar cualquier marco que ya esté usando dentro de Vue le brindará una ruta de migración elegante para que pueda extraer gradualmente el código antiguo pieza por pieza, sin tener que hacer una reescritura del Big Bang.
    3. Cuando la funcionalidad simplemente aún no está disponible en un componente de Vue.
      Si tiene un requisito específico y desafiante que debe cumplir, para el cual existe una biblioteca de terceros pero no hay un componente específico de Vue, considere empaquetar la biblioteca que sí existe.

    Cuando hay grandes discrepancias entre las API utilizadas por las bibliotecas de terceros y el enfoque declarativo que adopta Vue, es posible que se encuentre implementando patrones que resulten en mucho tiempo de ejecución adicional.

    Ejemplos en la naturaleza

    Los primeros dos de estos patrones se utilizan en todo el ecosistema de código abierto, por lo que hay varios ejemplos diferentes que puedes investigar. Dado que empaquetar todo un componente complejo o una biblioteca de componentes tiende a ser más bien una solución provisional/de migración, no he encontrado tantos ejemplos de eso en el mercado, pero hay un par por ahí, y he usado este enfoque para clientes ocasionalmente según lo dictan las necesidades. Aquí hay un ejemplo rápido de cada uno:

    1. Vue-moment envuelve la biblioteca moment.js y crea un conjunto de útiles filtros Vue;
    2. Awesome-mask envuelve la biblioteca vanilla-masker y crea una directiva para entradas enmascaradas;
    3. Vue2-foundation incluye la biblioteca de componentes de ZURB Foundation dentro de los componentes de Vue.

    Conclusión

    La popularidad de Vue.js no muestra signos de desaceleración, y una gran cantidad de crédito se debe al enfoque progresivo del marco. Al permitir la adopción incremental, la naturaleza progresiva de Vue significa que las personas pueden comenzar a usarlo aquí y allá, poco a poco, sin tener que hacer reescrituras masivas.

    Como hemos visto aquí, esa naturaleza progresista se extiende también en la otra dirección. Así como puedes incrustar Vue poco a poco en otra aplicación, puedes incrustar otras bibliotecas poco a poco dentro de Vue.

    ¿Necesita alguna funcionalidad que aún no se haya trasladado a un componente de Vue? Mételo, envuélvelo y listo.

    Lecturas adicionales sobre SmashingMag:

    Deslizándose dentro y fuera de Vue.js

    Deslizándose dentro y fuera de Vue.js

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Accesibilidad para diseñadores, con Stéphanie Walter Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-deslizandose-dentro-y-fuera-de-vue-972-0.jpg

    2024-05-20

     

    Deslizándose dentro y fuera de Vue.js
    Deslizándose dentro y fuera de Vue.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20