Posted in vuejs

[Vue.js] HelloWorldを表示してみる

   Published Date: 2020年4月30日

今回はVue.jsでHello Worldを表示させるという、Vue.jsの最も簡単なプログラムです。これが基礎となるのでVue.jsの使い方を覚えていきましょう。

ファイルの作成

helloworld.htmlファイルを作り、基本的なHTMLを記載します。これがベースになります。
「helloworld.html」 

<html>
  <head>
    <meta charset="utf-8">
    <title>vue hello world!</title>
  </head>
  <body>

  </body>
</html>

CDNの読み込み

Vue.jsを使うには複数の方法があります。
・npmでインストール
・cliをインストール
・CDNを利用

今回はhello worldを表示させる簡単なプログラムなのでCDNを使います。CDNはVue.jsに必要なプログラムをリンク先から読み込んで使えるようにする仕組みです。

下記の1行をhelloworld.htmlに追加します。CDNはVue.jsのプログラムの前（上）に記載します。

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

CDNのURLはVue.jsの公式ページに記載されています。
Vue.js公式ページ インストール CDN

今回のようにテスト（プログラムの学習）で使う場合は上記のCDNで良いですが、本番で動かす場合は特定のバージョンを指定したほうが良いと公式ページに記載されています。バージョンは下記のように指定します。 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

[参考]
大規模なアプリケーションの構築はNPMを利用したインストールが推奨されています。NPMでVue.jsをインストールするにはターミナルで以下のコマンドを実行します。

$ npm install vue

「helloworld.html」 

<html>
  <head>
    <meta charset="utf-8">
    <title>vue hello world!</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>

  </body>
</html>

変数部分を記載

HTMLの中でVue.jsの変数を使うには、変数を{{}}という二重括弧で囲みます。
これはマスタッシュ構文(Mustache構文)と呼ばれ、変数をテキスト展開する仕組みになっています。
マスタッシュは英語で「口ひげ」のことで、二重括弧がひげに見えることからこのような名がついたようです。

HTMLの中に変数の出力部分を記載してみます。
変数はmessageとします。

<div id="app">{{ message }}</div>

まず、hello worldを表示させたい部分にdivを作りid=”app”を指定します。そしてそのdivの中に{{message}}を記載します。

ここにこれからVue関数でhello worldを表示させていきます。
idがappというdivのmessage変数にHello Worldを出力するというプログラムを書いていきます。

Vue関数の作成

HTMLの中にスクリプトタグを記載して、その中にVueインスタンスを作成します。

<script>
const app = new Vue({})
</script>

こちらがVueインスタンスの構文です。インスタンスがわからない場合は、このようにお決まりの文を書けばVueが使えるようになると思っておけばOKです。

Vue構文でHello Worldを表示させるのは

「helloworld.html」 

<html>
  <head>
    <meta charset="utf-8">
    <title>vue hello world!</title>
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World'
        }
      })
    </script>
  </body>
</html>

const app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello World’
}
})

まず、contst app でappを変数として指定し、その変数にVueインスタンスを代入します。

elでHTMLのidやクラスを指定します。ここはidやclass名をシングルクオーテーションで囲みます。

表示させたいデータはdata:{}の中にkey:value形式で記載していきます。

今回はmessageという変数にHello Worldを代入したいので message: ‘Hello World’と記載します。

表示

http://www.example.com/プロジェクト名/helloworld.htmlでアクセスしてみるとHello Worldが表示されます。
Vue.jsの開発環境では開発用サーバー「# npm run serve」を実行して http://www.example.com:8080」とポート8080で閲覧することが多いですが、今回はCDNを使っての簡単な表示なので、公開ディレクトリにhelloworld.htmlをアップして、それを表示するという簡単な方法でOKです。npm run serveを使うとルーティングなどが設定されていないのでVue.jsのスタートページが表示されるだけになります。

複数の変数を出力

複数の変数を出力するにはdataの中に key:value形式で変数を追加していけばOKです。

<html>
  <head>
    <meta charset="utf-8" />
    <title>vue hello world!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }} | {{ message2 }}</div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World',
          message2: 'こんにちは！',
        },
      });
    </script>
  </body>
</html>

下記のように出力されます。

Hello World | こんにちは！


Author: webmaster