2020-03-01から1ヶ月間の記事一覧

基礎からメモ: Vue.js CH8-p278 その他の機能やオプション

ストアの状態監視 Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。

基礎からメモ: Vue.js CH8-p270 モジュールでストアを分割する

モジュールの機能を使って、ストアを名前空間で分割し管理することができる。

基礎からメモ: Vue.js CH8-p268 ヘルパーでコンポーネントとストアをバインドする

ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。 あらかじめ必要なヘルパーを読み込む。

基礎からメモ: Vue.js CH8-p264 コンポーネントでストアを使う

コンポーネントでストアを使う 親子間コンポーネントで状態管理する例 まずsrc/store.jsを定義

基礎からメモ: Vue.js CH7-p252 Vuexの導入

Vuex は Vueアプリケーションで使うデータとその状態を一元管理する「状態管理」のための拡張ライブラリ。 深くネストされたコンポーネント構造では、コンポーネント間でpropsと$emitを使って各コンポーネントどうしのやり取りをする必要があるが、Vuex を使…

基礎からメモ: Vue.js CH7-p231 Vue CLIの導入

Vue CLI のインストール Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール $ npm install -g vue-cli

基礎からメモ: Vue.js CH6-p210 SVGのトランジションとトランジションフック

SVGのトランジション SVGでマークアップされた要素にトランジション。 図形が入れ替わる。

基礎からメモ: Vue.js CH6-p205 リストトランジション

リストの要素をグループ化して、追加、削除、移動のアニメーションを行う。 <transition-group>タグを使いtag属性でタグ名を指定する。tag属性を省略するとspan要素でラップされる。リストトランジションではキーの設定が必須。</transition-group>

基礎からメモ: Vue.js CH6-p198 単一要素トランジション

<transition>タグの中に1つだけ存在する要素に対し使用するものを「単一要素トランジション」と呼ぶ。</transition>

基礎からメモ: Vue.js CH6-p195 基本的なトランジションの使い方

トランジション用クラスの適用 トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。</transition>