- Añadir enlace al Codepen que se trabajó en la clase: https://codepen.io/ianaya89/pen/KKPjJbY
Introducción
Qué aprenderás sobre Vue.js 2
El Framework Progresivo
¡Hola Vue!
Rendering Declarativo y Manipulación de DOM
Introducción al Rendering Declarativo
Expresiones y Propiedades
Atributos Dinámicos
Control de Flujo con Directivas
Renderizado de Listas
Manejo de Eventos
Clases en tiempo real
Estilos en tiempo real
Computed Properties y Watchers
Two-Way Data Binding
Ejercicios de práctica módulo 2
Sistema de Componentes
Sistema de Componentes
Crear Componentes Custom
Comunicación entre Componentes: propiedades
Comunicación entre Componentes: eventos
Slots
Ciclo de Vida y Hooks
Antes de continuar, ¡un repaso!
Ejercicios de práctica
Ambiente de Desarrollo
VS Code + Vetur / Chrome / Firefox + Dev Tools
Qué es, cómo usarlo y aplicaciones profesionales con el CLI
Single File Components
Funcionalidades, UI y comandos básicos
Platzi Exchange
Introducción y Setup de Tailwind CSS
Primeros Componentes
Introducción y Setup de Vue Router
Introducción a Fetch y API de Coincap
Mejorar la UI con filtros
Rutas dinámicas
Navegación Programática
Utilizar componentes de terceros
Problemas de Reactividad
Mejorar proyecto: filtros y ordenar
Mejorar proyecto: links y conversión
¡A producción!
Despliegue de la app a Netlify
Rendering Declarativo y Manipulacion de DOM
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Aportes 39
Preguntas 1
Casi cualquier tipo de código JS puede ser utilizado dentro de una expresión. Hay cosas que no podríamos hacer: un if, un else, un while, un switch, un for…
.
Vue.js utiliza una sintaxis de plantilla basada en HTML (Template Syntax) que le permite vincular declarativamente el DOM representado a los datos de la instancia de Vue.
.
Todas las plantillas de Vue.js son HTML válidos que pueden ser analizados por navegadores y analizadores HTML que cumplan con las especificaciones.
.
Por lo tanto podemos utilizar todas las funcionalidades de javascript que tengan un retorno explícito, tales como variables, progrmación funcional, expresiones lógicas, llamadas de funciones, if ternarios, métodos y atributos de objetos, etc, pero no podemos hacer uso de if, else, while porque éstos no tienen un retorno.
Dentro de una expresión {{ … }} podemos escribir casi cualquier código js válido.
Ejemplo: operaciones aritmeticas (suma, resta, multi, división), expresiones lógicas, llamar funciones, etc. Las sentencias condiciones no se pueden usar dentro de ellas (por ejemplo if and else, for, while, etc.), ya que Vue tiene su propia forma de ejecutarlas atreves de algo llamado directivas
Estoy realmente sorprendido con el alcance que puede llegar a tener vue dentro de mi aplicación al manipular js dentro de etiquetas html 😱
Desesperado!!! Clase 5 y aún no creamos el proyecto, estamos a pura teoria … la lógica de la teoría solo es comprensible ESCRIBIENDO CÓDIGO …
muchas gracias!!, no lo sabia, pense que solo recibia variables declaradas en data
Las expresiones es como ejecutar código JavaScript simple, imprimir variables, hacer pequeños cálculos, llamar funciones, etc. Esto igual nos ayuda a mantener el código más limpio:D
Se puede hacer un map o un filter ?
Muy interesante!
much
really good
good
platzi is good
Pero que buen Profe, Argentino tenia que ser!!!
Podemos usar expresiones en el template de nuestra app de Vue.js:
<div id="app">
<!--Nuestra app de vue se monta en el div-->
<!--Todas las apps de Vue tienen 1 único elemento padre--->
<h1>{{ title }}</h1>
<p>{{ 1+1+1 }}</p>
<p>{{ true || false }}</p>
<p>{{ 'string'.toUpperCase() }}</p>
<p>{{ JSON.stringify({name: 'Miguel'}) }}</p>
</div>
Dentro de una expresión puedo ejecutar cualquier tipo de código JS, por ejemplo:
<div id="app">
<h1>{{ title }}</h1>
<!-- En una expreción podemos sumar -->
<p>{{ 1 + 1 }}</p>
<!-- En una expreción podemos usar valores booleanos -->
<p>{{ true || false }}</p>
<!-- En una expreción podemos utilizar el operador ternario -->
<p>{{ true ? true : false}}</p>
<!-- En una expreción podemos llamar funciones -->
<p>{{ 'string'.toUpperCase() }}</p>
<!-- En una expreción podemos hacer JSON -->
<p>{{ JSON.stringify({name: 'Carlos'}) }}</p>
</div>
Pero hay cosas que dentro de las expresiones no podríamos hacer como utilizar in if, un else , un while, un switch, un for, etc… La mayoría de código JS es perfectamente utilizable dentro de las expresiones.
Me confundi un poco cuando el profesor indico que no se puede utilizar if, y aun asi lo utilizo en un ejemplo, un alma del señor me puede decir cual es la diferencia entre estos dos fragmentos
true ? 'Bien' : 'Mal'
if(variable){
console.log('Bien');
}else{
console.log('Mal')
}
Dentro de una expresión se pueden hacer muchas cosas, básicamente se puede ejecutar cualquier código de JS o casi todo.
Hay cosas que no se pueden como if, else, while, switch, for.
!
javascript dinámico en la vista
Esto es muy similar a React. me alegra saber que mi aprendizaje va ha ser sencillo. 😃
Casi cualquier codigo Mensp los de control+
excelente, para el front el poder utilizar expresiones
Dentro de las llaves {{ }} van las expresiones. Básicamente una línea de código JS. No sería lo recomendable que hubiese un bloque de código.
hay un error en el video, aunque lo adelantes siempre termina con error.
Dentro de una expresión puedo:
Paso a paso, ahí vamos digiriendo las bases de Vue.
Expresiones y propiedades.
Dentro de las expresiones se pueden realizar diferentes cosas “Ejecutar código de JavaScript”.
.
Código que no se puede utilizar:
{{ 1+ 'b'}}
?
Practicamente lo que no se puede usar dentro de los corchetes son los controles de flujo no?
Dentro de las expresiones se puede ejecutar casi cualquier código JavaScript válido. Por ejemplo, hacer operaciones, llamar funciones, usar el operador ternario, etc.
Lo que no se puede usar dentro de las expresiones es un if, if-else, switch o for.
en vue 3
const { createApp} = Vue;
const app = createApp({
});
app.mount("#app");
f
Aquí mí link
https://codepen.io/kevinmalo/pen/Exggbeq
Me parece raro q diga q un if o un for no se puede hacer, si lo hice y funciona perfectamente
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?