Saltar al contenido
Closer Marketing

10 cosas que necesita saber sobre la interfaz de Vue.js

Con el incremento constante de los marcos de JavaScript de el diseño de usuario (incluyendo el nuevo Vue.js 3), es importante permanecer con ellos y comprender sus novedosas funcionalidades.

En el artículo, aprenderemos sobre Vue.js 3 y sus novedosas características. Este contenido agregado recientemente hace que Vue.js sea más robusto y lo transforma en un excelente marco para su próximo emprendimiento. Va a aprender 10 cosas que Vue.js ha de saber y de qué forma puede llevar a cabo interfaces escalables y potentes.

¿elaborar? ¡Vamos!

¿Qué es Vue.js?

Evan You, constructor de Vue.js:

«Vue.js es una solución más flexible y menos original. Es solo una cubierta de plataforma de trabajo, por lo que puede usarla como una función ligera de la página en lugar de un SPA maduro».

Deseaba crear una plataforma de trabajo que fuera tan poderosa como Angular, pero asimismo «mucho más rápida» y mucho más flexible sin todas las extensiones y conceptos innecesarios que Angular trae consigo.

El resultado es Vue.js, entre las interfaces mucho más populares.

Vue.js es la segunda plataforma de trabajo mucho más habitual. (Fuente: modo JS 2020)

La buena noticia: las novedosas funciones de Vue.js 3 lo convierten en una mejor opción para su próximo proyecto 😄 échales un vistazo en esta guía ⬇️Lleve a cabo clic en el tweet

¿Por qué los desarrolladores emplean Vue.js?

Por diversas razones, se anima a los desarrolladores a utilizar determinadas técnicas. Evaluemos por qué creemos que debería aprender Vue.js.

Primero, Vue.js pertence a los marcos más fáciles que la mayoría de los desarrolladores tienen la posibilidad de emplear porque emplea JavaScript. Por consiguiente, cualquier persona con un conocimiento básico de JavaScript puede emplear Vue.js para el avance.

La combinación de las herramientas CLI de Vue y otras herramientas de avance de la interfaz de usuario posibilita la instalación de Vue.js. De manera ya establecida, ciertas funcionalidades están configuradas, pero asimismo puede usar la lógica y la composición DRY (no reiterar) para producir código.

La aptitud de contestación también está dentro en Vue.js. Esto quiere decir que las funcionalidades en el mismo instante populares en el marco angular se vuelven fáciles en el fichero Vue.js; por poner un ejemplo, puede utilizar de manera fácil una oración simple como: v-if En su aplicación Vue.js.

A continuación, discutiremos las principales ventajas y desventajas de Vue.js.

Ventajas y desventajas de Vue.js

Vue.js es el segundo marco mucho más habitual hoy en día. Observemos qué lo realiza coherente con los desarrolladores web y qué los inhabilita.

Beneficios de Vue.js

Empecemos por explorar los puntos positivos de Vue.js.

Talla pequeña

El tamaño descargable del fichero Vue.js es pequeñísimo, cerca de 18 kb, lo cual es excelente en comparación con otros marcos grandes. Sin embargo, con este tamaño, Vue.js tiene un impacto positivo en la optimización de buscadores y la experiencia del usuario de las aplicaciones de front-end.

Partes individuales del fichero y legibilidad

Vue.js emplea una arquitectura fundamentada en elementos para dividir enormes bloques de código en componentes mucho más pequeños. Además de esto, todo en el fichero Vue.js es una sección, y cada componente está escrito en HTML, CSS y JavaScript para hacer más simple la lectura y la simplicidad.

Sistema de herramientas de entidad

Vue.js ahora funciona con muchas herramientas de avance de UI y necesita poca configuración. Por ejemplo, Vue.js admite herramientas como Babel y Webpack. Además de esto, asimismo da pruebas unitarias, una biblioteca de pruebas de un extremo a otro, un sistema de enrutamiento flexible y simple de usar, administración de espacio, renderización del lado del servidor (SSR) y más.

Simple de usar

