【Vue.js】HTMLからデータオブジェクト(data)にアクセスする

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsでHTMLからデータオブジェクト(data)にアクセスする方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事では、Vue2.6.12のCDNを使用して解説しています。予めご了承ください。

Vue.jsの実行環境の準備

まずはVue.jsを実行環境を準備します。

CDNで外部ファイルとしてVue.jsのファイルを読み込み、インスタンス化します。Vue.jsを適用する範囲を指定するid名はappとします。

<section>
    <div id="app">
        <!-- この中がVue.jsの適用範囲 -->
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>

これでVue.jsを実行する環境が整いました。appの中に記載しているコメントの空間が、Vue.jsの適用範囲になります。idの指定はnew Vue({})でインスタンス化する際に指定しているelオプションで指定しています。

では実際にデータオブジェクトを用意して、HTMLからアクセスしてみましょう。

データオブジェクト(data)を用意する

データオブジェクトをVueに追加します。出力確認用に、適当に値を持たせておきます。

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

これでデータオブジェクトの準備は完了です。ページを再読み込みしてみてください。まだ何も表示されていないかと思います。データは用意できましたが、HTML側に出力に関する記述をしていないからですね。

なのでHTMLにデータオブジェクトにアクセスして、値を取得する記述を追加します。

HTMLからデータオブジェクト(data)にアクセスする

HTMLからデータオブジェクトにアクセスするには、{{ data }}の形式のMustache構文(マスタッシュ構文)を使用します。試しに前項で用意したHTMLに追加してみます。

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

上記を追加してページを再度読み込んでみましょう。下記埋め込みのようにデータオブジェクトでmessageに代入した値が画面に出力されます。

See the Pen Data Object Access｜Vue.js by ryohei (@intotheprogram) on CodePen.

無事データオブジェクトにアクセスできました。ちなみにMustache構文の中では、JavaScriptの組み込みオブジェクトにもアクセスすることができます。

例えばmessageに文字列を結合してみたり、

{{ message + 'World!' }}

大文字に変換して出力してみたり、

{{ message.toUpperCase() }}

他にも色々なことができます。JavaScriptのスキルがそのまま応用できますね！（JavaScriptのフレームワークなので当然ですが…?）

ただし条件分岐や繰り返しで使用するifやforは使用できません。それらを使用したい場合はv-ifやv-forで使います。その辺は今後記事にまとめていきたいと思います。

最後に

今回はVue.jsの基本であるHTMLからデータオブジェくtにアクセスする方法をご紹介しました。Vue.jsの勉強はまだまだ始まったばかり……頑張って続けていこう！

以上、Vue.jsでHTMLからデータオブジェクト(data)にアクセスする方法のご紹介でした！