はじめに 前回（～img src編②～）の続き 前回はv-ifの条件をurl（親のプロパティ）にしていたが、今回はchildUrl（子のdataプロパティ）にする 話すこと 前回と同じで、以下コードを例にどのライフサイクルフックをつかったら、どんな挙動を示すのかを順にみ…

はじめに 前回～imgのsrc編①～の続き 今回はv-ifの値が子コンポーネントで定義したdataプロパティだった時はどうなるのか、といいう確認がしたい いまだに画面描画時に処理をしたい時にbeforeCreate, created, beforeMount, mountedの内どれを使えばいいのか…

はじめに Vueのライフサイクルフックの理解が曖昧だった。 特にコンポーネント間でpropsを使った、ページが描画されてすぐのcreated, mounted...あたりの理解が曖昧 以下のようなコードを見た時に 「どのタイミングで」 「どのようにurlプロパティが変化して…

https://qiita.com/yukibe/items/f49fcb935363200916fe computed 算出プロパティ 以下のような可読性の悪いテンプレート内のコードをすっきりさせる ↓before <div id="example"> {{ message.split('').reverse().join('') }} </div> ↓after <div id="example"> <p>Original message: "{{ message }}"</p> <p>Compu</p></div>…

はじめに 業務でVueを使っており、「動的コンポーネント」という概念が原因でうまくタスクが進まなかったことがあった 具体的には、共通JSであるapp.jsに書いたjQueryが、Vueから呼び出せない、という事象 尚、Vueではv-forを使っていた 当時の実装イメージ …

https://jp.vuejs.org/v2/style-guide/#優先度B-のルール-強く推奨-読みやすさの向上 コンポーネントのファイル 悪い例 コンポーネントのグローバル登録＋そこで処理を書く main.jsとかに全部のコンポーネントの処理を書くイメージ Vue.component('TodoList'…