Nombre del alumno: Gamaliel Gonzalez campanilla.

Nombre del maestro: Ramon Arturo Morales Sánchez

Tema: investigación de Vue.js

Grado y grupo: “7A”

Fecha: 20 de octubre del 2022

¿Qué es vue.js?
Es un framework progresivo JavaScript para crear
interfaces de usuario, o, en otras palabras, se trata de una
capa añadida a JavaScript formada por herramientas,
convenciones de trabajo y un lenguaje particular que nos
permite crear aplicaciones de forma rápida, agradable,
sencilla y muy práctica.
La palabra Vue (pronunciado «viú») viene del francés y
significa «view» (vista), que es como se le denomina a la
parte visual del modelo MVC, parte en la que se centran
estos frameworks.
Características de vue.
• La curva de aprendizaje es, con diferencia, la más
sencilla de los tres frameworks más populares: React,
Vue y Angular.

• Se trata de un framework muy amigable y respetuoso

con las tecnologías de frontend y los estándares.
Utiliza HTML, CSS y JavaScript y es compatible con
WebComponents (de hecho, sus componentes se
basan en ellos). Si eres desarrollador con base fuerte
de HTML/CSS, muy probablemente te guste más Vue
que otras opciones.

• Se trata de un framework progresivo. Esto significa

que es ideal para migrar y adaptar proyectos
existentes hechos en otras tecnologías y pasarlos poco
a poco a Vue. Algo muy común cuando trabajas en
proyectos legacy (la mayoría de los casos).

• A los desarrolladores que provienen de lenguajes o

frameworks exclusivamente de backend están
acostumbrados a ciertos patrones de programación
que no son exactamente iguales en frontend. Es
aconsejable aprender ciertas bases de frontend
general. Una buena base de JavaScript también es muy
recomendable.
• Vue le da mayor protagonismo al enfoque tradicional
«centrado en HTML» así como a los sistemas de
plantillas. Si te gustan, Vue probablemente te resulte
muy atractivo. Por otro lado, el enfoque de React se
suele centrar más en programación pura en JavaScript,
utilizando HTML y CSS sólo como complementos que
se añaden a JavaScript.

• Estas son algunas de las características principales que

creo que pueden hacer decantarte por un
framework/librería u otro, dependiendo fuertemente
de tus particularidades como desarrollador y la
finalidad de tu proyecto.
Métodos de Renderización Condicional v-for.
Con la directiva v-for podemos iterar varios tipos de datos
(en general cualquiera que sea iterable), pero si los
esquematizamos tenemos los siguientes, los cuales cada
uno tiene ciertas particularidades. Iteramos por cada uno
de los elementos del array. Iteramos por cada una de las
propiedades del objeto.
Método ¿Cómo usar el V-if?
El v-if se puede aplicar a cualquier elemento HTML, es decir,
lo puedes poner en un h1 o en un img o incluso dentro de
la etiqueta de otro componente: <mi-componente v-
if="condition">. En este componente solo se mostrará el
mensaje del medio. En este ejemplo he creado una lista
dentro del data.

En este caso como el valor de la variable condition lo hemos

establecido a falso, el primer mensaje no se mostrará, en
cambio el segundo valor si que se mostrará. El v-if se puede
aplicar a cualquier elemento html, es decir, lo puedes poner
en un h1 o en un img o incluso dentro de la etiqueta de otro
componente: <mi-componente v-if="condition">.
Modificadores de v-model
Cuando usas el v-model también puedes usar una serie de
modificadores que cambian el comportamiento del v-
model.

Posibles modificadores:

lazy: Con lazy la actualización de la variable en lugar de

ocurrir dentro del evento input se hace en el evento change
de Javascript, lo que hace que sea un poco más rápido para
actualizaciones muy rápidas.
number: El valor se guardará en la variable como un
número en lugar de string haciendo un parseo con
parseFloat.
trim: Al guardar el valor de la variable se pasará antes por
la función de trim para quitar espacios antes y después del
string.
Para usar un modificador solo tienes que poner un punto y
el modificador que quieras tras el v-model, por ejemplo: