Vue.js/HelloWorld

Vue.js/HelloWorld

とりあえずここから。Vue.js は簡単に始められるということと、それっぽい機能ができること。

これを html ファイルとして保存してブラウザで開けば Vue.js が駆動できるたったこれだけ。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <!-- (1) -->
    <script src="https://unpkg.com/vue@latest"></script>
</head>
<body>
    <div id="app"> {{ message1 }}{{ message2 }} </div> <!-- (2) -->
    <script>
        // (3)
        var vm = new Vue({
            el: "#app",   // (4)
            // (5)
            data: {
                message1: "Hello",  // (6)
                message2: "World"   // (7)
            }
        });
        setTimeout(function(){
            vm.message2 = "Vue";  // (8)
        }, 3000);
    </script>
</body>
</html>

まずはコレをベースに勉強していけばいいと思う。

ブラウザで開くと、画面に HelloWorld と表示された3秒後に HelloVue と切り替わる。

順に解説

(1) CDN からの Vue.js の読み込み

CDN からVue.js 本体を読み込んで JS で使える準備をします。

Vue.js を使う最低限の準備はこれだけ、node を入れたり、npm やら webpack やらは必要ない。

(2) テンプレートの記述

Vue.js の大きな機能の一つとしてテンプレートエンジンとしての機能がある。

ここで示されている div の要素の中に何か HTML ではない記述がされているのは Vue.js のテンプレートの記述である。 Vue.js のテンプレートは様々な書き方があるが一番単純なモノがこの HTML に直接書くというモノになる。

ブラウザは知らないタグが合った場合それを無視して解釈しないが、JS 上ではアクセスはできるようになっている。 それを利用して Vue.js が解釈し、その同じ位置へJSが自力で再描画することでテンプレートエンジンとして機能するということだ。

(3) Vueオブジェクトの作成

Vue.js ではこの Vueオブジェクトというもので DOM やデータを結びつけて各設定を保持することになる。

Vueオブジェクトが互いに連携して機能を実現するという動きになる。

(4) 要素を制御下に入れる

コンストラクタに様々な設定を渡すことで Vueオブジェクトの機能を作っていく。

el で示された、CSS のセレクタ風記述で管理対象に入れる要素を指定する。 CSS セレクタ風ではあるが、この記述は画面のある特定の要素1個を指す必要があり、 Vueオブジェクトは jQuery のように複数の要素の集合体定義をすることはできない。

指定した div 要素がこのように Vueオブジェクトの制御下に入ることでそれがテンプレートと解釈されて読み取られ、解釈後に同じ位置に吐き出される。中括弧で記述されたモノが画面に直接出てこないのは解釈されて Vue 側で再描画されているからである。

(5) 管理すべきデータの定義

Vueオブジェクトは data という管理するデータを保持する。 考え方としてこの data の中の値をテンプレート中に埋め込まれて表示するということになっている。 表示する値だけでなく、その状態、裏で使う設定、すべてがこの data を正としてテンプレートに解釈され画面に出るということになっている。

なので Vue では innerHTML でタグの中身を書き換えたりとか、しない、データを書き換えるとそれに対応する位置の HTML が勝手に書き換わるという考え。

(6)(7) データそのもの

データに対して2つの値を登録している。

このキーは任意の名前でいい。 この名前がテンプレート中に書いてある中括弧の中身と対応しているのである。 最初に HelloWorld という表示が出たのはこの値が2つ並べて表示されたからである。

テンプレートにこの名前で書くことで、その値とテンプレートの位置がデータバインディングされたということである。

(8) データバインディング

data に登録したキーと値は Vueオブジェクトそのもののプロパティとして登録される。 なので作ったVueオブジェクトを通じて message2 を書き換えてみるという試み。

これで3秒後に message2 が書き換わり、それを Vue オブジェクトが検知して画面を再描画している

javascript/vuejs/helloworld.txt · 最終更新: 2019-01-17 16:39 by ore