Necesitas un pase para acceder ⚡

Esta lección está disponible únicamente para usuarios premium.

Regístrate o ingresa a tu cuenta para continuar aprendiendo:

Frontend Aprendiz

Product image & URL

En esta lección agregamos imágenes para nuestros productos, adaptando nuestro type y componentes.

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

01

Introducción al curso

02

Probar Vue rápidamente

03

Crear nuevo proyecto

04

IDE y extensiones

05

Instalar Visual Studio Code

06

Git y GitHub

07

Vite y modo desarrollo

08

Interface

09

Union

10

Union Literals

11

Function Greeting

12

Array & Generic

13

Una Interface no es una Class

14

Una Class puede implementar una Interface

15

Visión general

16

Páginas (rutas)

17

Introducción a Vuetify

18

Probar Vuetify rápidamente

19

Entendiendo proyecto base

20

Options API y Composition API

21

Options API: Estado

22

Template: Eventos

23

Options API: Métodos

24

Options API: Hooks

25

Tarea y nuevo componente

26

Composition API: Estado

27

Composition API: Funciones

28

Composition API: Hooks

29

Options API vs Composition API

30

Push changes

31

Directivas v-if y v-else

32

Directiva v-for

33

Componente hijo: ProductCard

34

Props: De padre a hijo

35

PropType

36

Un botón sobre cada card

37

Events: De hijo a padre

38

Shorthands

39

Event naming convention

40

CartDetail: Comunicación entre hermanos

41

Aumentar cantidad o agregar detalle

42

Install & use

43

Dark & light theme

44

Grid system

45

Card: Title & Actions

46

Props, Slots & Markup

47

Chip & Spacing

48

Container

49

List

50

Repaso e Introducción

51

Configuración y Ruta /cart

52

Organizar components

53

Vuetify: App Bar & App Main

54

Custom Router Links

55

Vuetify: Container

56

AboutView

57

Mismo componente distinto estado & Vue Extension

58

Props y Events no son suficientes

59

Pinia vs Vuex

60

Pinia: Preguntas y Respuestas

61

Store: State, Getters & Actions

62

Store: Options & Composition API

63

Define Store: Cart

64

Computed Properties

65

Cómo usar nuestro Store

66

Cleanup y cómo ejecutar Store actions

67

CategoryList & type Category

68

Badge: Cantidad de items en el carrito

69

Nuevo componente para nuestro v-app-bar

70

Getter: Cart items count

71

Ocultar badge y asignar color

72

Detalle: Aumentar y disminuir unidades

73

Detalle: Eliminar producto

74

Invocar una acción desde otra

75

Carrito vacío: Mensaje y RouterLink

76

Active button e Identificar ruta activa

77

Vuetify Icons

78

Button: Size & Icon

79

ESLint

80

Refactor: CartDetail & Product

81

mapActions

82

mapState

83

Product image & URL

84

Local images

85

Refactor: ShoppingCartItem

86

Refactor: VList to VTable

87

Resumen de la compra & Total

88

Screen readers

89

Logo: avatar & img

90

Relación: Product & Category

91

Category route & Programmatic navigation

92

Navigation Guards

93

Products Store

94

Filtrar por categoría

95

Función externa

96

Opción: Todas las categorías

97

VList: Active Category Item

98

VList: Subheader

99

State: Order

100

Order by price & name

101

VList: Active Order Item

102

4 criterios de orden

103

Define Store: Categories

104

Componente: CategoryOptions

105

Intro: Responsabilidades

106

Move data to JSON files

107

Import JSON data

108

Comando npm run build

109

Comando npm run preview

110

Network Waterfall

111

Importancia & Fetch Products

112

Fetch Categories

113

Delay: setTimeout

114

Vuetify Labs: VSkeleton

115

Progreso lineal y circular

116

Pasos siguientes: API & Promises

117

Persistencia de datos & Local Storage

118

VueUse & Persistir nuestro carrito

119

WhatsApp API

120

Enviar orden con detalles del carrito

121

Responsive Grid system

122

Responsive Visibility & Spacing

123

Recapitulación & Despedida
Imagen de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript

Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript

Curso gratuito de Laravel

Antes que te vayas

Inscríbete en nuestro curso gratuito de Laravel