Vue入門1 Vueを動かしてみよう

Vue入門の第1回です。まずはVueを動かすところから始めましょう。

1. HTMLファイルとJSファイルを作成する

まず、以下の内容のHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
</head>
<body>
    <div id="app">
        <h2>キッズ靴下</h2>
    </div>

    <script src="main.js"></script>
</body>
</html>

HTMLコード中でdivにつけるid名は何でも良いのですが、公式サイトなどにならってid=”app”としておきましょう。

次に、HTMLファイルから読み込むJSファイル main.js を作成します。このファイル名も何でも良いのですが、公式サイトなどにならってmain.jsとしておきましょう。

var app

ここまでで、index.htmlとmain.jsという２つのファイルを作成しました。

この時点では、まだVueは登場していません。また、HTMLファイルからJSファイルを読み込んではいますが、ただ読み込んでいるだけでコードは関連付けられていません。

2. Vueファイルを読み込む

index.html にVueファイルを読み込むためにscriptタグの指定を追加します。また、 <h2>キッズ靴下</h2>とベタ打ちしていた部分を、 <h2>{{ itemName }}</h2>という具合に、Vueの書式に合わせた記述に書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vueサンプル</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <h2>{{ itemName }}</h2>
    </div>

    <script src="main.js"></script>
</body>
</html>

Vueファイルを読み込む際に指定している「https://unpkg.com/」は、 CDN（Content Delivery Network＝コンテンツ配信ネットワーク）のひとつです。

CDNは、様々なコンテンツを多くの利用者に向けて配布するネットワークです。簡単にVueを動かしたい場合には、CDNから読み込んで利用するのが便利です。

数あるCDNのなかでも「https://unpkg.com/」ではnpm上のすべてのコンテンツを配布しています。

3. main.jsを書き換える

次に、main.jsを書き換えます。以下の記述はJavaScriptに似ていますが、Vueの書式で記述されています。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下'
    }
})

表示を確認してみる

ここまで出来たら、index.htmlとmain.jsを上書き保存して表示を確認してみましょう。以下は、ここまでに作成したサンプルページです。

https://programming-world.net/sample/vue_sample/01/index.html

画面に「キッズ靴下」と表示されていれば成功です。

ここまでで、ごく簡単なサンプルですが、とにかくVueを動かすことができました。

VueアプリケーションとHTML要素の関連付けについて

以下は、Vueインスタンスを作成する書式です。

var app = new Vue()

上記の書式でVueインスタンスを生成すると、これがVueアプリケーションのルートとなります。Vueアプリケーションはルート以下の階層に構築されます。

new Vue()のなかには、さらに波括弧{ ～ }でくくってオプションを指定します。

var app = new Vue({オプションを指定})

オプションを指定していない状態では、まだVueアプリケーションとHTML要素が関連付けられていません。具体的にオプションを記述してみます。

var app = new Vue({
    el: '#app',
    data: {
        itemName: 'キッズ靴下'
    }
})

上記例では、el: ‘#app’と記述してid名がappと付けられた要素を指定しています。この el: ‘#app’ を記述した時点でdiv id=”app”と関連付けられます。

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

これで、Vueアプリケーションとappとid名をつけたdiv要素が関連付けられました。

次回へ続きます。