Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

AboutView

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.

Agregar una Página de "About"

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.
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 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 pregunta

¡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