Frontend con Vue.js
Entre React, Angular y Vue, realmente trabajar con Vue.js es la opción más fácil. Estaba con duda de que camino seguir, pero mi primer Framework o Librería será Vue.js.
Fundamentos del Desarrollo Web Profesional
Frameworks JavaScript: React, Angular y Vue Desglosados
Creación y Reutilización de Componentes con JavaScript
Componentización de Menús Web Interactivos
Reactividad y Render en Frameworks de JavaScript
Diferencias entre Librerías y Frameworks en Desarrollo Web
Herramientas esenciales para empaquetar proyectos JavaScript con Webpack
Contexto y funcionamiento de los Frameworks JavaScript
Programación con React.js: Componentes y Hooks
Ciclo de vida de un componente en React
Desarrollo de Aplicaciones con React y Code Sandbox
Manejo de Estados en React con Hooks
Migración de AngularJS a Angular: Pasos y Buenas Prácticas
Angular: Maquetación Básica con Componentes y Directivas
Programación Reactiva con Vue.js: Crea tu Propio Mini Framework
Creación de apps web dinámicas con Vue.js en HTML
Desarrollo de Interfaces Web con Svelte
Creación de Aplicaciones con Svelte: Formularios y Arrays
Estilos con CSS, preprocesadores y CSS-in-JS
"CSS en JS: Estilos Dinámicos con JavaScript"
Estilos CSS Avanzados en Angular: Guía Práctica
Componentes Vue.js: Creación y Maquetación de Formularios
Estilos con SASS en Vue: Uso de Variables y Scope
Estilos dinámicos con Styled Components en React
Estilos Dinámicos Globales con Styled Components
Variables CSS y Emotion en Svelte: Estilos Dinámicos Avanzados
Cómo escalar sitios o aplicaciones web
Routing y Renderizado en Aplicaciones Web Modernas
Creación de rutas dinámicas con Next.js
Organización de carpetas en proyectos React: Componentes y Features
Selección de Frameworks y Librerías JavaScript: Ejemplos Prácticos
Frameworks JavaScript: Comparativa y Usos Prácticos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Creación de apps web dinámicas con Vue.js en HTML
14/28Recursos
¿Cómo crear un demo con Vue.js como librería?
Vue.js es una herramienta versátil que se puede emplear como framework completo o como una librería según las necesidades del proyecto. En esta guía, te llevaremos paso a paso por la creación de un demo donde incorporaremos Vue.js a tu HTML existente, añadiendo así contenido dinámico sin transformar completamente tu arquitectura. ¡Vamos a explorar cómo empezar con lo básico!
¿Cuál es el primer paso para integrar Vue.js a un HTML básico?
Iniciaremos trabajando en un archivo HTML básico mientras integramos Vue.js paulatinamente. Esto te permitirá transformar una porción de tu contenido en algo más interactivo. Sigue estos pasos iniciales:
-
Crea un archivo HTML: Abre tu editor de código preferido como Visual Studio Code o, para este tutorial, utilizaremos CodeSandbox para facilitar el proceso.
-
Incorpora Vue.js: En tu documento HTML, agrega una etiqueta
scriptdonde importes Vue.js desde una URL específica. Esto te permitirá tener Vue como una variable global accesible en tu código. -
Configura el entorno de Vue:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>Esta línea de código es crucial para empezar a trabajar con Vue.js.
¿Cómo crear y montar una aplicación básica usando Vue.js?
Después de importar Vue.js, el siguiente paso es crear una aplicación básica en Vue y montarla en un elemento del DOM:
-
Define el punto de montaje: Decide en qué parte de tu HTML quieres manejar tu aplicación Vue. Habitualmente, se utiliza un
divcon unid, por ejemplo:<div id="root"></div> -
Escribe el script de tu aplicación: Añade un segundo script en tu HTML después de haber importado Vue.js. Usa la opción
createApppara inicializar tu aplicación y el métodomountpara conectarlo con eldivdefinido:const app = Vue.createApp({}); app.mount('#root');
¿Cómo añadir contenido dinámico?
Uno de los puntos fuertes de Vue.js es la capacidad de asociar dinámicamente datos a través de estructuras reactivas. A continuación, se detalla cómo puedes comenzar:
-
Estructura de datos reactiva: En el script de la aplicación, define un método
dataque devuelva un objeto con tus variables dinámicas.const app = Vue.createApp({ data() { return { movies: [ { name: "Avengers", quantity: 0, available: 3 }, { name: "Terminator", quantity: 0, available: 5 }, ] }; } }); -
Listando dinámicamente elementos: Usa atributos especiales de Vue como
v-forpara iterar sobre la lista de películas y mostrar el contenido:<div v-for="movie in movies"> <h3>{{ movie.name }}</h3> <button type="button" @click="movie.quantity--" :disabled="movie.quantity <= 0">-</button> {{ movie.quantity }} <button type="button" @click="movie.quantity++" :disabled="movie.quantity >= movie.available">+</button> </div> -
Interactividad con botones: Usa
v-ono su versión abreviada@para manejar eventos como clics. Estas características permiten modificar propiedades comoquantitymediante estos controles dinámicos.
¿Cómo asegurar validaciones y restricciones?
Vue.js facilita la adición de lógicas de validación directamente en la presentación mediante atributos HTML:
-
Deshabilitar botones: Emplea condiciones con
v-bindo:para determinar cuándo un botón debe estar deshabilitado:<button :disabled="movie.quantity <= 0">...</button> <button :disabled="movie.quantity >= movie.available">...</button>
Con estos pasos, has aprendido a combinar Vue.js como una librería dentro de un simple archivo HTML para ir añadiendo interactividad de forma incremental y efectiva. ¡Sigue explorando nuevas formas de reutilizar componentes en tu desarrollo y experimenta cómo Vue.js puede transformar tus proyectos de formas creativas y eficientes!
Aportes 31
Preguntas 1
Ordenar por:
Array con la informacion de las peliculas
[
{
name: "Avengers",
available: 3,
quantity: 0,
},
{
name: "Terminator",
available: 5,
quantity: 0,
},
]
Realmente vue se ve más sencillo.
Primero es tener bases de Javascript bien solidad.
Despues ir por Vue y Svelte
Finalmente podemos pasar a React y Angular.
Pum! Super Frontend Developer
Qué belleza de framework! Yo 💚 a VueJs!
url del proyecto https://unpkg.com/[email protected]/dist/vue.global.js
Les recomiendo la documentación oficial de VueJS, ahí explican mejor como puedes hacer cositas interesantes como esta
Platzi debería tener un modo cine como YouTube 🤘
Personalmente me fascina vue. Todas sus características me encanta. Inicie un proyecto personal tal cual como lo hacen el el vídeo con el cdn de vue para una pantalla que en ese momento era muy compleja con vanilla js, luego ingresé a una empresa y trabaje mucho con un proyecto con vue como framework y ahora estoy trabajando de nuevo en mi proyecto personal con nuxtjs la alternativa de vue para ssr. Lo mejor es que pude copiar y pegar el código que hice con la librería de vue y funcionó sin mayor problema. Ahora la página carga en 2.5s y tiene un 97 en móvil en Google speed test. Muchachos no duden en iniciar o volverse expertos en vue es muy bueno excelente experiencia desarrollando y excelente resultados. Creo que indirectamente los vídeos demuestran la experiencia de desarrollo.
*Vue*: 9min
*React*: 13min
*Angular*: 16min
el v-on se puede remplazar por @
así como el v-bin en :
Está muy bien Vue, ahora no se cual empezar a aprender primero, si vue o React. Angular me pareció un poco más complejo pero no mucho, aunque si preferiría empezar con alguno más simple para que los conceptos me queden más claros.
Angular, Vue y React tienen sus peculiaridades; sin embargo, yo empecé con React y debo ser sincero, a mi si me gusta combinar el HTML con JS en un mismo componente, lo que muchos califican de que el código se ve sucio jejeje
Wow Vue se ve mas sencillito, me gusto mucho
Joder, me parece super hermoso Vue, siento que ha sido amor a primer código 😍
Codigo final de la clase:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="root">
<h2>Películas</h2>
<form v-for="movie in movies">
<h3>{{movie.name}}</h3>
<button
type="button"
@click="movie.quantity -=1"
:disabled="movie.quantity<=0"
>
-
</button>
{{movie.quantity}}
<button
type="button"
@click="movie.quantity +=1"
:disabled="movie.quantity>=movie.available"
>
+
</button>
</form>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
movies: [
{
name: "Avenger",
available: 5,
quantity: 0
},
{
name: "Terminator",
available: 3,
quantity: 0
}
]
};
}
});
app.mount("#root");
</script>
</body>
</html>
me impresiona lo fácil que es Vue, creo que voy a darle una oportunidad
Me encanta Vue, totalmente recomendable como tu primer gran framework de Js
Vue.js para mi, es el mejor framework para empezar en el mundo front-end
Puedo leer que hay mucho amor por Vue.js, realmente me parece el framework con menor curva de aprendizaje. Aprendamos Vue.js!
Que bonito es Vue 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
</head>
<body>
<div id="root">
<h2>Peliculas</h2>
<form v-for="movie in movies">
<h3>{{movie.name}}</h3>
<button
type="button"
v-on:click="movie.quantity--"
v-bind:disabled="movie.quantity <= 0"
>
-
</button>
{{movie.quantity}}
<button
type="button"
v-on:click="movie.quantity++"
v-bind:disabled="!(movie.quantity < movie.available)"
>
+
</button>
</form>
</div>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
movies: [
{ name: "Avengers", available: 5, quantity: 0 },
{ name: "Wonder Woman", available: 15, quantity: 0 }
]
};
}
});
app.mount("#root");
</script>
</body>
</html>
De verdad que Vue.js es comparativa más fácil (al menos para iniciar un proyecto pequeño) que React o Angular, me está como tentando este que los anteriores…
Yo me adelante un poco en el video, haciéndolo con la sintaxis que leí en la documentación , y quedo así:
<form v-for="movie in movies">
<h3>{{ movie.name }}</h3>
<button
@click="movie.quantity -=1"
type="button"
:disabled="movie.quantity <= 0"
>
-
</button>
{{ movie.quantity }}
<button
@click="movie.quantity +=1"
type="button"
:disabled="movie.quantity >= movie.available"
>
+
</button>
</form>
vue es la sencillez y potencia en la misma pildora
wtf que simple y sencillo es vue, que bonito
con vue se tardo menos 😮
Con este video me decido por vue.js es mucho más sencillo que angular
Me encanto como se hace desde Vue JS y eso que solo fue como libreria me quede con ganas de ver como se hace como Framework creo que me voy por Vue JS para JavaScript
Creo que es la forma más sencilla de empezar a trabajar con librerías porque se parece más a lo que haces iniciando en HTML y Javascript. Con el trasfondo del curso de web components creería que es la forma más sencilla
Que bonito es lo bonito!!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?