フィルター（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で、フォーマット形式を定義。
第１引数には、フォーマット名、第２引数には関数をかく。
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");
}
})
