Expresiones en Vue: sintaxis doble llave

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:49

Expresiones en Vue: sintaxis doble llave

Curso Profesional de Vue.js 2

Clase 12 de 53

Clase 12 / 53

Recursos

Las expresiones en Vue.js permiten representar valores del ViewModel directamente en el HTML para manipular el DOM de forma declarativa. Con llaves dobles, se muestran propiedades, operaciones y resultados de métodos sin lógica de control en el template. Aquí se repasan ejemplos claros: aritmética, concatenación de strings, acceso a objetos, llamadas a métodos y una expresión ternaria como alternativa a if/else.

¿Qué son las expresiones en Vue.js y para qué sirven?

Las expresiones son esos parámetros entre llaves que muestran en pantalla valores del ViewModel. Así, un dato como message se imprime con {{ message }} sin escribir código imperativo.

Representan propiedades del ViewModel en el HTML.
Se evalúan de forma segura dentro del template.
Permiten mostrar resultados de operaciones simples y métodos.

¿Cómo se usan en el HTML del template?

Se escriben entre llaves dobles: {{ ... }}.
Renderizan el resultado en el DOM como texto.

<p>{{ message }}</p>

¿Qué operaciones permiten las expresiones: aritmética, concatenación y objetos?

Además de propiedades, se admiten operaciones aritméticas, concatenación de strings, acceso a objetos y llamadas a métodos. Todo se evalúa en tiempo de render.

¿Cómo hacer operaciones aritméticas y concatenación de strings?

Suma simple para evaluar expresiones numéricas.
Concatenación para unir strings.

<p>{{ 1 + 1 }}</p>            <!-- Muestra 2. -->
<p>{{ 'Hola' + ' ' + 'Mundo' }}</p>  <!-- Muestra Hola Mundo. -->

¿Cómo acceder a propiedades y llamar métodos de objetos?

Acceso a propiedades con notación punto.
Llamada a métodos de strings u objetos.
Conversión de objeto a texto con JSON.stringify.

<!-- Supongamos que en el ViewModel existe: person = { name: 'Juan' } -->
<p>{{ person.name }}</p>                 <!-- Muestra Juan. -->
<p>{{ person.name.toUppercase() }}</p>   <!-- Convierte a mayúsculas. -->
<p>{{ JSON.stringify(person) }}</p>      <!-- Serializa el objeto. -->

Acceder a propiedades: person.name.
Usar métodos: toUppercase sobre un string.
Serializar: JSON.stringify(person) para ver el objeto como texto.

¿Qué limitaciones existen y cómo usar la expresión ternaria?

Dentro de las llaves no se pueden usar estructuras de control como while, for o if. Sin embargo, sí se permite una expresión ternaria para decidir entre dos valores.

¿Cómo representar un if/else con ternaria?

Estructura: condición ? valorSiVerdadero : valorSiFalso.
Útil para alternar resultados simples.

<p>{{ true ? 'true' : 'false' }}</p>

Sin while/for/if: no se permiten dentro de expresiones.
Con ternaria: se evalúa una condición y se elige un valor.

¿Tienes otra situación con expresiones en Vue.js que quieras resolver? Comparte tu caso en los comentarios y enriquecemos el ejemplo juntos.

Gonzalo Cofré

Hace 8 años

Cuando agrego el codigo input(v-model='name'), me devuelve el siguiente error:

Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-7ba5bd90","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/template-compiler/preprocessor.js?engine=pug!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue Module build failed: SyntaxError: Unexpected token, expected "," (1:347)

1 | var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.name),expression:"name"}],domProps:{"value":(_vm.name)},on:{"input":function($event){if($event.target.composing){ return;_vm.name=$event.target.value}}}),_c('p',[_vm._v(_vm._s(_vm.name))]),_c('a',{attrs:{"href":_vm.url}},[_vm._v("Link")])])} | ^ 2 | var staticRenderFns = [] 3 | at t (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/parser-babylon.js:1:326) at Object.parse (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/parser-babylon.js:1:208490) at Object.parse$2 [as parse] (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:10639:19) at coreFormat (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:13856:23) at format (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:14115:73) at formatWithCursor (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:14131:12) at /opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:42399:15 at Object.format (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/prettier/index.js:42418:12) at Object.module.exports (/opt/lampp/htdocs/Platzi/vueavance/platzimusic/node_modules/vue-loader/lib/template-compiler/index.js:80:23) @ ./src/App.vue 11:0-311 @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Samuel Garcia

Hace 8 años

ya revisaste que si escribiste la data?

carlos ruales

Hace 8 años

Yo revisaria lo que dice MrZammi y también verificaría si no se te fue un caracter de más. Aquí dice que no se esperaba una ","

Module build failed: SyntaxError: Unexpected token, expected “,” (1:347)```

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa

Expresiones en Vue: sintaxis doble llave