vue.js

【ポプテピピック】数多くの名誉ある○○メーカー

数多くの名誉ある○○メーカー 前に作ったポプテピピックの帯をカスタマイズできるようにした。 tamoriinu-3.hatenablog.com デフォルトでは某漫画家そっくりのフリー素材の方の画像になっているが、「画像を選択」ボタンで変更可能。 名誉あることを変更・追…

山手線を描く

See the Pen 山手線 by tamoriinu (@yokoyama) on CodePen. この間見つけた以下のsass mixinが便利なので、山手線の沿線図を描いてみた。 Placing Items on a Circle | CSS-Tricks 吹き出しの位置とか結構適当。 色々他にも応用できそうな気がする。

vue.jsのカスタムイベントの名前はキャメルケースでは動かない(例外あり)

github.com jp.vuejs.org タイトル通りでケバブケースかすべて小文字にする必要がある。 HTML attributes are case-insensitive だから。 なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。(ちょっと面倒臭い) 【動かない例】 jsfid…

vue.jsによるカルーセル

qiita.com 上記のカルーセルを少しだけ変更。前後で端まできたら一巡するようにした。 それだけ。 See the Pen vuejs_carousel2 by tamoriinu (@yokoyama) on CodePen.

vue.jsでStoreパターンを使用した時のv-model代用設定

v-model を使うとStoreを通さずにdataが変わってしまう。 Storeパターンの制約を守るために以下のように:valueを更新する必要がある。 See the Pen Storeパターンにおけるv-modelへの対処 by tamoriinu (@yokoyama) on CodePen.

Vue.jsによるデータ絞り込み

Codegridの連載を元にちょっとだけ変えたもの。 複数選択するとandで絞り込むSee the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.

Vue.jsの何が嬉しいのか?

前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVu…

vue.jsによる絞り込み

See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.

vue.js component

gihyo.jp上記の「フルーツの名前をリストするコンポーネント」を、記載されているコードを 元に作成してもエラーになる。(vueのバージョン1系でも2系でも駄目) どうにもスッキリしないので動くように直した。