2018年11月26日月曜日

Vue.js 超入門

概要
環境
とりあえず動かしてみる
属性に対して値をバインドする
条件分岐でタグの表示/非表示
ループ
クリック時のイベントをハンドリングする
input タグの初期値を設定する
独自のタグ (コンポーネント) を定義する
応用: コンポーネント内でプロパティを参照する
最後に

概要

Vue.js は「ユーザーインターフェイスを構築するためのプログレッシブフレームワーク」らしいです
何ができるかもさっぱりわからなかったのでとりあえず動かしてみました
また本記事は公式のチュートリアルの内容をメインに進めます

環境

macOS 10.14.1
Chrome 70.0.3538.102
Vue.js 2.5.17

とりあえず動かしてみる

HTML ファイル一つで動かすことができます

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        message: 'Hello'
      }
    })
  </script>
</body>
</html>

あとはブラウザで HTML ファイルを開けば OK です

open index.html

Vue インスタンスを生成することで DOM のレンダリングやイベントハンドリングを行うことができるようです

属性に対して値をバインドする

先程はタグ内のテキスト情報をテンプレートで展開しましたが属性に対しても値を展開 (バインド) できます

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <span v-bind:title="message">
      Hover your mouse over me for a few seconds
      to see my dynamically bound title!
    </span>
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
      }
    })
  </script>
</body>
</html>

span タグの title 属性に対して日付を表示するメッセージを設定しています
title 属性はツールチップを表示するための属性です

v-bind は Vue.js が提供するディレクティブという機能で v- から始まります
Vue インスタンス内で定義した message プロパティを参照しています

条件分岐でタグの表示/非表示

v-if ディレクティブを使うとプロパティの値が true/false かどうかによってそのタグ情報を表示するかしないかハンドリングすることができます

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <span v-if="seen">Now you see me</span>
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        seen: false
      }
    })
  </script>
</body>
</html>

消えたタグは hidden などで非表示にしているわけではなく DOM 自体から消えているようです

ループ

ループさせるためのディレクティブもあります
v-for を使います

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        todos: [
          { text: 'aaa' },
          { text: 'bbb' },
          { text: 'ccc' }
        ]
      }
    })
  </script>
</body>
</html>

v-for="todo in todos" こんな感じで in を使ってプロパティで宣言した todos プロパティをループさせることができます
todos プロパティは配列で定義しているのがポイントです

またコンソールを表示して app4.todos.push({ text: 'New item' }) と入力するとリストが増えることが確認できます

クリック時のイベントをハンドリングする

v-on ディレクティブを使います
値に関数名を指定することでクリック時のその関数を呼び出すことができます
関数は Vue インスタンス生成時に指定します

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <p>{{ message }}</p>
    <button v-on:click="say">say</button>
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        message: 'Hello'
      },
      methods: {
        say: function() {
          this.message = 'World'
        }
      }
    })
  </script>
</body>
</html>

methods プロパティ内に呼び出す関数を定義します
今回の場合はボタンをクリックすると message プロパティの内容を World に変更する処理を実装しています
this で Vue インスタンス自体を参照できます

jQuery のように id などを参照してクリックイベントをハンドリングする必要がないです

input タグの初期値を設定する

v-model という双方向バインディングするためのディレクティブを使います

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <input v-model="message">
  </div>
  <script>
    var app = new Vue({
      el: '#msg',
      data: {
        message: 'input default value'
      }
    })
  </script>
</body>
</html>

これで input タグにデフォルトのメッセージが表示されます
input タグの value 属性などが設定されるわけではなくあくまでも Vue.js の機能として表示されているようです

独自のタグ (コンポーネント) を定義する

テンプレートを事前に定義しておくことでそれをコンポーネントとして使い回すことができます

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <my-message></my-message>
  </div>
  <script>
    Vue.component('my-message', {
      template: '<h1>Hello</h1>'
    })
    var app = new Vue({
      el: '#msg',
      data: {
      }
    })
  </script>
</body>
</html>

Vue.component として定義しておくことでそれをタグ名として使えます
Vue インスタンスの生成は必要です
id=msg 内に <my-message> タグがあればそこにコンポーネントを展開するイメージです

応用: コンポーネント内でプロパティを参照する

Vue インスタンス生成時に msg1 を定義しそれをコンポーネント側で参照する方法です

vim index.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="msg">
    <my-message v-bind:val="msg1"></my-message>
  </div>
  <script>
    Vue.component('my-message', {
      props: ['val'],
      template: '<h1>{{ val }}</h1>'
    })
    var app = new Vue({
      el: '#msg',
      data: {
        msg1: 'Hello!!'
      }
    })
  </script>
</body>
</html>

v-bind を使ってコンポーネントにプロパティを渡すだけです
v-for などと組み合わせてリストなどで定義したコンポーネントを使い回すことができます

最後に

これで公式のチュートリアルは終了です
当然ですが Vue.js にはまだまだ機能があります
更に知識を深めたい場合は次のドキュメントに進むと良いと思います

ドキュメントを進めていくと他の JS 周りの知識「JSX」「リアクティブ」「Web Components」などの言葉も出てくるのでその辺りも勉強したほうが更に知識を深められると思います

hawksnowlog