Текстовая интерполяция -- самый простой способ связывания данных. Реализуется с использованием синтаксиса Mustache (двойных фигурных скобок):

<span>Сообщение: {{ msg }}</span>

В официальной документации фигурные скобки отделяются от выражения пробелами, но это не обязательно. Но лучше следовать стилю, заданному в документации.

Выражение в фигурных скобках будет заменено значением свойства msg и обновлено при изменении значения. Для однократной интерполяции (без обновления) необходимо использовать директиву v-once:

<span v-once>Сообщение не будет обновлено: {{ msg }}</span>

В фигурных скобках можно производить однострочные (одно выражение JavaScript) несложные вычисления и вызывать любые JavaScript-функции. Свойства, методы и computed-свойства экземпляра Vue доступны в интерполяции прямо по своим именам (не this.msg, не data.msg, не this.data.msg, а просто msg).

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

А вот так НЕ сработает:

<!-- это не вычисляемое выражение, а определение переменной: -->
{{ var a = 1 }}

<!-- операторы условий тоже не сработают, используйте тернарные выражения: -->
{{ if (ok) { return message } }}