Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación

 

 

 

  • Advertise on Smashing Magazine
  • Deploy Fast. Deploy Smart

  • Índice
    1. Capturar entradas de usuario
    2. Almacenamiento de entradas del usuario en un único evento
    3. Alternar clases
    4. Ocultar y mostrar
    5. Enviar un formulario
    6. Conclusión
      1. Further Reading

    ¿Sabías que puedes incorporar Vue a tu proyecto de la misma manera que incorporarías jQuery, sin necesidad de ningún paso de compilación? Cubramos algunos casos de uso comunes en jQuery y cómo podemos cambiarlos a Vue, y por qué querríamos hacerlo. En este artículo, Sarah Drasner le muestra que Vue también es una abstracción bastante buena para sitios pequeños que no necesitan muchos gastos generales. Debido a la flexibilidad de Vue, también es fácil realizar la transición de este código a un paso de compilación y estructuras de componentes si desea adoptar una estructura más compleja con el tiempo. ¡En realidad es muy divertido probarlo!

     

    Ha sido imposible ignorar todo el revuelo que rodea a los marcos de JavaScript últimamente, pero es posible que no sean los más adecuados para sus proyectos. Quizás no desee configurar un sistema de compilación completo para algunas pequeñas abstracciones de las que podría prescindir. Quizás trasladar un proyecto a un sistema de compilación y, por lo tanto, un método de implementación diferente significaría mucho tiempo y esfuerzo adicionales que quizás no pueda facturar a un cliente. Quizás no quieras escribir todo tu HTML en JavaScript. La lista continua.

    Lo que algunas personas tal vez no sepan es que puedes incorporar Vue a tu proyecto de la misma manera que incorporarías jQuery, sin necesidad de ningún paso de compilación. Vue es flexible en el sentido de que podemos usarlo directamente en HTML.

    Entonces, si la estructura de su página actual se ve así:

    main div pSome content here/p /div/mainscript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"/scriptscript //some jquery code here/script

    Literalmente podrías cambiar la etiqueta del script aquí y seguir usando HTML y JS en conjunto tal como lo hiciste antes, refactorizando solo unos pequeños fragmentos de código. No es necesario reescribir el HTML en JavaScript, no es necesario utilizar el paquete web y no es necesario configurar un sistema gigante:

    main div pSome content here/p /div/mainscript src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"/scriptscript //some vue code here/script

    Puede reemplazar las etiquetas y dejar el marcado como está. La mejor parte es que podría pensar que el código se volverá más complicado, pero al leer este artículo y ver los ejemplos, descubrirá que Vue es extremadamente simple, legible y fácil de mantener y adaptar. En términos de tamaño, también son bastante comparables: para usarlos tal como están desde una CDN, minificada, la versión 2.5.3 de Vue tiene 86 KB . jQuery 3.2.1 tiene 87 KB .

     

    Cubramos algunos casos de uso comunes en jQuery y cómo los cambiaríamos a Vue, y por qué querríamos hacerlo.

    Capturar entradas de usuario

    Un caso de uso muy común para necesitar JavaScript en un sitio es capturar la entrada del usuario desde un formulario, así que comencemos por ahí. En realidad, todavía no incorporaremos la forma completa en aras de la simplicidad y la claridad, pero trabajaremos hasta el final.

    Para capturar información a medida que un usuario escribe, así es como lo haríamos en jQuery y Vue, uno al lado del otro:

    Vea la información de captura de Pen jQuery de un formulario ingresado por Sarah Drasner ( @sdras ) en CodePen .

    div label for="thing"Name:/label input type="text" / p/p/div
    // this is an alias to $(document).ready(function() {$(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); });});

    Vea la información de captura de Pen Vue de un formulario ingresado por Sarah Drasner ( @sdras ) en CodePen .

    div label for="name"Name:/label input type="text" v-model="name" / !--v-model is doing the magic here-- p{{ name }}/p/div
    //this is a vue instancenew Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for ‘name’ }})

    Utilizo este ejemplo porque revela algunos de los puntos fuertes de Vue. Vue es reactivo , lo que lo hace particularmente capaz de responder a los cambios. Puedes ver cómo, a medida que actualizamos lo que escribimos, cambia instantáneamente, sin demoras.

    También puede ver que en la versión jQuery, el DOM tiene el control: extraemos cosas del DOM, las escuchamos y respondemos. Esto nos vincula a la forma en que está configurado actualmente el DOM y nos obliga a pensar en cómo atravesarlo. Si la estructura de los elementos HTML cambiara, tendríamos que adaptar nuestro código para que corresponda a esos cambios.

    En la versión de Vue, almacenamos el estado: realizamos un seguimiento de una propiedad que queremos actualizar y cambiar, y realizamos un seguimiento del elemento que queremos cambiar mediante algo llamado directiva. Esto significa que está adjunto directamente al elemento HTML al que debemos apuntar. La estructura del DOM puede cambiar, el HTML puede moverse y nada de esto afectaría nuestro rendimiento o la captura de estos eventos. En nuestro caso, estamos usando ese atributo v-model en la entrada para conectarnos a los datos que estamos almacenando en JavaScript.

     

    ¡Pero! Este no es un caso de uso tan común como almacenar algo al presionar la tecla Intro, así que veamos eso a continuación.

    Almacenamiento de entradas del usuario en un único evento

    Lo interesante de la forma en que funciona Vue es que no tiene que pensar en eventos DOM específicos al almacenar y recuperar datos. En esencia, ya tenemos una idea de lo que queremos capturar; le estamos dando forma eligiendo un evento con el cual alterarlo. Por el contrario, jQuery está estrechamente vinculado a lo que hace el DOM y se basa en esos eventos DOM para crear las variables que almacena, que se pueden colocar en cualquier lugar, en lugar de un grupo consistente (en datos) para su recuperación. Podemos ver esto en la versión actualizada del último ejemplo, donde la información se recopila al presionar la tecla Intro:

    Vea la información de captura de Pen jQuery desde una entrada de formulario: ingrese por Sarah Drasner ( @sdras ) en CodePen .

    div label for="thing"Name:/label input type="text" / p/p/div
    // this is an alias to $(document).ready(function() {$(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); });});

    Vea cómo Pen Vue captura información de una entrada de formulario, ingrese la clave de Sarah Drasner ( @sdras ) en CodePen .

    div label for="name"Name:/label input type="text" v-model.lazy="name" / p{{ name }}/p/div
    new Vue({ el: '#app', data: { name: '' }});

    En esta versión, jQuery se simplifica un poco porque no tenemos que capturar cosas con cada pulsación de tecla, pero todavía estamos sacando cosas del DOM y respondiendo paso a paso a estos cambios. Nuestro código en jQuery siempre será algo como esto:

    "Obtenga este elemento, vea lo que está haciendo, mantenga estos cambios, haga algo con estos cambios".

    En comparación: en Vue, tenemos el control de lo que cambia y el DOM responde a esos cambios según nuestros comandos. Lo adjuntamos directamente a lo que nos gustaría actualizar. En nuestro caso, tenemos una pequeña abstracción llamada modificador: v-model.lazy. Vue ahora sabe que no debe comenzar a almacenar esto hasta que ocurra un evento de cambio. ¡Con buena pinta!

    Alternar clases

    Lo siguiente que cubriremos es alternar clases de CSS porque, como me ha informado el todopoderoso y siempre atento Googly, es la funcionalidad más común de jQuery.

    Vea Pen Toggle Class jQuery de Sarah Drasner ( @sdras ) en CodePen .

    div button aria-pressed="false"Toggle me/button pSometimes I need to be styled differently/p/div
    .red { color: red;}JS$(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); });});

    Vea Pen Toggle Class Vue de Sarah Drasner ( @sdras ) en CodePen .

     

    div button @click="active = !active" :aria-pressed="active ? 'true' : 'false'"Toggle me/button p :class="{ red: active }"Sometimes I need to be styled differently/p/div
    .red { color: red;}JSnew Vue({ el: '#app', data: { active: false }})

    Nuevamente, lo que vemos aquí es que en la versión jQuery estamos almacenando el estado en el DOM. El elemento tiene la clase y jQuery toma una decisión basada en la presencia de la clase, que verifica haciendo ping al DOM. En la versión Vue, almacenamos una condición y le damos estilo de acuerdo con ese estado. No le pedimos esta información al DOM, la conservamos nosotros mismos.

    Almacenamos activelos datos, el botón cambia la condición y .redse modifica en función de esa condición. Incluso los estados de accesibilidad, aria-pressedse indican mucho más rápido, ya que no tenemos que configurar nada en el script en Vue, podemos cambiar entre estados directamente en línea en la plantilla según el estado de ' active.'

    También notarás que en los últimos ejemplos podrías haber pensado que se necesitaría mucho más código para comenzar a trabajar con Vue.js que con jQuery, pero en realidad son bastante comparables. Blog sobre salud

    Ocultar y mostrar

    Otro caso de uso común de jQuery es ocultar y mostrar algo. jQuery siempre ha hecho un muy buen trabajo al hacer que esta tarea sea realmente simple, así que echemos un vistazo a cómo se ve lado a lado con Vue.

    Vea el espectáculo Pen jQuery hide de Sarah Drasner ( @sdras ) en CodePen .

    div button type="button" aria-expanded="false" Toggle Panel /button phello/p/div
    $(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); });});

    Vea el programa Pen Vue oculto de Sarah Drasner ( @sdras ) en CodePen .

    div button @click="show = !show" :aria-expanded="show ? 'true' : 'false'" Toggle Panel /button p v-if="show"hello/p/div
    new Vue({ el: '#app', data: { show: true }})

    Tanto jQuery como Vue hacen un buen trabajo al mantener esta tarea simple, pero hay un par de razones por las que realmente trabajo con Vue para algo así como alternar. Vue tiene una herramienta llamada Vue devtools . Esto no es diferente a las herramientas de desarrollo de Chrome, pero cuando lo usamos, obtenemos información especial sobre lo que está sucediendo con Vue.

    Tanto en la versión jQuery como en Vue, podemos ver que el elemento se oculta y aparece. Pero ¿y si algo saliera mal? ¿Qué pasa si algo en nuestro código no funciona como esperábamos? Para comenzar a depurar con jQuery, probablemente agregaríamos algunos console.logmensajes de texto o estableceríamos algunos puntos de interrupción para intentar localizar dónde estaban fallando las cosas.

    Ahora bien, no hay nada malo con console.logs, pero con la ayuda de las herramientas de desarrollo de Vue, podemos tener una experiencia práctica de Vue (no pude resistirme) de lo que Vue cree que está sucediendo. En este gif a continuación, puede ver que mientras alternamos el botón, Vue devtools actualiza el estado de verdadero/falso en consecuencia. Si alguna vez el DOM no funcionara como esperábamos, podríamos ver los datos en Vue en tiempo real. Esto hace que sea mucho más fácil depurar; en realidad es bastante maravilloso.

     

    La otra cosa que me gusta de esto es que v-ifes fácil de extender a otras condiciones. Puedo decidir usar una cosa llamada v-showen lugar de v-ifsi la cosa que estoy alternando se mostrará y ocultará con frecuencia: v-ifdesmontará completamente el elemento, mientras que v-showsimplemente alternará su visibilidad. Esta distinción es realmente importante porque es mucho más eficaz alternar la visibilidad en un estilo en lugar de desmontar/montar completamente el nodo DOM. Puedo mostrar u ocultar algo según muchas condiciones, o incluso la presencia de entradas del usuario u otras condiciones también. Generalmente aquí es donde jQuery puede volverse un poco complicado, haciendo ping al DOM en múltiples ubicaciones y coordinándolas. A continuación se muestra un ejemplo de coordinación que muestra algo basado en la presencia de la entrada del usuario:

    Vea el botón Pen Show basado en el contenido Vue de Sarah Drasner ( @sdras ) en CodePen .

    div label for="textarea"What is your favorite kind of taco?/label textarea v-model="tacos"/textarea br button v-show="tacos"Let us know!/button/div
    new Vue({ el: '#app', data() { return { tacos: '' } }})

    Vea el botón Pen Show basado en el contenido jQuery de Sarah Drasner ( @sdras ) en CodePen .

    div label for="textarea"What is your favorite kind of taco?/label textarea/textarea br button v-show="tacos"Let us know!/button/div
    $(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length 0) { button.show(); } else { button.hide(); } })});

    En este ejemplo, puede ver el valor de hacer que Vue mantenga el estado: estamos reaccionando a los cambios de forma muy natural y con menos código. Una vez que te acostumbras al estilo, es más rápido de entender porque no tienes que rastrear la lógica línea por línea. Mucha gente llama a esta diferencia " imperativa versus declarativa ".

    Enviar un formulario

    Históricamente, el caso de uso canónico de jQuery ha sido enviar un formulario con una llamada AJAX, por lo que deberíamos analizarlo también. En realidad, Vue no tiene nada incorporado como AJAX; Es típico en la aplicación Vue usar algo como Axios (una biblioteca de JavaScript para realizar solicitudes HTTP) para ayudar con esta tarea.

    Este ejemplo es un poco más complicado que el resto. Vamos a hacer algunas cosas aquí:

    1. El botón aparecerá gris antes de que comencemos a escribir en nuestro formulario, luego recibirá una clase "activa" y se volverá azul;
    2. Cuando enviemos el formulario, evitaremos que la página se cargue;
    3. Cuando se envíe el formulario, mostraremos los datos de respuesta en la página.

    Vea el envío del formulario Pen jQuery AJAX de Sarah Drasner ( @sdras ) en CodePen .

     

    div form action="/" div label for="name"Name:/labelbr input type="text" name="name" required/ /div div label for="email"Email:/labelbr input type="email" name="email" required/ /div div label for="caps"HOW DO I TURN OFF CAPS LOCK:/labelbr textarea name="caps" required/textarea /div button type="submit"Submit/button div h3Response from server:/h3 pre/pre /div /form/div
    $(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); });});

    Aquí, veremos que las líneas 2 a 10 tratan sobre el manejo de la clase de botón, de manera similar a como lo hicimos antes. Pasamos un parámetro llamado evento al formulario y luego decimos event.preventDefault()que evitemos recargar la página. Luego recopilamos todos los datos del formulario de las entradas del formulario, procesamos el formulario y luego colocamos la respuesta en la .done()llamada de la solicitud AJAX.

    Vea el envío del formulario Pen Vue por Sarah Drasner ( @sdras ) en CodePen .

    div form @submit.prevent="submitForm" div label for="name"Name:/labelbr input type="text" v-model="name" required/ /div div label for="email"Email:/labelbr input type="email" v-model="email" required/ /div div label for="caps"HOW DO I TURN OFF CAPS LOCK:/labelbr textarea v-model="caps" required/textarea /div button :class="[name ? activeClass : '']" type="submit"Submit/button div h3Response from server:/h3 pre{{ response }}/pre /div /form/div
    new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response = { this.response = JSON.stringify(response, null, 2) }) } }})

    En la versión Vue, decidimos qué campos necesitamos completar en el formulario y luego los adjuntamos con el modelo v que usamos anteriormente. Verificamos la presencia del nombre para alternar la clase. En lugar de pasar event y escribir event.preventDefault(), todo lo que tenemos que hacer es escribir @submit.preventen nuestro elemento de formulario, y eso está hecho por nosotros. Para enviar la publicación en sí, usamos Axios y almacenaremos la respuesta en la instancia de Vue.

    Todavía hay muchas cosas que nos gustaría hacer para tener un formulario listo para producción, incluida la validación , el manejo de errores y las pruebas de escritura , pero en este pequeño ejemplo, puede ver cuán limpio y legible puede ser Vue mientras maneja una gran cantidad de cosas que se actualizan y cambian, incluida la entrada del usuario.

    Conclusión

    It is definitely ok to use jQuery if it suits you! This article serves to show that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Vue is comparable in size, easy to reason about, and it’s fairly trivial to switch small pieces of functionality to Vue without rewriting your HTML in JavaScript and adopting a build system if you don’t have the bandwidth. This all makes it pretty compelling to consider.

    Due to Vue’s flexibility, it’s also easy to transition this code to a build step and component structures if you’d like to adopt a more complex structure over time. It’s actually pretty fun to try it out, so when you’re ready to do so, check out the vue-cli. What this tool does is give you the ability to scaffold an entire production-level Vue and webpack build with just a couple of terminal commands. This allows you to work with single-file components, where you can use HTML, CSS, and Script in tandem in one file that makes up single, reusable components. You don’t have to configure the webpack build unless you’d like to do something special, so you save a lot of time setting things up. They even have a built-in command to get everything ready for production deployment.

    The nice thing about the flexibility to choose either way of incorporating Vue into your project means that you’re not pressed to change your style of working all at once, and you can even make changes slowly over time. This is why people call Vue the progressive framework.

    Further Reading

    • Web Development Is Getting Too Complex, And It May Be Our Fault
    • How To Deal With Big Tooling Upgrades In Large Organizations
    • Recreating YouTube’s Ambient Mode Glow Effect
    • How To Migrate From jQuery To Next.js

    (ra, il, mrn)Explore more on

    • JavaScript
    • Vue
    • HTML
    • jQuery
    • Guides





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación

    Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación

    Advertise on Smashing Magazine Deploy Fast. Deploy Smart Índice Capturar entradas de usuario

    programar

    es

    https://aprendeprogramando.es/static/images/programar-reemplazo-de-jquery-con-vue-919-0.jpg

    2024-05-20

     

    Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación
    Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación

    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