【Vue.js】フィルター(filter)とミックスイン(mixin)

スポンサーリンク

フィルター(filter)でテキストをフォーマットする

コンポーネント上で、表示したいdataを作成。

<h2>{{text1}}</h2>
<h2>{{text2}}</h2>
<h2>{{text3}}</h2>
<h2>{{text4}}</h2>


export default {
    data(){
        return{
            text1:"hello",
            text2:"aloha",
            text3:"HELLO",
            text4:"ALOHA"
        };
    }
};

mainで、フォーマット形式を定義。
第1引数には、フォーマット名、第2引数には関数をかく。
Vue.filter(“lowerCase”,function(value){});

Vue.filter("upperCase",function(value){
  return value.toUpperCase();
});
Vue.filter("lowerCase",function(value){
  return value.toLowerCase();
});

テンプレートに適用させたいフォーマット名を追記する。
フォーマット名を入れる際はバーティカルバー(パイプ記号)[|]で区切って入力する。

<h2>{{text1 | upperCase}}</h2>
<h2>{{text2 | upperCase}}</h2>
<h2>{{text3 | lowerCase}}</h2>
<h2>{{text4 | lowerCase}}</h2>

フィルターをローカル登録する時は、コンポーネント中にfiltersを定義する。

export default {
    data(){
        return{
            text1:"hello",
            text2:"aloha",
            text3:"HELLO",
            text4:"ALOHA"
        };
    },
    filters:{
        upperCase(value){
            return value.toUpperCase();
        },
        lowerCase(value){
            return value.toLowerCase();
        }
    }
};

フィルターは複数適用させる事ができる。

<h2>{{text1 | upperCase | lowerCase}}</h2>

複数適用させた場合、左側のフィルターから実行されるため、表示ではlowerCaseが適用しているように見える。

フィルター内では、thisを使うことができないので気をつける。thisを使いたい場合は、computedやmethodsを使うようにする。

フィルターは、再描画するたびに実行する。computedのように必要な時にだけ変わるという機能がfilterには無い。

computedについてのメモはこちら↓

ミックスイン(mixin)をつかってオプションを共有化する

コンポーネントで同じオプションを使いまわす時に、オプションを登録することができる。
オプションをまとめるのにmixinを使用する。

まず、まとめたいオプションをJSファイルに外だしする。
JSファイルはsrc直下に作成。
オプションはオブジェクトにまとめて、変数に格納する。

export const greeting = {
    data(){
        return{
            text1:"hello",
            text2:"aloha",
            text3:"HELLO",
            text4:"ALOHA"
        };
    },
    filters:{
        upperCase(value){
            return value.toUpperCase();
        },
        lowerCase(value){
            return value.toLowerCase();
        }
    }
};

登録したオプションを呼び出す時は、コンポーネント上でimportを行う。

import { greeting } from “@/greeting”;
mixinのパスではCLIを使う時のみ「@」を用いることができる。
この@は、srcからみた相対パスになる。

オプションを使うためには、インスタンスにmixinsを定義する。
mixinsは配列で設定する。

mixins: [greeting]

<script>
import { greeting } from "@/greeting";
export default {
  mixins: [greeting]
};
</script>

mixinのオプションに登録された値と、コンポーネント上の値が被った時、コンポーネントの値が優先される
ライフサイクルフックは、両方実行されるが、mixinが先に実行される

mixinをグローバル登録するには、
Vue.mixin({ })
で登録することができる。

グローバル登録をすると、全てのVueインスタンスにオプションが適用(マージ)されてしまうので注意が必要。
グローバルmixinは一番最初に処理がされる。

Vue.mixin({
  created(){
    console.log("created in mixin");
  }
})
タイトルとURLをコピーしました