Soy un desarrollador de pila completa en Syncrasy Tech (compañía de soluciones de TI) . Me encanta escribir códigos React. Pero, ¿por qué te digo esto? Estamos aquí para discutir las mejores prácticas de Vue.js para el desarrollo web. Te estoy diciendo esto para que puedas entender mis antecedentes y por qué estoy discutiendo aquí el Vue.js.
Me encanta trabajar en códigos React, pero odio leerlos. Esta es la razón por la que no puedo codificar. Incluso con las mejores prácticas de revisión de código, no puedo entender el anidamiento de componentes React que simplemente ayuda a crear estructuras de IU más complejas en aplicaciones web.
La solución a este problema es Vue, que ahora no es tan nuevo en el bloque del desarrollo de aplicaciones web. He escuchado mucho sobre los componentes asincrónicos de Vue, la representación del lado del servidor, las herramientas y las bibliotecas. Tal vez encuentre confusa esta miríada de términos. Créeme, no estás solo en eso, muchos desarrolladores de todos los niveles sienten lo mismo cuando no conocen las mejores prácticas de Vue.
Unos días después, finalmente decidí poner mis códigos en él. Lo que estoy compartiendo aquí son las numerosas mejores prácticas que he aprendido a través de mi experiencia con Vue. Estoy listo para compartir lo que encontraría.
Empecemos
Intentar aprender todo a la vez en Vue puede ser abrumador. Comencemos con los números. Hoy Vue tiene 147K estrellas de Github dejando atrás a los gigantes JS como Angular (50.6k estrellas) y React (135k estrellas).
He dividido las mejores prácticas de Vue en cuatro categorías:
Funcionalidades Vue
Las funcionalidades de Vue tienen muchas cosas que discutir bajo el capó automáticamente. Vue.js es una plataforma simple orientada a la vista que es su primera ventaja principal. Toda la información en la codificación es válida solo si interactúa correctamente con las vistas con nombre y anidadas.
Crear una sola vista es bastante simple en Vue, solo tiene que cargar la interfaz y agregar JavaScript para comenzar el desarrollo de su aplicación web.
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
Luego, un poco de marcado para obtener la vista final:
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
¿Qué revela el código anterior?
El ejemplo de codificación anterior muestra cómo Vue renderiza automáticamente los elementos sin usar códigos. La sintaxis simple se utiliza para enviar los datos para verlos directamente. Agregar propiedades de instancia se puede utilizar para la representación de elementos Vue.
Los sistemas Vue como JQuery mantienen la información en DOM y para todos los cambios adicionales que los desarrolladores necesitan para realizar la representación y modificación de las partes relacionadas. Pasemos a las otras partes de las funcionalidades de Vue.
Componentes
Para las aplicaciones web, los desarrolladores de Vue pueden usar componentes al igual que otras bibliotecas usando Vue.compoment. Un componente puede incluir un nombre, configuración o identificador.
Vue.component('component-name', { /* options */ })
Los componentes de un solo archivo funcionan muy bien para proyectos de desarrollo web de pequeño a mediano tamaño. Es bastante fácil usar componentes Vue en un solo archivo y debido a los beneficios de la lógica de JavaScript, el estilo CSS y la plantilla de código HTML. Además, vea un ejemplo:
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Los componentes de un solo archivo Vue usan WebPack para proporcionar la capacidad de usar y aplicar características web modernas a su aplicación web. Los codificadores pueden especificar una plantilla construida usando Pug usando preprocesadores:
TypeScript
SCSS
Sass
Menos
Postcss
Pug
La función Vue v-bind permite que los componentes acepten datos de los componentes principales (Props) que se pueden ver en la matriz de cadenas:
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
Esto no solo documentará sus componentes, sino que también le advertirá cuando pase un tipo de código incorrecto en la consola JavaScript del navegador.
En resumen, Vue ofrece una gran flexibilidad a los desarrolladores de aplicaciones web que se adapta a diferentes estrategias de desarrollo y también facilita la interacción con diferentes bibliotecas de Vue.
Eventos y controladores para manejar errores en Vue
Vue JS es un framework JS progresivo que se enfoca en la capa de vista y un sistema de bibliotecas de soporte. Para todas las etapas del desarrollo de aplicaciones web que usan Vue, los eventos se crean en las directivas v-on y dos puntos que se utilizan para identificar el tipo de evento, como v-on click.
Un ejemplo simple de v-on puede ser este:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Algunos ejemplos de eventos HTML DOM en Vue:
en cambio
al hacer clic
en vuelo estacionario
en carga
en mouse-out
al pasar el mouse
en carga
Controladores de eventos en Vue JS
Se asignan controladores para tratar los errores que ocurren en los eventos. Permite a un desarrollador escribir el código cuando se activa un evento específico.
Representación condicional y bucles en Vue
La representación condicional en Vue significa eliminar o agregar algunos elementos del DOM si un valor especificado es verdadero. Esta es la mejor manera para el enlace de datos condicional que permite a los desarrolladores conectar información cuando una condición particular es verdadera. Puede usar la directiva v-if para la representación condicional.
Ver un ejemplo:
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
Puede usar v-else para extender la directiva v-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Puede extenderlo aún más usando el bloque v-else-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Si el valor que un programador quiere evaluar es verdadero, ejecute la plantilla v-if . Para extensiones adicionales, se activa la directiva v-else o v-if-else .
Vue JS contiene un protocolo API simple que permite hacer espacio para la directiva v-for que representa una lista de elementos en el DOM.
Ejemplo:
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
En la codificación anterior, un bucle recorre el código en forma de matriz utilizando la directiva v-for . La matriz se refiere a objetos que permiten a los usuarios ver las propiedades presentes dentro de la matriz.
Salida:
samuel queen rinha
Enlace de datos bidireccional para acelerar el proceso de desarrollo
Una de las características principales de Vue es su enlace bidireccional reactivo que mantiene sus datos, matrices y variables sincronizados con DOM sin requerir que haga nada más. Vue usa la directiva v-model para el enlace bidireccional. La directiva v-model vincula el elemento de entrada a la propiedad de nombre utilizando directivas v-model que actualizan el campo de entrada y también actualiza el campo de propiedad de nombre vinculado a él.
Como funciona
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
La directiva v-model viene con la opción del modificador .lazy que actualiza la propiedad de datos después de que ocurre el evento de cambio.
También puede usar la función .trim para eliminar el espacio en blanco de su código.
La opción del modificador .number está ahí si desea aceptar números en el campo de entrada.
Finalmente, estas son las fortalezas clave de Vue.js que puede usar para codificar sus aplicaciones web correctamente. Entonces, si está comenzando un nuevo proyecto de desarrollo web, entonces Vue.js es su elección. Lidera el juego con sus características elegantes, pautas de estilo, codificación fácil y también ahorra esfuerzos.