Vue.js는 매일 양방향 데이터 바인딩을 배워야 합니다.

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：

Message: {{ msg }}

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

This will never change: {{* msg }}

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

{{{ raw_html }}}

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

Vue.js 지시어 및 특수 기능 내에서는 보간을 사용할 수 없습니다. 걱정하지 마십시오. Vue.js는 Mustache 태그가 잘못된 위치에 사용되면 경고를 표시합니다.

결합 표현식

Mustache 태그 안에 있는 텍스트를 결합 표현식이라고 합니다. Vue.js에서 바인딩 표현식은 간단한 JavaScript 표현식과 선택적으로 하나 이상의 필터로 구성됩니다.

JavaScript 표현식

지금까지 템플릿은 단순한 속성 키에만 바인딩되었습니다. 그러나 Vue.js는 실제로 데이터 바인딩 내에서 모든 기능을 갖춘 JavaScript 표현식을 지원합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' } }

{{ message.split('').reverse().join('') }}

이 표현식은 해당 표현식이 속한 Vue 인스턴스의 범위 내에서 평가됩니다. 한 가지 제한 사항은 각 바인딩이 단일 표현식만 포함할 수 있으므로 다음 명령문은 유효하지 않습니다.

{{ var a = 1 }}