【Vue.js入門】02_Vue.jsでHello Worldの実装と解説

2019年2月7日2025年11月16日

Vue.js入門第2回。Vue.jsでHello　Worldを表示する実装と解説をまとめます。

Contents

Vue.jsでHelloWorld

まずはファーストステップのお決まりHelloWorldを実装してみます。

<div id="app">
    {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js" />

new Vue({
    el: '#app',
    data: {
        message: 'hello world',
    }
})

jsfiddleを載せておきます。

簡単にですが解説も載せておきます。

まずCDNからvue.jsを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js" />

Vueを適用する要素を作成し、Vue.jsに認識させるためにidを指定します。慣例的にはid属性でappと指定することが多いようです。

<div id="app">・・・</div>

Vueインスタンスを生成します。elキーで先ほど作成したid属性appを指定します。これでこの要素の配下でVueを利用することが出来ます。

dataプロパティにはVueで扱うデータを設定します。messageプロパティを作成し、初期値として「Hello　World」を設定しています。

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

このdataプロパティで定義されているデータは「{{ }}」（マスタッシュ構文）でHTMLに出力することができます。
「message」がdataプロパティ内のmessageキーと対応しています。

{{ message }}

Posted by えず