2024/02/13 22:13:39

Vue 入門 Hello, World

Vue で Hello, World してみます。Getting Strted.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="foo">{{ bar }}</div>
<script>
var vm = new Vue({
    el: '#foo',
    data: {
        bar: 'Hello, world!',
    },
});
</script>
</body>
</html>

上のHTMLをブラウザで表示すると以下のようになります。

Hello, world!

最もシンプルな Hello, world という文字列を出力するだけのサンプルです。

ポイント

Vue.js は CDN から読み込みます。

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

試験なので最新版を読みます。もしもバージョンを固定したい場合は https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js という風にバージョンを明示します。

主要なHTMLは以下のように #foo の中に Vue のテンプレート構文で bar を出力するだけのものです。

<div id="foo">{{ bar }}</div>

今回は、Vue のコード本体をHTMLと同じファイルに <script> タグで書きます。

<script>
var vm = new Vue({
    el: '#foo',
    data: {
        bar: 'Hello, world!',
    },
});
</script>

変数 vm に Vueインスタンスを作成して代入しています。vm は Vue インスタンスを代入するために慣例的に良く使われる変数名で、特に何にしなければいけないという決まりはありません。app なども良く使われます。

el プロパティで、Vue インスタンスの管理下となる DOM要素を指定します。今回は <div id="foo"> の中身を扱いたいので el: '#foo' とします。

data プロパティは、Vueインスタンスが扱うデータオブジェクトです。ここで定義された data の値が変更されると、ビューがレンダリングされます。インスタンスが生成されたあとに追加される data のプロパティは、再レンダリングされません。値の変更に追従してビューを更新したい場合は、Vueインスタンスの生成時に data プロパティに初期値を設定する必要があります。初期値は空でも問題ありません。

Vueインスタンスの概要はこちらに公式ドキュメント があります。VueインスタンスをプロパティについてはAPIリファレンス にあります。

サイト内検索