2020-04-21 基礎からメモ： Vue.js CH9-p295 URLパラメータ付きの動的ページ Vue.js 簡単な商品一覧ページのサンプルを作る。 src/views/Home.vueとsrc/main.js、src/App.vueは前回と同じ。 まず商品一覧ページと商品詳細ページのコンポーネントを作る。 続きを読む
2020-04-21 基礎からメモ： Vue.js CH9-p284 Vue Router の導入と単純なSPA Vue.js Vue Router を導入してごく単純なSPAを構築するまで。 続きを読む
2020-03-30 基礎からメモ： Vue.js CH8-p278 その他の機能やオプション Vue.js Vuex ストアの状態監視 Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。 続きを読む
2020-03-30 基礎からメモ： Vue.js CH8-p270 モジュールでストアを分割する Vue.js Vuex モジュールの機能を使って、ストアを名前空間で分割し管理することができる。 続きを読む
2020-03-25 基礎からメモ： Vue.js CH8-p268 ヘルパーでコンポーネントとストアをバインドする Vue.js Vuex ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。 あらかじめ必要なヘルパーを読み込む。 続きを読む
2020-03-25 基礎からメモ： Vue.js CH８-p264 コンポーネントでストアを使う Vue.js Vuex コンポーネントでストアを使う 親子間コンポーネントで状態管理する例 まずsrc/store.jsを定義 続きを読む
2020-03-09 基礎からメモ： Vue.js CH7-p252 Vuexの導入 Vue.js Vuex Vuex は Vueアプリケーションで使うデータとその状態を一元管理する「状態管理」のための拡張ライブラリ。 深くネストされたコンポーネント構造では、コンポーネント間でpropsと$emitを使って各コンポーネントどうしのやり取りをする必要があるが、Vuex を使えばデータ管理がしやすくなる。 続きを読む
2020-03-03 基礎からメモ： Vue.js CH7-p231 Vue CLIの導入 Vue.js Vue CLI のインストール Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール $ npm install -g vue-cli 続きを読む
2020-03-02 基礎からメモ： Vue.js CH6-p210 SVGのトランジションとトランジションフック Vue.js SVGのトランジション SVGでマークアップされた要素にトランジション。 図形が入れ替わる。 続きを読む
2020-03-02 基礎からメモ： Vue.js CH6-p205 リストトランジション Vue.js リストの要素をグループ化して、追加、削除、移動のアニメーションを行う。 <transition-group>タグを使いtag属性でタグ名を指定する。tag属性を省略するとspan要素でラップされる。リストトランジションではキーの設定が必須。 続きを読む
2020-03-02 基礎からメモ： Vue.js CH6-p198 単一要素トランジション Vue.js <transition>タグの中に１つだけ存在する要素に対し使用するものを「単一要素トランジション」と呼ぶ。 続きを読む
2020-03-02 基礎からメモ： Vue.js CH6-p195 基本的なトランジションの使い方 Vue.js トランジション用クラスの適用 トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。 続きを読む
2020-01-21 基礎からメモ： Vue.js CH5-p184 その他の機能やオプション Vue.js 関数型コンポーネント functionalオプションを付けることで、関数型コンポーネント（状態とインスタンスを持たない）を定義できる。 続きを読む
2020-01-21 基礎からメモ： Vue.js CH5-p179 テンプレートの定義方法 Vue.js テンプレートの種類 templateオプション 今まで出てきた書き方。ES2015が使えるなら、テンプレートリテラルが便利 Vue.component('my-calendar', { template: `<div> <p>..........</p> </div>` }); 単一ファイルコンポーネントを使わない場合は、このtemplateオプションが推奨。 続きを読む
2020-01-12 基礎からメモ： Vue.js CH5-p175 コンポーネントの双方向データバインディング Vue.js 親子間でデータを受け渡ししたい場合、親から子へはpropsを介して渡す、子から親へはイベントを$emitするという決まりになっていた。 $emitを介さずに子からpropsで渡された値を更新しようとするとエラーになった。これは親のデータを子から簡単に変更できてしまっては問題があるからだ。 しかし子コンポーネントのインプットフォームに入力された値で、親コンポーネントのデータを更新したいといったケースは多い。v-modelを使えば少し簡易にこれが可能になる。 続きを読む
