【Vue】入門編(Mustache構文)

こんにちは。
本日はVue.jsの入門編。
Mustache構文について記載します。

概要

Vueインスタンスのデータをテキストに展開したい。
そのときに使用できる構文の1つがMustache構文です。
2重括弧で値、データもしくは式を挟んで使用します。
例えば、msgというデータを表示する場合は以下のように記載します。

{{ msg }}

サンプル

タグ内でMustacheを使用しています。
Vueインスタンスで設定した
messageとnumberを使用した式を展開しています。

<div id="app">
    <span>Message: {{ message }} ({{ number * 7 }})</span>
</div>
<script>
    var vm = new Vue({
        el  :'#app',
        data: {
            message: 'Hello World!',
            number: 10
        }
    });
</script>

実は、以下の記事でも値の展開にMustacheを使用していました。

【Vue】入門編（Hello World） - なんだかGoodVibes

以上です。