テンプレートを構成する仕組み

{{....}}（Mustache構文）

{{....}}は、与えられた式の値をテンプレートに埋め込む(＝バインドする)基本的な手法。 テキスト部分に値を反映させるだけの簡単な記法。
Vue側▼

let app = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
});

HTML側▼

<div id="app">
   <p>{{ message }}</p>
</div>

【注意点】

• 属性に対して式の値を埋め込むことはできない(v-bindを使う)
• Mustache構文を無効化するには、v-preを使う

v-XXX属性（ディレクティブ）

属性やスタイルの操作、条件分岐などより複雑な機能を組み込みたい場合は、ディレクティブを利用する。
ディレクティブは「v-〜」から始まる構文で表すのが基本。

HTML側▼

<!-- さきほどの{{ message }}と意味的に等価  -->
<div id="app">
   <p v-text="message"></p>
</div>

参考本

これからはじめるVue.js実践入門