En la actualidad, existen tantos marcos de trabajo en JavaScript que puede ser difícil hacer un seguimiento de todos ellos, y ciertamente es poco probable que alguien los domine en su totalidad. Lo que significa para la mayoría de nosotros es que tendremos que ser selectivos sobre qué marcos de desarrollo vamos a invertir tiempo en el aprendizaje.
En este artículo, echaremos un vistazo rápido a Vue.js, para que pueda decidir por sí mismo si es probable que se adapte al tipo de proyectos en los que tiende a trabajar, y si le parece adecuado.
¿Qué es Vue.js?
Aunque convencionalmente no se escribe con mayúscula, "Vue" es en realidad un acrónimo de Visual Understanding Environment. Su principal objetivo es facilitar el desarrollo de aplicaciones web reduciendo la complejidad del código. Tiene mucho en común con React.js, pero la versión actual de Vue se renderiza más rápido que React y parece ser más eficiente.
¿Vue es difícil de aprender?
Si ya eres un programador experimentado, no deberías tener muchas dificultades para comenzar con Vue, pero no sería correcto describirlo como un lenguaje para principiantes. Necesitas tener algo de experiencia con HTML, CSS y JavaScript para construir algo práctico con él.
La curva de aprendizaje con Vue es un poco menos pronunciada que con React, y es mucho menos pronunciada que con Angular. Entonces, lo que se puede afirmar con precisión es que Vue es relativamente fácil de aprender en comparación con otros marcos de desarrollo populares.
¿Cómo ayuda Vue a alcanzar los objetivos?
Varía un poco dependiendo de cuál sea su objetivo en realidad, pero en general, vincula bloques de código a divs de HTML. Esta metodología hace que sea más fácil introducir interactividad y contenido dinámico que con HTML, CSS y JavaScript normales.
Por otro lado, realmente no se puede hacer más en Vue que con las formas más convencionales. Usar Vue es simplemente una cuestión de facilitarle las cosas en la fase de desarrollo, pero no tiene mucho efecto en el resultado final, aparte del menor impacto en el rendimiento debido a la carga del código de marco.
Otra ventaja de Vue es que proporciona modularidad, lo que significa que puede reutilizar los componentes que desarrolla en varios proyectos.
¿Vue tiene algunos trucos geniales en la manga?
Ciertamente lo hace, y lo mejor de ellos son los efectos de transición incorporados, que le permiten tomar el control de lo que harían otroswise ser estructuras CSS y JavaScript muy intensivas en código utilizando solo una línea o dos de código. Esto le ahorra tiempo y esfuerzo al crear sus aplicaciones.
Otra característica útil es la representación nativa para tipos de dispositivos específicos, como Android e iOS, de modo que puede ajustar sus aplicaciones para los dispositivos en los que se ejecutan sin mucho trabajo adicional.
Cómo comenzar
Como se dijo anteriormente, Vue es fácil de aprender, pero no es un lenguaje para principiantes. Todavía necesitas conocer tu camino dentro de un bloque de código.
El problema es que, como la mayoría de los marcos, la documentación es muy vaga y se dedica principalmente a convencerlo de que la use. Se presta mucha menos atención en la documentación a explicar cómo funciona todo o por qué haces las cosas de cierta manera. Prácticamente todos los ejemplos de marcos oficiales jamás creados dejan fuera elementos vitales enformation que tienes que hurgar durante horas para descubrir. Esa es una falla compartida por la documentación y los ejemplos de Vue también.
Para facilitar la comprensión de lo que realmente necesita hacer para volver a crear este proyecto, estos son los pasos necesarios:
1. Añadir un script de referencia vue.js
Para la optimización de la velocidad, es mejor incluir esto después de todo el contenido de su página, pero justo antes de la etiqueta de cuerpo de cierre en la fuente HTML. También puede tener otros recursos de página cargando en esta sección también, y el orden de prioridad de carga determina qué orden debe insertar cada recurso.
Aquí hay un ejemplo de incluir vue.js desde un CDN:
Y aquí hay un ejemplo de cómo incluir vue.js desde un directorio en su propio servidor:
Sin esta referencia a vue.js, nada relacionado con Vue puede suceder.
2. Agrega los componentes de Vue en tu cuerpo HTML
Eso es lo que está pasando con este código:
Por ahora no tiene mucho sentido, pero la parte de Vue es el elemento "demo-grid" vacío, más la adición de una "v-directiva" a la entrada de la consulta (en este caso es "v-model ”, Que se utiliza para vincular el código Vue para formar entradas).
3. Si el proyecto requiere una plantilla de componente, agregue esto al cuerpo HTML
Esta sección de código es inusual porque se ve como HTML normal dentro de una etiqueta de secuencia de comandos, lo que confundirá la mayoría del software de edición de HTML (observe que los colores del indicador son incorrectos en algunos lugares).
4. Agrega la instancia de Vue
Esta debería ser una de las últimas cosas en aparecer en la página, ya que está realizando una tarea de representación dinámica. Esto proporciona algunos beneficios de optimización al agregarlo anteriormente en la página.
- La línea 46 especifica que el navegador debe buscar un componente en la página llamado "demo-grid", y la línea 47 especifica que "# grid-template" debe usarse como plantilla para el componente (este es el código de plantilla agregado en el paso 3 de la línea 9 a la línea 30).
- Un bloque de la línea 48 a la línea 52 define las propiedades del componente.
- Las líneas 53 a 62 definen una función para ordenar los datos en la tabla.
- Las líneas 63 a 85 definen una función para filtrar datos (de los resultados en la consulta de búsqueda).
- Las líneas 86 a 90 definen una función para poner en mayúsculas las palabras en un conjunto de datos.
- Las líneas 91 a 97 definen el método para ordenar los datos.
5. Agregue el código de inicio antes de la etiqueta de script de cierre
Si completó los pasos 1 a 4 y abrió el archivo en el navegador, todo lo que verá es el cuadro de búsqueda y nada más. Esto se debe a que todo lo necesario para construir la tabla se ha definido pero no se ha creado. Entonces, en el paso 5, agregamos el código que realmente crea la tabla que se definió en todos los pasos anteriores.
- La línea 100 crea un nuevo objeto Vue.
- La línea 101 especifica a qué elemento vincular la acción.
- Las líneas 102 a 111 proporcionan los datos del objeto que se vincularán al elemento.
Pruebas
Habiendo definido y creado el objeto requerido, ahora está listo para probar el resultado. Prepárese para ser insuficiente, porque esto es lo que debería ver en el navegador:
¿Que esta pasando? ¿Por qué es tan aburrido? Es porque no hay un estilo aplicado. Si usamos el estilo predeterminado del ejemplo de JSFiddle, la tabla se vería así:
Al escribir cualquier cosa en el cuadro de búsqueda (no se distingue entre mayúsculas y minúsculas) se filtrarán los resultados en consecuencia:
Al hacer clic en el encabezado de una columna, podrá cambiar el orden de visualización. Por ejemplo, al hacer clic en el encabezado de la columna "Potencia", los resultados se mostrarán en orden de nivel de potencia.
Mejora y adaptación.
Otro problema con los ejemplos del marco es que por lo general no incluyen mucho enformation para ayudar a alguien que no esté familiarizado con el código base a descubrir cómo aplicar en el campo lo que ve en el ejemplo. Vue hace un trabajo magnífico en comparación con Bootstrap (que es notoriamente por debajo deformative), pero aún deja muchas preguntas sin respuesta.
Aquí hay algunos cambios que podríamos hacer en esta aplicación para cambiar su apariencia y su función:
- Dale estilo a la mesa como Bootstrap stripemesa
- Cambiar el número de columnas.
- Cambia los datos a algo completamente diferente.
1. Añadiendo Bootstrap
2. Envolviendo el elemento en una tabla Bootstrap
3. Ajustando el elemento raíz para usar el modelo de diseño Bootstrap
4. Restyling las flechas
5. Modificando los datos
6. Pruebas
- Sin filtrar y sin clasificar
- Clasificado por directiva (ascendente)
- Ordenado por Usado para (ascendente)
- Filtrado por "condicional"
- Filtrado por "condicional" y ordenado por directiva (ascendente)
Reflexiones finales
Con suerte, lo que se hizo evidente a partir de estos ejemplos fue que creamos dos aplicaciones con aspectos y contenidos muy diferentes a partir de una porción de código común. Con Vue es muy fácil reutilizar su código en múltiples proyectos y, potencialmente, disfrutar de un considerable ahorro de tiempo.
imagen del encabezado cortesía de Aleksandar Savic
Comentarios Comentarios 0