【Vue.js】Vue CLIグローバルフィルタの作成

Vue CLIで作成したサイトでグローバルフィルタを使う方法。
グローバルでフィルタを使用するには、filter関数とfilter名の登録が必要になる。

下記ページを参考にさせていただきました。
https://teratail.com/questions/281227

手順

1. srcフォルダ配下にfilterディレクトリとindex.jsを作成
2. vueのインポート
3. フィルタの作成
4. main.jsで作成したフィルタをインポート
5. フィルタを適用する

1. Sorceフォルダ配下にfilterディレクトリとindex.jsを作成する

filterのライブラリとしてディレクトリを作成する。

フォルダやファイルの場所や名前は任意だが、以下では、srcディレクトリ配下に作成する例とする。

・ディレクトリとファイル
*PJ > src > filter > index.js *

2. vueのインポート

フィルタ関数とIDを登録するために、まずはvue自信をインポートする。

import Vue from "vue"

＜import Vue from "vue"について＞
import Vue from "vue"は下記式と同義らしい。
何をしているかは明確ではないが、グローバルで使用できるVueインスタンスを生成しているとみられる。

import Vue from "vue"
↓
const Vue = require('vue')
↓
const vue = require('./node_modules/vue/dist/vue.runtime.common.js');
↓ 
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./vue.runtime.common.prod.js')
} else {
  module.exports = require('./vue.runtime.common.dev.js')
}

3. フィルタの作成

Vue.filterを使い、フィルタ名と処理を定義する。
Vue.filter('フィルタ名', function(引数){return 処理})

1000桁区切りをするフィルタ1000separatorを作成する場合。

import Vue from "vue"

Vue.filter('1000separator', function(value) {
  return value.toLocaleString();
})

4. main.jsで作成したフィルタをインポートする。

srcディレクトリ配下のmain.jsファイルに移動し、filterディレクトリをインポートする。

import "./filter"

5. フィルタを適用する

フィルタを適用したい箇所に移動し、フィルタを呼び出す。
呼び出し方は、マスタッシュ展開を用いる方法と、v-bindを用いる方法の２種類。

(1)Mustache展開
{{式|　フィルタ名}}

(2)v-bind
<要素 v-bind:属性="プロパティ名 | フィルタ名">

マスタッシュ展開でフィルタを使用する例。

 <em>${{number | 1000separator}}</em>

dataオプションのnumberプロパティに格納された数値を1000桁区切りにする。

以上。