Ya que andamos coquetos con este Framework, les comparto un enlace a las buenas prácticas de VueJS, conforme vayamos avanzando, iremos upgradeando el código y es fácil caer en el lado oscuro.
Introducción: fundamentos de Vue.js
¿Cómo convertirte en frontend developer con Vue.js?
La magia de aprender JavaScript
¿Qué es Vue.js? Frameworks, librerías y componentes
Declarative rendering con JavaScript
Declarative rendering con Vue.js
Reactividad a profundidad
¿Qué es la reactividad?
¿Qué es un Proxy?
Crea tu propio miniframework: MiniVue
Implementando un Proxy en MiniVue
Implementando Reflect en MiniVue
Reactividad con effect, track y trigger
Implementando effect, track y trigger en MiniVue
Templates de Vue.js
Disclaimer sobre los Templates
Proyecto: PlatziCommerce con Vue.js
Expresiones
Atributos
Conditional rendering
List rendering
Event handling
APIs internas de Vue.js
Options API vs. Composition API
data() y ref()
Métodos personalizados con Options API
Métodos personalizados con Composition API
reactive()
Segunda capa: componentes de Vue.js
Componentes de Vue con Options API
Componentes de Vue con Composition API y props
Reto con componentes
Custom events o eventos personalizados con Options API
Custom events o eventos personalizados con Composition API
Watchers con Options API
Watchers con Composition API
Computed properties con Options API
Computed properties con Composition API
Ciclos de vida de un componente
Ciclos de vida de un componente: Composition API
Siguientes pasos
Continúa tu ruta de aprendizaje profesional con Vue.js
Siguientes pasos con Vue.js
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Expresiones
15/37Recursos
Aportes 5
Preguntas 3
Ordenar por:
Interesante, no sabía lo del guion bajo en los números de JavaScript 🤔
.
Espero que esto no sea un spoiler pero… Para no llenar nuestro código HTML de expresiones y hacer código ilegible, lo mejor es poner esto dentro de propiedades computadas, así separamos lógica de vista:
computed: {
price() {
return new Intl.NumberFormat("es-MX").format(this.product.price)
}
}
Claro, aquí usamos el precio directamente, también podríamos usar un método que retorne el precio 👀:
methods: {
price(price) {
return new Intl.NumberFormat("es-MX").format(price)
}
}
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/8f78564f230a49e085bb406f8d866cade4cc65c3
si estas en Windows y usas VSCode con las teclas “windows + punto” se te abre la ventanita de emojis .
{{}} interpolacion
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.