Si ha utilizado el archivo Vue.js previamente, estará en concordancia en que es muy simple de emplear. Moderniza los métodos en general de desarrollo web a fin de que todos los principiantes puedan comenzar sin inconvenientes y sentirse cómodos con algo de práctica.

Desventajas de Vue.js

Ahora que hemos anunciado las ventajas, veamos las desventajas de Vue.js.

La complejidad de la respuesta

Habilitar el enlace bidireccional en Vue.js es una herramienta útil para administrar los elementos de Vue.js. El enlace bidireccional se refiere al trueque de datos entre una clase de componente y su modelo, y está diseñado para que si los datos en una localización cambian, las otras áreas se actualizan automáticamente.

No obstante, si un sistema reactivo solo crea bloques de datos reiniciados, surge el interrogante de de qué manera marcha la reactividad. En ocasiones hay fallos al leer los datos, por lo que es requisito suavizarlos. Puede leer sobre este problema conocido y su solución en el sitio de Vue.js.

Desorden del habla

Inicialmente, Vue.js fue adquirido eminentemente por los chinos, y grandes empresas como Xiaomi y Alibaba ayudaron a fomentar el marco y crear demanda en el mercado de trabajo. No obstante, debido al despliegue masivo de muchas empresas chinas, varios foros y canales de discusión son principalmente chinos, lo que hace difícil la aceptación de programadores no originales.

Actualmente, esto ya no es verdad por el hecho de que Vue.js evolucionó para admitir múltiples lenguajes, pero algunos lenguajes tienen menos soporte que otros.

Peligro de elasticidad excesiva

Como se mencionó previamente, Vue.js es muy flexible y simple de usar. Por ende, los códigos estilo espagueti son fáciles de conseguir en todas partes por el hecho de que todos los integrantes de un grupo de compañías tienen distintos puntos de vista sobre las cosas.

Según los pros y los contras de Vue.js nombrados previamente, posiblemente haya encontrado ciertas especificaciones que le gustan y otras que tienen la posibilidad de no marchar para usted.

10 cosas que debe saber sobre Vue.js.

Aquí hay diez cosas que necesita comprender y saber sobre Vue.js.

Propiedades calculadas

Los atributos calculados son entre las funciones mucho más usadas en Vue.js. Los atributos calculados le dejan crear atributos que le dejan cambiar, editar y ver información de una manera eficaz y legible.

O sea útil en el momento en que desea replicar muchos métodos de formato pequeño, cambiar valores o, en ciertos casos, muchos procesos desencadenantes.

El cálculo de atributos asiste para remover demasiada lógica del modelo. Mucha de esta lógica hace que su código se hinche y sea bien difícil de sostener.

Suponiendo que desea formatear la cadena en mayúsculas, puede hacer lo siguiente:



En el momento en que debes cambiar value ¿Cambiantes en 50 ubicaciones diferentes? Hinchado, ¿verdad? Las propiedades calculadas pueden asistir:



Puedes modificarlo fácilmente toUpperCase() llegar toLowerCase(), Se refleja en un punto.

Conduciendo el acontecimiento

Empleando Vue.js $emit y v-onConducir la comunicación entre las jerarquías de componentes se vuelve simple y directo.

Esta $emit La función admite dos parámetros: una cadena de nombre y un valor opcional para imprimir.

Esta v-on:event-name Utilizado en subcomponentes para recibir eventos de su ingrediente principal:



Activado una vez Add Ocuparse de, onClick Disparador de procedimiento $emit El evento mandará add Rastreo de eventos en subcomponentes add Acontecimiento.

Veamos cómo escuchar el evento:



El código de arriba escucha add Sucede y tiene una reacción con cambios de valor showSaveMsg llegar truey reaparece el mensaje.

Carga diferida / componentes asíncronos

La descarga aplazada se encuentra dentro de las tecnologías mucho más capaces en Vue.js que agrega componentes y los hace de manera asíncrona o bajo petición, lo que disminuye en buena medida el tamaño del archivo, el tiempo de contestación a las peticiones HTTP, etcétera.

