Vue 基礎勉強 データバインディング (マスタッシュ構文)

(Vue.js 3.1.5を使用)

2重かっこで変数名をくくる構文
{{変数名}}
をマスタッシュ構文という。

javascript側のmessageに設定した文字列を画面表示する。
(テンプレート側から参照するにはdataオプションの中に値を書かないといけないらしい）

HTML側にマスタッシュ構文を書いておくと、その部分に表示される。

javascript

const app = Vue.createApp({
    data: () => ({
        message: 'Hello! Vue'
    })
})
app.mount('#app')

html

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

配列やオブジェクトも表示できる。

javascript

const app = Vue.createApp({
    data: () => ({
        message: 'Hello! Vue',
        book:{
            name: 'Vue 入門',
            author: 'ヤマダタロウ',
            year: 2023
        },
        fruits: ['リンゴ', 'バナナ', 'メロン', 'スイカ']
    })
})
app.mount('#app')

html

    <div id="app">
        <p>
            {{message}}
        </p>
        <ul>
            <li>{{book.name}}</li>
            <li>{{book.year}}</li>
            <li>{{book.author}}</li>
        </ul>
        <ul>
            <li>{{fruits[0]}}</li>
            <li>{{fruits[1]}}</li>
            <li>{{fruits[2]}}</li>
            <li>{{fruits[3]}}</li>
        </ul>
    </div>