Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
En esta lección agregamos rápidamente un diseño a nuestra vista About, y demostramos que un SFC puede funcionar sólo con una etiqueta template.
Ahora vamos a agregar una página de "about". ¿Cómo podemos hacer ello?
Simplemente nos dirigimos a AboutView
y aquí podemos hacer uso de un v.card
.
Ya hemos trabajado anteriormente con v.card
. Por ejemplo, hemos definido card
para nuestros productos.
Aprovechemos que estamos aquí para corregir la ubicación de nuestro archivo de tipos.
Aquí vemos un ejemplo:
Aquí tenemos nuestro v.card
que contiene un v-card-title
, que contiene un v-card-text
, y que contiene v-card-actions
.
Entonces, vamos a seguir la misma idea:
v-card-text
contendrá cualquier información que tú quieras agregar.Como puedes ver, un componente de Vue no necesita de una etiqueta script
.
A veces vamos a tener componentes sencillos que simplemente van a representar una vista sin la necesidad de agregar alguna funcionalidad especial.
Entonces tenemos home
, tenemos cart
y tenemos about
.
La pregunta ahora es, ¿cómo podemos desplazar nuestro carrito hacia una ruta distinta?
Veamos ello en la lección siguiente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Ahora vamos a agregar una página de "about". ¿Cómo podemos hacer ello? Simplemente nos dirigimos a "AboutView" y aquí podemos hacer uso de un "v.card". Ya hemos trabajado anteriormente con "v.card". Por ejemplo, hemos definido "card" para nuestros productos. Aprovechemos que estamos aquí para corregir la ubicación de nuestro archivo de tipos. Aquí vemos un ejemplo. Aquí tenemos nuestro "v.card" que contiene un "v-card-title" que contiene un "v-card-text" y que contiene "v-card-actions". Entonces vamos a seguir la misma idea "Acerca de esta tienda", será nuestro título y "v-card-text", contendrá cualquier información que tú quieras agregar. Por ejemplo, aquí puedes poner tus datos de contacto y alguna descripción breve acerca de la tienda. Como puedes ver, un componente de vue no necesita de un etiqueta script. A veces vamos a tener componentes sencillos que simplemente van a representar una vista sin la necesidad de agregarle alguna funcionalidad especial. Entonces tenemos "home", tenemos "cart" y tenemos "about". La pregunta ahora es, ¿Cómo podemos desplazar nuestro carrito hacia una ruta distinta? Veamos ello en la lección siguiente.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.