【Vue】入門編（Hello World） - なんだかGoodVibes

こんにちは。
Vue.jsの勉強を始めたのでメモします。

Vue.jsって何？
- プログレッシブフレームワーク
- Vue.jsの特徴
Hello Worldの表示
参考

Vue.jsって何？

プログレッシブフレームワーク

アプリケーション開発を進めていくと
最初に選択したフレームワークでは対応が難しくなり
他のフレームワークに乗り換えなければいけないといったことがあります。

このような問題に対応するために、どのような規模・段階にも対応できる
方法を提供するのがVue.jsのプログレッシブフレームワークという概念です。

Vue.jsの特徴

シンプルなAPIを提供しているため学習コストが低い
コンポーネント指向・コンポーネントの再利用が可能
リアクティブなデータバインディング

Hello Worldの表示

画面に「Hello World」と表示してみます。
ソースは以下になります。

<!DOCUTYPE html>
<html>
    <head>
        <title>HelloWorld</title>
    </head>
    <body>
        <!-- Vue.jsの導入 -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

        <div id="app">
            {{ message }}
        </div>
        <script>
            // Vueインスタンスの生成
            new Vue({
                // elオプション：マウントする要素
                el  : '#app',

                // dataオプション：使用するデータ
                data: {message: 'Hello World'}
            });
        </script>
    </body>
</html>

参考

jp.vuejs.org

以上です。