Expresiones

Clase 15 de 37 • Curso de Reactividad con Vue.js 3

Emmanuel Rodríguez

student•

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.

Alejandro Vega Meneses

student•

Gracias! Si nos va a hacer falta para cuando estemos un poco más avanzados

Carlos Eduardo Gomez García

teacher•

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

Kenny Lazo

student•

si estas en Windows y usas VSCode con las teclas "windows + punto" se te abre la ventanita de emojis .

Omar Jesus Hernández Bastos

student•

Excelente trucazo

Sebastián Buitrago

student•

Ese truco funciona en cualquier lugar donde vayas a poner texto asi sea un word o buscando en google

André Michel Andy Pozos

student•

Nota: lo de los separadores numéricos fue aceptado apenas en 2020, así que hay que usar esta característica con cuidado. Más información aquí y aquí.

Javier Andrés Moreno Tocarruncho

student•

Hola para evitar esto que se muestra cuando se recarga la página ...

Es decir, que se muestran los mustache templates; existe una directiva v-cloak para evitar este comportamiento.

Fabian Oswaldo Hernandez Murcia

student•

SI quisiera traer un listado de productos de un back (php) o json, puedo hacer un ajax antes donde reciba los datos de los productos, y decir por ejemplo: products:resultado ?

Cesar Bautista Mejia

student•

¿Necesita algo como esto? JS Front

	$.get("archivo.php", function(data, status){
		data = JSON.parse(data);
	});

PHP Back

echo json_encode($body);

Fabian Oswaldo Hernandez Murcia

student•

si exacto pero como lo aplicaria segun el ejemplo para cargar el listados de productos dinamicamente, asi?

$.get("archivo.php", function(data, status){
		datos= JSON.parse(data);
});
...

data(){
	return{
		product:datos,
	},
		.....
}

Daniel Rodriguez Davila

student•

oiga, y en linux, como hago para hacer los emojis?

Angel Fernando Quiroz Campos

student•

Si usas GNOME, puedes buscar el nombre del emoji en el shell y al darle Enter, te copia el emoji.

O puedes buscar la aplicación de "characters" y buscar los emojis ahí.

En las aplicaciones "nativas" de GNOME puedes insertar emojis con Click derecho

También tienes la opción de instalar esta extensión https://extensions.gnome.org/extension/1162/emoji-selector/

Albert K. Camargo Barreda

student•

tecla win + . (punto)

Julian David Alzate Cuervo

student•

Maria Tohabanda Duchi

student•

Gracias

Jose Barboza

student•

{{}} interpolacion

Seba Cardoso

student•

¿Que extension usa para los emojis?

John Cardenas

student•

Hola Seba

Si te refieres a como usar emojis, en el caso de Windows puedes acceder con las teclas windows + . (punto)

Juan Esteban Galvis

student•

Si estás en windows puedes oprimir Windows + . o existen extensiones para Visual Studio Code https://marketplace.visualstudio.com/search?term=emoji&target=VSCode&category=All%20categories&sortBy=Relevance

Expresiones

Introducción: fundamentos de Vue.js

Desarrollo de Aplicaciones Web con Vue.js 3

Fundamentos de Vue JS: Construyendo Aplicaciones Reactivas

Vue.js: Framework Progresivo y Reactivo para Aplicaciones Web

Aplicación Básica con JavaScript y Renderizado Declarativo

Capa Declarativa y Virtual DOM en Vue.js

Reactividad a profundidad

Paradigma de Reactividad: Conceptos y Aplicaciones Prácticas

Creación de Framework Reactivo con Proxies en JavaScript

Creación de un Mini Framework Reactivo desde Cero

Programación Reactiva con Proxies en JavaScript

Uso de Reflect para Simplificar Proxies en JavaScript

Programación Reactiva: Efectos, Track y Trigger en JavaScript

Reactividad en JavaScript: Efectos, Trackers y Triggers

Templates de Vue.js

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

Implementación de Vue.js en Proyecto eCommerce Reactivo

Expresiones

Atributos Dinámicos en Vue.js: Uso de Clases y Estilos Reactivos

Rendering Condicional en View.js: Uso de v-show y v-if

Renderizado de Listas en HTML con VueJS

Eventos y Dinamismo en Templates HTML con Vue JS

APIs internas de Vue.js

Options API vs. Composition API

Diferencias entre Options API y Composition API en Vue.js

Creación de Métodos Personalizados con Vue JS Options API

Creación de Métodos Personalizados con Composition API en Vue.js

Uso de Reactive para Agrupar Estados en Composition API

Segunda capa: componentes de Vue.js

Creación de Componentes en Vue para Aplicaciones Modulares

Conexión de Datos entre Componentes en VueJS: Usando Props y Composition API

Creación de Componentes Personalizados en Aplicaciones Web

Creación de Eventos Personalizados en Vue para Comunicación entre Componentes

Eventos personalizados con Composition API en Vue.js

Observadores Personalizados con Watchers en Vue.js

Creación de Observadores Personalizados en Vue Composition API

Propiedades Computadas en Vue: Simplificación y Dinámica Reactiva

Propiedades Computadas con Composition API en Vue.js

Ciclos de Vida en Vue.js: Uso Práctico y Carga de Datos desde API

Ciclos de Vida en Composition API de Vue.js

Siguientes pasos

Desarrollo de Frontend para Ecommerce con Vue.js 3

Reactividad y Programación en Vue: Efectos y Ciclos de Vida