9cubed

Vue.js - Hello, World

公開日：2019-02-19 更新日：2019-05-14

[Vue.js]

1. 概要

Vue.js は、AngularJS や React と同じく、JavaScript で画面の描画などを行うためのフレームワーク（ライブラリ）です。
画面遷移時にリクエストをしないシングルページアプリケーション（Single Page Application、SPA）の開発などを行うことができます。
従来の動的ページは、Web サーバ側でスクリプトを使用して、動的に HTML を生成し、画面を構成していましたが、
Vue.js では、Webサーバ側からテンプレートの HTML と表示データを送信して、JavaScript によりクライアント側で画面を構成します。
これにより、通信量の削減、画面表示の高速化（必要な箇所だけ再描画）、Webサーバ側の簡素化・負荷軽減、などの様々なメリットがあります。

今回は、Hello, World の表示を行います。
サーバとの通信は行いません。

2.1 サンプル

以下のソースのファイルを作成して、ファイルをブラウザにドラッグ＆ドロップすると、{{ message }} の箇所に「Hello, World」と表示されます。
また、ブラウザの検証機能のコンソールで app.message = "test" と実行すると、即座に表示内容が変更されます。
data配下にプロパティを増やしたり、{{ }} を増やしたりして、いろいろ試してみて下さい。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue.js</title><style>body{color:#fff; background-color:#000;}</style></head><body>
  <body>
    <div id="app">
      {{ message }}<br />
    </div>
    
    <!-- Vue.js 開発バージョン  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, World '
        }
      })
    </script>
  </body>
</html>

実行結果：画面

2.2 サンプル

以下のソースをブラウザで開くと、3箇所ある {{ message1 }} に全て「Hello, World 1」と表示されます。
次に、ボタンをクリックすると、3箇所ある「Hello, World 1」が、全て「OK」に書き換わります。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue.js</title><style>body{color:#fff; background-color:#000;}</style></head><body>
  <body>
    <div id="app">
      <button v-on:click="setMsg">クリックしてください</button><br />
      {{ message1 }}<br />
      {{ message1 }}<br />
      {{ message1 }}<br />
      {{ message2 }}<br />
      {{ message3 }}<br />
    </div>
    
    <!-- Vue.js 開発バージョン  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message1: 'Hello, World 1',
          message2: 'Hello, World 2',
          message3: 'Hello, World 3',
        },
        
        //ボタンに関連付けられたメソッド
        methods: {
          setMsg: function () {
            this.message1 = "OK"
          }
        }
        
      })
    </script>
  </body>
</html>

実行結果：画面

Vue.js - Hello, World

1. 概要

2.1 サンプル

2.2 サンプル

Tag

New Article