Curso Básico de Vue.js 2

Clases del Curso Básico de Vue.js 2

Instruido por:
Ignacio Anaya
Ignacio Anaya
Básico
5 horas de contenido
Ver la ruta de aprendizaje
Platzi Exchange
Proyecto del curso
Platzi Exchange

Platzi Exchange es una plataforma que te servirá para visualizar todas las criptomonedas y sus valores en tiempo real utilizando las ventajas de Vue.js un framework para desarrollar sitios web reactivos y basados en componentes muy utilizado en el mundo del desarrollo web

Curso Básico de Vue.js 2

Curso Básico de Vue.js 2

Progreso del curso:0/38contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/38contenidos(0%)

Introducción

Material Thumbnail

Qué aprenderás sobre Vue.js 2

01:17 min

Material Thumbnail

El Framework Progresivo

03:15 min

Material Thumbnail

¡Hola Vue!

08:41 min

Rendering Declarativo y Manipulación de DOM

Material Thumbnail

Introducción al Rendering Declarativo

02:09 min

Material Thumbnail

Expresiones y Propiedades

02:06 min

Material Thumbnail

Atributos Dinámicos

06:44 min

Material Thumbnail

Control de Flujo con Directivas

05:02 min

Material Thumbnail

Renderizado de Listas

05:48 min

Material Thumbnail

Manejo de Eventos

07:04 min

Material Thumbnail

Clases en tiempo real

06:46 min

Material Thumbnail

Estilos en tiempo real

02:49 min

Material Thumbnail

Computed Properties y Watchers

05:42 min

Material Thumbnail

Two-Way Data Binding

03:34 min

Ejercicios de práctica

00:45 min

Sistema de Componentes

Material Thumbnail

Sistema de Componentes

02:54 min

Material Thumbnail

Crear Componentes Custom

06:44 min

Material Thumbnail

Comunicación entre Componentes: propiedades

17:28 min

Material Thumbnail

Comunicación entre Componentes: eventos

06:17 min

Material Thumbnail

Ciclo de Vida y Hooks

03:40 min

Material Thumbnail

Antes de continuar, ¡un repaso!

01:23 min

Ejercicios de práctica

00:44 min

Ambiente de Desarrollo

Material Thumbnail

VS Code + Vetur / Chrome / Firefox + Dev Tools

06:26 min

Material Thumbnail

Qué es, cómo usarlo y aplicaciones profesionales con el CLI

05:28 min

Material Thumbnail

Single File Components

07:36 min

Material Thumbnail

Funcionalidades, UI y comandos básicos

05:46 min

Platzi Exchange

Material Thumbnail

Introducción y Setup de Tailwind CSS

06:40 min

Material Thumbnail

Primeros Componentes

12:02 min

Material Thumbnail

Introducción y Setup de Vue Router

15:37 min

Material Thumbnail

Introducción a Fetch y API de Coincap

15:45 min

Material Thumbnail

Mejorar la UI con filtros

09:33 min

Material Thumbnail

Navegación Programática

12:23 min

Material Thumbnail

Utilizar componentes de terceros

12:01 min

Material Thumbnail

Problemas de Reactividad

17:44 min

Material Thumbnail

Mejorar proyecto: filtros y ordenar

11:25 min

Material Thumbnail

Mejorar proyecto: links y conversión

13:38 min

¡A producción!

Material Thumbnail

Despliegue de la app a Netlify

05:37 min

nuevosmás votadossin responder
Fabián Andrés Pacherres Bautista
Fabián Andrés Pacherres Bautista
Estudiante

en mi data yo inicializo mi isLoading en true

data(){
    return {
      isLoading: true,
      assets: [],
    }
  },
created(){
    // ya no el this.isLoading = true
    api.getApi()
      .then(assets => (this.assets = assets))
      .finally(()=> this.isLoading = false)
  },

si bien me ahorro una línea de código, cual sería la diferencia de hacer lo que hice, el resultado es el mismo

1
Juan Barreto
Juan Barreto
Estudiante

Hey! como se llama el tema de oh my zsh que tiene instalado?

1
webrevolution
webrevolution
Estudiante

Hay algun parametro para crear componentes?

1
webrevolution
webrevolution
Estudiante

Cuales son los objetos predefinidos de VueJs?

1
webrevolution
webrevolution
Estudiante

Cuantos tipos de ternaries hay?

2
Juan Barreto
Juan Barreto
Estudiante

Como inserto emojin en vscode desde ubuntu?

0
Luis Anderson Rujeles Franco
Luis Anderson Rujeles Franco
Estudiante

Buen dia, he intentado hacer el deploy pero al terminar me sale page not found, alguien me podria colaborar, ya agregue los redirects

1
Dragonatak
Dragonatak
Estudiante

A alguien le pasó??? El proyecto no me identifica como un proyecto de Vue, y no me pinta la tabla… Ya corregí los errores de Lint, pero nada

Incluso planché el código con el que viene en los recursos y no me corre =(

Captura de Pantalla 2021-06-14 a la(s) 12.21.41.png
0
David Omar Cabrera Bernal
David Omar Cabrera Bernal
Estudiante

¿Alguien ha tenido problema instalando los spinners ? Intente instalar los del video, pero no me lo permitio, entonces busque otras alternativas como epic-spinners, pero tampoco me permite instalarlos, y en todos los que halle me detona el mismo error.
1.png

0
David Omar Cabrera Bernal
David Omar Cabrera Bernal
Estudiante

A alguien le ocurre esto?
Estando en el coin detail, decido regresarme al home, se queda el componente de detalle cargado, y no veo el porqué ocurre.

1.png
2.png

Este es mi código:

Router.js

import { createWebHistory, createRouter} from'vue-router'import Home from'@/views/Home'import About from'@/views/About'import Error from'@/views/Error'import CoinDetail from'@/views/CoinDetail'

const history = createWebHistory();

export default createRouter({
    history,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'About',
            component: About
        },
        {
            path: '/coin/:id',
            name: 'coin-detail',
            component: CoinDetail
        },
        {
            path: '/:catchAll(.*)',
            name: 'Error',
            component: Error
        }
    ]
})

App:

<template><main><px-header/><router-viewclass="container px-5 sm:px-10 py-10 flex justify-center" /></main></template><script>import PxHeader from'@/components/PxHeader';

exportdefault {
  name: 'App',
  components: { 
    PxHeader
  }
}
</script><style>#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
1