La descarga aplazada es viable merced a la importación dinámica desde Webpack para poder y también admitir el desglose del código.

Vue.js deja la carga diferida de elementos, que se pueden llevar a cabo globalmente con el siguiente script:

import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));

Puede implementarlo de forma local usando los próximos elementos:



Componentes globales

Con componentes globales podemos poder una reutilización significativa en Vue.js, solo necesita registrar su ingrediente una vez y luego usarlo. en todas y cada una partes en la instancia de Vue.js.

Los elementos globales son una característica esencial. El registro individual de elementos cada vez puede ahorrar bastante tiempo, pero el registro mundial de todos y cada uno de los componentes es fácil de usar incorrectamente. El registro de todos los elementos en todo el mundo puede resultar de manera fácil en un tamaño de configuración demasiado grande, lo que transporta a una mala optimización del motor de búsqueda y tiempos de carga de página pausados.

Para asegurarse de registrar siempre elementos globales con muchos usos en un proyecto, siga estos pasos:

import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

Componente de archivo único

Entre las características más capaces de Vue.js son los elementos que le permiten prolongar la configuración básica de HTML, CSS y JavaScript para encapsular código reutilizable.

Los elementos tienen la posibilidad de contribuir a dividir proyectos enormes en piezas más pequeñas y reutilizables, y podemos extenderlas a todo el proyecto fomentando el principio DRY (no reiterar) del avance de programa.

Organiza y comprime enormes proyectos, el código se puede volver a usar y comunicar .vue documento.






El script anterior crea un ingrediente de botón personalizado que tenemos la posibilidad de volver a usar en nuestro emprendimiento. Cada ingrediente tiene su propio HTML, CSS y JavaScript.

prueba

Vue.js tiene entre las bibliotecas de prueba más poderosas, lo que facilita la utilización de Jest y Mocha para pruebas unitarias o pruebas de radical a extremo sin configuración.

Vale la pena investigar de forma rápida las pruebas efectuadas con estas herramientas. Conque veamos de qué forma instalar, disponer y probar el proyecto de demostración ahora.

Si está usando la herramienta CLI de Vue recomendada para configurar su proyecto, ejecute el siguiente comando:

vue add unit-jest //to run unit test with jest

npm install --save-dev @vue/test-utils

Cuando lo haya configurado, a continuación, añada el siguiente código para enseñarle de qué manera probar un ingrediente fácil:

// Import the `mount()` method from Vue Test Utils
import  mount  from '@vue/test-utils'

// The component to test
const MessageComponent = 
  template: '

message

', props: ['message'] test('displays a message', () => // mount() returns a wrapped Vue component we perro interact with const wrapper = mount(MessageComponent, propsData: msg: 'Welcome to our testing world' ) // Assert the rendered text of the component expect(wrapper.text()).toContain('Welcome to our testing world') )

La biblioteca de pruebas de Vue proporciona dos buenas opciones para probar elementos: Mount y Shallow.

Si desea probar componentes totalmente aislados, utilice shallow Método: De lo contrario, si necesita usar elementos para asegurar la comunicación con los componentes al manipularlos, entonces mount La opción marcha bien.

Potente herramienta Vue CLI

Vue CLI es una gran herramienta CLI que da una fuerte funcionalidad para todos y cada uno de los programadores de Vue. Esto le permite probar cada componente de manera rápida y también sin dependencia. Lo mejor de Vue CLI es que usted lleva a cabo y prueba un ingrediente de forma totalmente sin dependencia y aún tiene ingreso a una descarga activa iterando ese componente.

Para ilustrar, estamos instalando Vue CLI en el mundo entero:

npm install -g @vue/cli

Ahora, puede evaluar cada componente corriendo el próximo comando:

vue serve ./components/views/Home.vue

Para desmontar ciertas partes para compartirlas con sus colegas, puede hacer lo siguiente empleando el siguiente comando:

vue build --objetivo lib --name goldenRule ./components/views/Home

