Vue.jsのフィルターを使う　【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

jsstudy.hatenablog.com

4-2-8　フィルターを使う
Vue.js バージョン1のフィルター
- HTML
- CSS
- JavaScript
- 実行結果
Vue.js バージョン2のフィルター
- HTML
- CSS
- JavaScript
- 実行結果
Vue.jsのフィルターとは？
- バージョン1からバージョン2への変更点
まとめ

4-2-8　フィルターを使う

(p.130)

toStringを使って配列をテキストにして表示させましたが、実は別のやり方もあります。

前回、JavaScript式を使って配列を文字列に変換しましたが、Vue.jsの「フィルター」という機能でも同じことができます。

Vue.jsのフィルターは、バージョン1とバージョン2では、仕様が変更されていました。

（参考）

qiita.com

サンプルコードの確認は、

まず、Vue.jsのバージョン1（本書の説明）
次に、Vue.jsのバージョン2

で試してみます。

Vue.js バージョン1のフィルター

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>{{ message | json }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン1のvue.jsをダウンロードしておく。

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      msgArray: [],
      message: '',
      text1: ''
    },
    created: function () {
      this.msgArray.push('sample message.');
      this.message = this.msgArray;
    },
    methods: {
      doAction: function () {
        this.msgArray.push(this.text1);
        this.message = this.msgArray;
      }
    }
  })
}

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

f:id:jsstudy:20170717205255p:plain

入力フィールドに「123」と入力して「click」ボタンをクリック
入力フィールドに「XYZ」と入力して「click」ボタンをクリック

デフォルトの文字列「sample message.」に加えて、「123」「XYZ」も表示に反映されました。

＝msgArrayの配列が、JSON形式の文字列に変換されて、表示されました。

Vue.js バージョン2のフィルター

フィルター機能がちゃんと効いているか、いないか？を確かめやすいように、少し上記コードを改造してみます。

（参考）Vue.js 2.xのフィルタについて調べてみた - Qiita

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>None: {{ message }}</p>
    <p>JSON: {{ message | json }}</p>
    <p>JSON_Upper: {{ message | json_uppercase }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      msgArray: [],
      message: '',
      text1: ''
    },
    created: function () {
      this.msgArray.push('sample message.');
      this.message = this.msgArray;
    },
    methods: {
      doAction: function () {
        this.msgArray.push(this.text1);
        this.message = this.msgArray;
      }
    },
    filters: {
      json: function (value) {
        if (!value) return '';
        return JSON.stringify(value);
      },
      json_uppercase: function (value) {
        if (!value) return '';
        value = value.map(function (item) {
          return item.toUpperCase();
        });
        return JSON.stringify(value);
      }
    }
  })
}

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

f:id:jsstudy:20170718153431p:plain

上段：None → フィルターなし
中段：JSON →　「json」フィルターをかけた
下段：JSON_Upper → 「json_uppercase」フィルターをかけた

NoneとJSONは、見た目の違いが分かりづらいですが、「[」と「"」の間のスペースがなくなってました。
「json」だとフィルターが効いている様子が分かりづらかったので、「json」を改造して大文字に変換する「json_uppercase」を用意してみました。
確かに、大文字に変換されていたので、フィルターを通した結果が表示されていることが分かりました。

バージョン1とバージョン2の違いは、Vueオブジェクトに「filters」というプロパティを用意する必要があります。

Vue.jsバージョン2では、「filters」を自分で用意しないとフィルターが動きません。

f:id:jsstudy:20170718155951p:plain

（main.jsのfiltersをコメントアウトして、Chromeのコンソール画面を見ると、Vue.jsのエラーメッセージが出てました。）

Vue.jsのフィルターとは？

(p.131)

フィルターというのは、指定された値を出力する際に何らかの処理を行うための仕組みです。

フィルターを指定することで、指定の形で処理した値を出力するようになります。

（参考）

jp.vuejs.org

フィルタ

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます。

フィルタは、mustache 展開と v-bind 式、2 つの場所で使用できます。

フィルタは JavaScript 式の末尾に追加する必要があります。

これは “パイプ(‘|’)” 記号で表されます。