2020-03-01から1ヶ月間の記事一覧
ストアの状態監視 Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。
モジュールの機能を使って、ストアを名前空間で分割し管理することができる。
ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。 あらかじめ必要なヘルパーを読み込む。
コンポーネントでストアを使う 親子間コンポーネントで状態管理する例 まずsrc/store.jsを定義
Vuex は Vueアプリケーションで使うデータとその状態を一元管理する「状態管理」のための拡張ライブラリ。 深くネストされたコンポーネント構造では、コンポーネント間でpropsと$emitを使って各コンポーネントどうしのやり取りをする必要があるが、Vuex を使…
Vue CLI のインストール Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール $ npm install -g vue-cli
SVGのトランジション SVGでマークアップされた要素にトランジション。 図形が入れ替わる。
リストの要素をグループ化して、追加、削除、移動のアニメーションを行う。 <transition-group>タグを使いtag属性でタグ名を指定する。tag属性を省略するとspan要素でラップされる。リストトランジションではキーの設定が必須。</transition-group>
<transition>タグの中に1つだけ存在する要素に対し使用するものを「単一要素トランジション」と呼ぶ。</transition>
トランジション用クラスの適用 トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。</transition>