Capítulo anterior

Capítulo siguiente

Frontend Aprendiz

Options API y Composition API

Vue.js nos ofrece 2 estilos distintos para definir nuestros components. Veamos de manera general cuál es la diferencia, y qué estilos están disponibles según la versión de Vue.

¡Comparte conocimiento!

Volver al índice

Regístrate

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

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code

Git y GitHub

Vite y modo desarrollo

Interface

Union

Union Literals

Function Greeting

Array & Generic

Una Interface no es una Class

Una Class puede implementar una Interface

Visión general

Páginas (rutas)

Introducción a Vuetify

Probar Vuetify rápidamente

Entendiendo proyecto base

Options API y Composition API

Options API: Estado

Template: Eventos

Options API: Métodos

Options API: Hooks

Tarea y nuevo componente

Composition API: Estado

Composition API: Funciones

Composition API: Hooks

Options API vs Composition API

Push changes

Directivas v-if y v-else

Directiva v-for

Componente hijo: ProductCard

Props: De padre a hijo

PropType

Un botón sobre cada card

Events: De hijo a padre

Shorthands

Event naming convention

CartDetail: Comunicación entre hermanos

Aumentar cantidad o agregar detalle

Install & use

Dark & light theme

Grid system

Card: Title & Actions

Props, Slots & Markup

Chip & Spacing

Container

List

Repaso e Introducción

Configuración y Ruta /cart

Organizar components

Vuetify: App Bar & App Main

Custom Router Links

Vuetify: Container

AboutView

Mismo componente distinto estado & Vue Extension

Props y Events no son suficientes

Pinia vs Vuex

Pinia: Preguntas y Respuestas

Store: State, Getters & Actions

Store: Options & Composition API

Define Store: Cart

Computed Properties

Cómo usar nuestro Store

Cleanup y cómo ejecutar Store actions

CategoryList & type Category

Badge: Cantidad de items en el carrito

Nuevo componente para nuestro v-app-bar

Getter: Cart items count

Ocultar badge y asignar color

Detalle: Aumentar y disminuir unidades

Detalle: Eliminar producto

Invocar una acción desde otra

Carrito vacío: Mensaje y RouterLink

Active button e Identificar ruta activa

Vuetify Icons

Button: Size & Icon

ESLint

Refactor: CartDetail & Product

mapActions

mapState

Product image & URL

Local images

Refactor: ShoppingCartItem

Refactor: VList to VTable

Resumen de la compra & Total

Screen readers

Logo: avatar & img

Relación: Product & Category

Category route & Programmatic navigation

Navigation Guards

Products Store

Filtrar por categoría

Función externa

Opción: Todas las categorías

VList: Active Category Item

VList: Subheader

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

Options API y Composition API

Antes que te vayas