Vueの基本

公開日:2022年11月03日更新日:2022年11月17日

JavaScript

プロジェクトを使用せず、フルスクラッチでVueを試します。

プロジェクトを使用しないので、フォルダ内にHTMLファイルを用意するだけで構いません。HTMLファイル内からVue3スクリプトを読み込めばすぐ利用できます。

<script src="https://unpkg.com/vue@next"></script>

値を表示

今回は「lesson01_app」フォルダを作成して「index01.html」を作成します。

index01.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vueの基本</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <h1>Vueの基本</h1>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const appData = {
      data() {
        return {
          message: '初めてのVue'
        };
      }
    };

    const app = Vue.createApp(appData);
    app.mount('#app');
  </script>
</body>
</html>

CDNでVue3のスクリプトファイルを読み込み

<script src="https://unpkg.com/vue@next"></script>

表示部分

Vueから値を表示したい個所を特定するため、ID名などを指定します。今回はID名「app」を指定しています。

  <div id="app">

  </div>

要素内の値を表示したい個所に「{{ 表示用の名前 }}」を記述します。今回は「{{ message }}」を指定します。

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

ロジック部分

データ用のオブジェクトを作成します。今回はこのオブジェクトを定数「appData」に代入します。

  <script>
    const appData = {

    };
  </script>

オブジェクト内にdataメソッドを作成します。

dataメソッドはVueオブジェクトで使用する値を指定します。

dataメソッドの戻り値にオブジェクト形式で値を指定します。

  <script>
    const appData = {
      data() {
        return {
          message: '初めてのVue'
        };
      }
    };
  </script>

VueオブジェクトのcreateAppメソッドを使ってVueインスタンスを作成します。引数にデータ用のオブジェクトを指定します。

今回は作成したVueインスタンスを定数「app」に代入します。

  <script>
    const appData = {
      data() {
        return {
          message: '初めてのVue'
        };
      }
    };

    const app = Vue.createApp(appData);
  </script>

Vueインスタンス（定数appで管理）のmountメソッドを使って表示する場所を指定します。場所の指定に引数を使用します。CSSセレクタを使って場所を指定します。

  <script>
    const appData = {
      data() {
        return {
          message: '初めてのVue'
        };
      }
    };

    const app = Vue.createApp(appData);
    app.mount('#app');
  </script>

ブラウザ表示

該当箇所に値「初めてのVue」が表示されます。

HTMLファイルがテンプレート化され、Vueによって該当箇所に値が表示（レンダリング）されます。

複数の値を表示

今回は「lesson01_app」フォルダを作成して「index02.html」を作成します。

index02.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vueの基本</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <h1>Vueの基本</h1>
  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
  </div>

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
        };
      }
    };
    
    Vue.createApp(appData).mount('#app');
  </script>
</body>
</html>

CDNでVue3のスクリプトファイルを読み込み

<script src="https://unpkg.com/vue@next"></script>

表示部分

要素内の値を表示したい個所に「{{ 表示用の名前 }}」を記述します。複数記述できます。

  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
  </div>

ロジック部分

データをオブジェクト形式で複数作成します。

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
        };
      }
    };
  </script>

前回分けて書いていた部分をまとめて記述できます。

    const app = Vue.createApp(appData);
    app.mount('#app');

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
        };
      }
    };
    
    Vue.createApp(appData).mount('#app');
  </script>

ブラウザ表示

値を変更

今回は「lesson01_app」フォルダを作成して「index03.html」を作成します。

index03.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vueの基本</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <h1>Vueの基本</h1>
  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
  </div>

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
        };
      },
      mounted() {
        setInterval(() => {
          this.life--;
        }, 1000);
      },
    }
    Vue.createApp(appData).mount('#app');
  </script>
</body>
</html>

CDNでVue3のスクリプトファイルを読み込み

<script src="https://unpkg.com/vue@next"></script>

表示部分

  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
  </div>

ロジック部分

mountedメソッドはVueを組み込んだ（mount）時に自動的に実行されます。

今回はmountedメソッド内に1秒ごとにlifeプロパティの値をデクリメントする処理を記述します。

      mounted() {
        setInterval(() => {
          this.life--;
        }, 1000);
      },

dateメソッドで用意した値にアクセスする時は「this.プロパティ名」と記述します。

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
        };
      },
      mounted() {
        setInterval(() => {
          this.life--;
        }, 1000);
      },
    }
    Vue.createApp(appData).mount('#app');
  </script>

ブラウザ表示

ライフが1秒おきに「1」減ります。

表示しない値

今回は「lesson01_app」フォルダを作成して「index04.html」を作成します。

index04.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vueの基本</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <h1>Vueの基本</h1>
  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
    <p>{{ message }}</p>
  </div>

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
          message: '',
        };
      },
      created() {
        this.message = this.job + this.name + 'は毒状態です';
        this.damage = 0;
      },
      mounted() {
        timerID = setInterval(() => {
          this.damage = Math.floor(Math.random() * 10);
          this.life -= this.damage;
          this.message = this.job + this.name + 'はダメージ' + this.damage + 'を受けた';
        }, 1000);
      },
    }
    Vue.createApp(appData).mount('#app');
  </script>
</body>
</html>

CDNでVue3のスクリプトファイルを読み込み

<script src="https://unpkg.com/vue@next"></script>

表示部分

  <div id="app">
    <p>名前：{{ name }}</p>
    <p>職業：{{ job }}</p>
    <p>ライフ：{{ life }}</p>
    <p>{{ message }}</p>
  </div>

ロジック部分

dateメソッドの戻り値に表示する値を指定したオブジェクトを記述します。処理に使用する値は記述しません。今回は「ダメージの値」はメッセージ内で使用する値なので記述しません。

      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
          message: '',
        };
      },

createdメソッドはVueインスタンス生成時に実行されるメソッドです。mountedメソッドより先に実行されます。ここには「初期値の設定」や「処理に使う値（単体で表示されない値）」を記述します。

      created() {
        this.message = this.job + this.name + 'は毒状態です';
        this.damage = 0;
      },

createdメソッドで用意した値にアクセスする時も「this.プロパティ名」と記述します。

  <script>
    const appData = {
      data() {
        return {
          name: '田中',
          job: '勇者',
          life: 1000,
          message: '',
        };
      },
      created() {
        this.message = this.job + this.name + 'は毒状態です';
        this.damage = 0;
      },
      mounted() {
        timerID = setInterval(() => {
          this.damage = Math.floor(Math.random() * 10);
          this.life -= this.damage;
          this.message = this.job + this.name + 'はダメージ' + this.damage + 'を受けた';
        }, 1000);
      },
    }
    Vue.createApp(appData).mount('#app');
  </script>