Vue CLI es muy eficiente. Si domina las habilidades para usarlo, puede ahorrar un buen tiempo de producción. Para más información, puede consultar los documentos oficiales.

Administración de artículos

El control de complementos es fundamental para los elementos de Vue pues se puede hacer de distintas formas. También puede verificar accesorios, hacer múltiples complementos y editarlos según sea necesario.

Si quiere hacer una nueva propiedad para un ingrediente de Vue, puede llevarlo a cabo de múltiples formas; asumiendo que tienes un ingrediente, debes crearlo isAdmin Pilar.

Observemos los diferentes métodos que puede emplear:



Es muy importante comprobar los complementos. Afortunadamente, esto asimismo es muy simple:

// ...

 // One
  props: 
    isAdmin: 
      default: false,
      required: true,
      validator: function(value) 
        return typeof === 'boolean';
      
    
  ,

// ...

Después de todo, cambiar los accesorios es tan fácil como regresar a cambiar sus valores:

//...

methods: 
  isAdmin() 
    this.isAdmin = true;
  


//..

Para detallar un valor para la propiedad del componente principal:

Representación del lado del servidor (SSR)

Con todas y cada una de las poderosas especificaciones y provecho de utilizar Vue.js en la construcción de interfaces de usuario, Vue.js todavía tiene una biblioteca cliente que solo detalla y manipula elementos DOM.

La representación del lado del servidor asiste para los marcos del lado del cliente, como Vue.js, a implementarlos mejor. Los rastreadores de los motores de búsqueda van a ver una página totalmente renderizada de su portal web mientras que se rastrea.

A fin de que Google plus y Bing rastreen su portal web mucho más veloz, su sitio web necesita más tiempo y mucho más rápido para difundir contenido. Esto puede asistirlo a renderizar en el lado del servidor Vue.js.

La renderización del lado del servidor (SSR) es una técnica popular para renderizar apps estándar del lado del cliente (SPA) de una sola página en un servidor y luego enviar una página completamente renderizada al lector.

Cuando la página se representa en el lado del servidor, se manda en contestación al cliente. Por ende, cuando el navegador muestra la página del motor de búsqueda, se muestra toda la información.

Es muy difícil para los principiantes llevar a cabo SSR en Vue.js. Nuxt.js es más fácil de utilizar pues tiene un SSR incorporado y una curva de aprendizaje bajísima.

más

Vue.js contiene muchas advertencias, fallos y tamaños del archivo de importante tamaño a lo largo del proceso de desarrollo, pero en el momento en que abre la producción para la implementación, estos inconvenientes desaparecen inmediatamente. Vue.js configura automáticamente las herramientas de creación de paquetes web, minimización, extracción y borrado de CSS, almacenamiento en caché, rastreo de fallos en tiempo de ejecución y más.

Vue.js hace que el proceso de implementación sea muy simple al modificar y configurar automáticamente el entorno de producción sin esfuerzo agregada para los desarrolladores.

Para habilitar Vue.js, lea la Guía general.

¿Entusiasmado en Vue.js 3? Guía Esta guía le enseña de qué forma implementar aplicaciones de IU potentes y escalables⬇️Haga click en el tweet

Generalizar

En el presente artículo, hemos discutido en detalle qué es Vue.js, por qué razón debería utilizarlo, sus inconvenientes y ventajas y 10 cosas que debería saber.

Aguardamos que haya mejorado su conocimiento de Vue.js para sugerir interfaces escalables y potentes.

¡Continúe codificando!

Si tiene alguna pregunta o sugerencia, esperamos tener noticias suyas. ¡Chatea con nosotros en la sección de comentarios a continuación!


Si le gusta este artículo, le encantará el ambiente de hospedaje de WordPress de Kinsta. Optimize su sitio web y obtenga soporte 24/7 de nuestro experimentado equipo de WordPress. Nuestra infraestructura impulsada por Google+ Cloud se centra en la escalabilidad, el rendimiento y la seguridad. ¡Le exponemos lo diferente que es Kinsta! Mira nuestro plan

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *