グローバルで使うメソッドを何とかしたい。教えて偉い人。 Vue.js 2016年07月01日 皆さんお気づきだろうか、今日が7月1日だということを。どうもベル子です。ブログの更新目標を過ぎてしまったわけだが、内容でカバーするつもりなので、そこんとこヨロシク！！嘘です、すみません。ということでVue.jsでのコーディングも慣れてきたにはきたのですが、ちょっと困っていることがあって、コンポーネントを拡張したり、グローバルなVueインスタンスやコンポーネントに共通で使うメソッドなどを混ぜ込みたいと思うことがある。どうすればいいか、みんなどうしてるのか。偉い人に教えてもらいたい。ググッてみた。だけどあんまり偉い人に出会えなかった。だから暇つぶしにドキュメントを見てみた。Mixinという概念に出会う ← 今ここMixinとは要するに共通で使いたいものを書いておいて、インスタンスの中で読み込むと既存の人たちに混ぜ込んでくれるよ！というものようだ。何やらすごく便利そうだ。私の求めていたもの、そうに違いない。createdなどのフック系は上書きされず順番に実行されて、methodsの中の関数みたいなのは、同じ名前だと上書きされていくようです。文字書いてもなんだか分からないと思うので、ちょっとしたサンプルを作りました。Mixinとか継承とかで遊んでみた on jsbin.comいろいろ遊びすぎて訳が分からなくなってますが、1つ分かったのはMixinだろうが、extendだろうが同名の関数は一番最後に上書きして定義したやつになる。createdに書いたやつは全部順番に実行される。グローバルのVueインスタンスに関数を混ぜ込みたいならMixinを使えばいい。ということのようです。なーるほどねー。ということはグローバルに使う可能性のある関数はMixinにすればええんやね。ということでいろいろ悩んでいたことは解決しました。やっぱりドキュメントは偉大です。 [0回]PR
Vue.jsでコンポーネント内のpropsにキーを追加する方法 Vue.js 2016年05月31日 どうもベル子です。今回はVue-routerネタを書こうと思ったんですが、ちょっと時間がないのでこちらのネタを先に。まず前提としてVue.jsはjQueryを使う場合と全く作法が違うのでJavaScriptのコーディングというよりは、もう新しいものとして理解するのがいいと思う。引きづられたり、無理やり組み合わせようとすると、シンプルなものも訳が分からなくなる。この何ヶ月かいじってみた私の感想。事前にモジュールバンドラーなどの知識が必要なので、モジュールバンドラーが何か不明なレベルの人はベル子の過去記事に目を通すといいと思う（宣伝）。【Vue.jsでのコーディングで主にすること】コンポーネントというアプリケーションで使うパーツをたくさん作って、それを組み合わせて大きなアプリケーションにしていく。以上。これだけ聞くとすごく簡単そう。そしてチュートリアルなんかをやってみると、びっくりするほど簡単に感じる。今まで自分がやってたことは何だったんだろうと思う。そしてコードが種類別に整理されていて、すごく読みやすい！ページの遷移はまったく必要なくなる。ただ、ハマりポイントも結構ある。今まで経験したことのないことをやろうとするので見本のコードが見当たらない。どう組めば実現できるのか想像ができない。jQueryと組み合わせたり、ほかのプラグインと組み合わせたりする必要が出てくるとDOMが生成されるタイミングとか気にしないといけなくて一気に闇。そして、かなりハマり度が高いのが、入れ子になっている親子コンポーネント間でのデータ渡し＆更新通知だ。子コンポーネントに親からprops経由でデータを渡したときに、コンポーネント内でpropsのオブジェクトにキー(厳密にはプロパティ)を追加したいとする。当然、以下のようにすると思う。this.user.text = 'いえーい';ベル子が年齢を詐称していることは気にせず、まあまずはこれを見てくれたまえ。https://jsfiddle.net/6yf84nyq/1/以下をコメントアウトしてupdateしてrunしてみて欲しい。// this.$set('user.text', 'やっほー');ひとことは表示されなくなっていることが分かると思う。詳細は以下を確認して欲しいんだけど、https://jp.vuejs.org/guide/reactivity.htmlprops経由で渡してあるデータに新しいプロパティをセットして、それをリアクティブにしたい場合はthis.$set('user.text', 'やっほー');のようにしないといけない。これを忘れて、「あれ？値は書き換わってるのにリアクティブにならない.....」ということがよくあるので、みんなも気をつけてね！では、急いでるので今日はこの辺で。 [0回]
[0回][0回]