Vue.js を１から学んでみた。にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）
9-1. 概要
Utilityクラスの様なもの。
例えば、引数の値を全て大文字にしたいような機能が欲しい場合、定義して使うことができる。
9-2. 基本
利用できるのは、mustache展開({{}} の展開)と v-bindの２つ。
単一指定
対象のVueインスタンスプロパティに対して| (パイプ)を設定する。
sample.html
<!-- mustaches -->
{{ message | capitalize }}
<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>
複数指定
複数指定する場合は、以下の様に|でつなげる。
sample.html
<!-- mustaches -->
{{ message | capitalize | subString }}
ローカル登録
filtersで登録する。
App.vue
<template>
<div>
<Job message="system engineer"></Job>
<Job message="hogehoge"></Job>
</div>
</template>
<script>
import Job from "./components/Job.vue";
export default {
components: {
Job: Job
}
}
</script>
Job.vue
<template>
<div>
{{ msg | capitalize }}
</div>
</template>
<script>
export default {
props: {
message: {
type: String
},
},
data: function() {
return {
msg: this.message
}
},
// ローカル登録
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
結果：先頭の文字列だけが大文字
グルーバル登録
main.jsにて登録する。
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// グローバル登録
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<Job message="system engineer"></Job>
<Job message="hogehoge"></Job>
</div>
</template>
<script>
import Job from "./components/Job.vue";
export default {
components: {
Job: Job
}
}
</script>
Job.vue
<template>
<div>
{{ msg | capitalize }}
</div>
</template>
<script>
export default {
props: {
message: {
type: String
},
},
data: function() {
return {
msg: this.message
}
},
}
</script>
結果：先頭の文字列だけが大文字
9-3. 注意事項
- this.は使えない
computedとの違い
- computedは、キャッシュが残るため仮想DOMが変更した場合のみ実行される。パフォーマンスの面で優れている。
- フィルターは、都度実行されるためパフォーマンスの面では劣る。ただ、作りやすく利用もしやすい。