はじめに

vue.js入門の続きです。前回まではvueの環境準備がほとんどだったので今回は実装をメインで書いていきます。

実装

まずは実装してみて、その内容をチェックしていきます。

実装

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <script>
  new Vue({
    el: '#app',
    data: { message: 'Hello Vue!'}
  })
  </script>
</body>
</html>

表示される画面

普通のHelloページです。 f:id:set21set21:20210810192802p:plain

実装内容チェック

まずはscriptの中身をチェックします。

new Vue

この部分はVueのオブジェクトを作成してます。でその中身が以下です。

    el: '#app',
    data: { message: 'Hello Vue!'}

elとdataというものを指定しています。

elについて

elは最低限必要となるプロパティになるようです。指定するのはVueオブジェクトの対応となるものです。

appと指定しているので、これがid="app"と紐づく感じになります。

dataについて

dataの値に用意されたものを指定されたところ({{}}のところ)に設定するというイメージです。ここでは{{message}}にHello Vue!という文字を設定するということになります。

messageの動きの確認

{{}}に設定された値はリアルタイムにチェックされ、常に状態が保持されるようです。試してみます。

実装

試すために以下のように実装します。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <hr>
  <button onclick="doAction();">
    click
  </button>
  <script>
  var data = {message: 'Hello Vue!'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction() {
      data.message = "You Clicked";
  }
  </script>
</body>
</html>

表示される画面

以下のように表示されます。 f:id:set21set21:20210810205613p:plain

ここで、クリックボタンを押すと、以下の表示に変化します。 f:id:set21set21:20210810205728p:plain

実装内容チェック

JavaScriptの実装でVueオブジェクトに設定しているdataを最初に初期化して、そのdata変数を設定するようにしています。

そして、doActionメソッドを追加して、そこでdata.messageにYou Clickedというようにメッセージを設定するようにしています。

この実装では{{message}}に設定した値が動的に切り替わることが確認できました。

さらに値を更新してみる

値が更新されるのをさらに確認してみます。

実装

テキストフィールドを表示して、そこに入力した内容をmessageにリアルタイムで出力するという内容です。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <hr>
  <input type="text" onInput="doAction(event);">
  <script>
  var data = {message: 'please type'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction(event) {
      console.log(event)
      data.message = event.target.value;
  }
  </script>
</body>
</html>

画面表示

初期表示は以下のようになります。 f:id:set21set21:20210810210647p:plain

テキストフィールドに入力するとリアルタイムで表示されます。（以下testを入力した後の画面です） f:id:set21set21:20210810210738p:plain

値以外を設定する

{{}}には今まで「値」を設定してきましたが、値以外もJavaScriptの「式」を記述することもできます。

実装

先程の入力した値を表示する実装のmessage部分を以下のように修正します。

{{ message.toUpperCase() }}

全部だと以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message.toUpperCase() }}
  </div>
  <hr>
  <input type="text" onInput="doAction(event);">
  <script>
  var data = {message: 'please type'}
  new Vue({
    el: '#app',
    data: data
  })
  function doAction(event) {
      data.message = event.target.value;
  }
  </script>
</body>
</html>