※スマホ対応はしてません。

タグ: filter

(ビルトインの)フィルターは衰退しました。(Vue.js始めるおれおれアドベントカレンダー2016 – 13日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 13日目

簡単なフィルタは自作しなくても最初から用意されてたりしないかな、と思ったんだけど、v1にはあったものの現在v2では削除されたとか。

テキストを展開するためのフィルタは、現状はまだ利用できますが、すべてのフィルタが削除されました。それらの代わりに、(例えば日付のフォーマットには date-fns 、通貨処理には accounting と言った形で) より専門的なライブラリの使用を推奨します。

いや「vue フィルタ」とかで検索したら公式ドキュメントが出てきたんだけど、よく見たら古い版のドキュメントでした。

それでも使おうとすると

開発用(vue.js)の場合は警告が出ます。本番用(vue.min.js)では何も出ません。

[Vue warn]: Failed to resolve filter: capitalize
(found in anonymous component - use the "name" option for better debugging messages.)

エラーにはならないけど、フィルターがないので元の内容がそのまま出てきます。

自分で作ろう

同じ名前でカスタムフィルタを作って登録すれば良いらしい。

先のガイドに、一通りのフィルタの代替コードが掲載されてます。

つくりかた

こんな感じで、 Vue.filter に名前と実装を教えてあげる感じらしい。

Vue.filter('uppercase', function (value) {
  return result.toUpperCase()
})

あとコンストラクタ?コンポーネント?何と呼ぶの? まあこんな感じで指定することもできた。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  filters: {
    uppercase: function (value) {
      return value.toUpperCase()
    }
  }
})
<div id="app">
  <h1>{{message | uppercase}}</h1>
</div>

昔あったフィルタの一覧

あんまり歴史を知らないけれどもこれで大丈夫ですか?

文字列以外のフィルタ

今回は自分の目的ではないんだけれども、例えば繰り返し時の並び替えなんかのフィルタも、前はあったけどv2でなくなったそうです。

よくわからないこと

キャッシュ

とかどうなってるんだろ? やっぱり {{theValue | myFilter}} みたいな書き方したら、 theValue 変更まで結果を確保して再計算しないようになってるんだろうか。

調べてない。

おしまい

観たことなかったけど面白いじゃないか。四年前かあ。

CSSで白抜き文字を作る方法。text-shadowで囲んでみよう。(CSS おれおれ Advent Calendar 2012 – 03日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 03日目

text-shadowでテキストに影を付ける事ができます。

text-shadow: <x> <y> <blur> <color>;

<x>, <y>は影の座標、<blur>はぼやけで、それぞれpxなんかで指定します。

また影をカンマ,で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。

割とよく使えるんじゃないかなーって思います。

実例

(さらに…)