VUE.
JS
QUE ES [Link]
●Vue (pronunciado / vjuː /, como vista )
es un marco progresivo para construir
interfaces de usuario. A diferencia de
otros marcos monolíticos, Vue está
diseñado desde cero para ser
adoptable gradualmente. La biblioteca
principal se centra solo en la capa de
vista y es fácil de recoger e integrar
con otras bibliotecas o proyectos
existentes. Por otro lado, Vue también
es perfectamente capaz de impulsar
aplicaciones sofisticadas de una sola
página cuando se usa en combinación
con herramientas modernas y
bibliotecas de soporte .
INSTALACIÓN
Nota de compatibilidad
Vue no es compatible con IE8 y versiones anteriores, porque utiliza las funciones de ECMAScript 5
que no se pueden cambiar en IE8. Sin embargo, es compatible con todos los navegadores compatibles con ECMAScript 5 .
Control de versiones semántico
Vue sigue el control de versiones semántico en todos sus proyectos oficiales para obtener características y comportamientos documentados.
Para el comportamiento indocumentado o partes internas expuestas, los cambios se describen en las notas de la versión .
Notas de lanzamiento
Última versión estable: 2.6.12
Las notas de lanzamiento detalladas para cada versión están disponibles en GitHub .
Vue Devtools
Al usar Vue, recomendamos también instalar Vue Devtools en su navegador, lo que le permite inspeccionar y depurar
sus aplicaciones Vue en una interfaz más fácil de usar.
Requisitos [Link]
Requisito de versión de nodo
Vue CLI 4.x requiere [Link] versión 8.9 o superior (se recomienda v10 +).
Puede administrar múltiples versiones de Node
en la misma máquina con n , nvm o nvm-windows .
Como [Link] v8 ha llegado al final de su vida útil, ahora se recomienda usar [Link] v10 +
para obtener la mejor compatibilidad.
Si tiene que permanecer con [Link] v8, asegúrese de que npm v6 se utilice como administrador de paquetes predeterminado.
( npm -vpara comprobar la versión y vue config --set packageManager npmconfigurar el administrador de paquetes predeterminado).
CDN
Para fines de creación de prototipos o aprendizaje, puede utilizar la última versión con:
<script
src="[Link]
NPM
NPM es el método de instalación recomendado al crear aplicaciones a gran
escala con Vue. Se combina muy bien con paquetes de módulos
como Webpack o Browserify . Vue también proporciona herramientas
complementarias para la creación de componentes de archivo único .
ATRIBUTOS DINÁMICOS
Todos los atributos HTML que conoces son estáticos. Hasta ahora.
¿Qué te parecería poder convertirlos en dinámicos,
para que en lugar de ver una simple string pudiesen evaluar ese texto
como una expresión e interpolar su valor?.
BUCLES CON V-FOR
Una directiva [Link] es bucle en html que atraviesa matrices y
objetos.
<li v-for= “tarea in tareas”>{{[Link]}}</li>
V-MODEL
La directiva v-model ayuda asociar el campo de un
formulario de html, cada vez que valor cambia [Link] lo
actualiza
NOVEDADES DE VUE3
Todas las novedades son aditivas, no hay cambios que
puedan romper aplicaciones con Vue2
NOVEDADES DE VUE3
Muchas de las Funcionalidades [Link] están centradas en
mayor velocidad, reutilización de código y mejor soporte
TypeScript.
NOVEDADES DE VUE3
Composition Api
Es la nueva alternativa a la tradicional
(data,methods,computed, watcg entre otras) en forma de
escribir los componentes.
• REACTJS ES UNA LIBRERÍA JAVASCRIPT DESARROLLADA
POR FACEBOOK Y DISEÑADA PARA AYUDARNOS A
CREAR SPA (SINGLE PAGE APPLICATION), SU OBJETIVO
CONCRETAMENTE ES TRATAR DE FACILITAR LA TAREA
DE DESARROLLAR INTERFACES DE USUARIO. PODRÍAMOS DECIR
QUE REACT ES LA V EN UN CONTEXTO EN EL QUE SE USE
EL PATRÓN MVC.
•
•
REACT VS VUE
React adopta el formato JSX, donde HTML está escrito en JavaScript. Aunque JSX está en línea con la
programación funcional, que es un concepto bastante ordenado, los desarrolladores tienen la
responsabilidad de descubrir este nuevo enfoque.
React es delgado en su esencia y depende en gran medida de otros componentes de terceros para
un uso efectivo. Esto también podría ser un problema para los desarrolladores, ya que necesitan
captar mucha información solo para hacer las cosas.
Si bien la documentación de React es buena, la documentación de Vue se considera en gran
medida mejor.
Vue es más fácil de aprender en comparación con React. Vue separa las preocupaciones de una
manera a la que los desarrolladores web ya están acostumbrados, desacoplando HTML, CSS y
JavaScript. También permite el uso de JSX, para desarrolladores que quieran adoptar ese estilo.
Vue también es más fácil de acostumbrar porque seleccionó las partes buenas de React y
Angular . Por lo tanto, es más fácil para los desarrolladores de cualquiera de los dos orígenes
adaptarse perfectamente.
La documentación de Vue también está muy bien escrita e intenta responder la mayoría (si no todas)
las preguntas que puedan surgir.
El código CSS para ambas aplicaciones es exactamente el mismo,
pero hay diferencias en el lugar donde se encuentran. Con eso en
mente, veamos a continuación la estructura de archivos de ambas
aplicaciones
¿Cómo creamos nuevos items en nuestra
aplicación de tareas?
REACT:
En React, nuestro campo de entrada tiene un atributo
createNewToDoItem = () => { llamado Value (Valor). Este valor se actualiza
[Link]( ({ list, todo }) => ({ automáticamente mediante el uso de un par de funciones
list: [ que se unen para crear algo que se parece mucho a la
...list, vinculación bidireccional two-way binding. Creamos esta
{ forma de enlace bidireccional al tener un onChange event
todo listener (detector de eventos onChange) adicional adjunto
} al input (campo de entrada)
],
todo: ''
}) <input type="text"
); value={[Link]}
}; onChange={[Link]}/>
¿Cómo creamos nuevos items en nuestra
aplicación de tareas?
VUE:
En Vue, nuestro input (campo de entrada) tiene un
createNewToDoItem() { controlador llamado v-model. Esto nos permite hacer
[Link]( algo conocido como two-way binding enlace
{ bidireccional
'todo': [Link]
}
); <input type="text" v-model="todo"/>
[Link] = '';
}
