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

List

Veamos cómo usar el componente v-list que nos ofrece Vuetify, para listar los detalles de nuestro carrito de compras.

¡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