カスタムディレクティブとは 使い方 グローバルの場合 ローカルの場合 記載方法 bind inserted update componentUpdated unbind 省略記法 実際に設定する 修飾子も指定できる カスタムディレクティブとは v-ifやv-showなどのディレクティブを自分で作成し使…

仮想DOMとは 仮想DOMの経緯 仮想DOMとは DOM要素を模したJavaScriptのオブジェクトのことで 仮想ノード（VirtualNode:VNode）の集合体みたいなものと考えるとわかりやすそう 仮想DOMの経緯 document.createElementなどで直接DOM要素にアクセスして編集を行う…

Fire baseとは セットアップ Vueで使う場合 Firebaseの認証機能（Authentication）の設定 Vue内でログイン機能を実装 ログインユーザーの取得機能 ログアウト機能を実装 ログイン状態による表示の切り替え ログイン状態による遷移の制御 Cloud Firestoreを利…

Vuexとは Action Mutation State Getter 使い方 コンポーネントからストアを呼び出す方法 Actionの呼び出し方-dispatch Actionの呼び出し方-mapActions Getterの呼び出し方-mapGetters Vuexとは 公式 コンポーネント間でデータのやり取りをすると、親子のネ…

Vue Routerとは Vue Routerを追ってみる どこで宣言されているか？ ./router/index.jsでは何をやっているか router-viewとrouter-link router-view router-link ※ここに書かれているのはVueの新規プロジェクトの作成から立ち上げまで で作成した後のファイル…

単一ファイルコンポーネントとは 単一ファイルコンポーネントの作成 単一コンポーネントの利用 単一ファイルコンポーネントとは ※コンポーネントに関してはここ コンポーネントごとにファイルを分割したもの 適度に分割して書く為、再利用しやすくコンポーネ…

プロジェクトの作成 プロジェクトの作成 下記コマンドを実行 vue create 'プロジェクト名' その後下記画面が出る Vue CLI v3.9.3 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features これはデフォルトのプリセッ…

ライフサイクルとは 各ライフサイクルフックについて beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed ライフサイクルとは Vueのインスタンスが生成されてから破棄されるまでの流れ ダイアグラムが公式にあるのでこ…

watchメソッド watchオプション どっちも変数の監視を行うものだが、書き方が違うのでメモ watchメソッド 記載するには下記のように扱う。 $watchの引数には二つの関数を設定できる。 第一引数では、監視対象の変数を指定。 第二引数では、監視対象が変更さ…

環境 Node.jsの導入 nodebrewのインストール nodebrew経由でNode.jsをインストール PATH通し Vue CLIのインストール 環境 macOS Catalina 10.15.4 VSCode nodebrew 1.0.1 Node.js 12.16.2 Node.jsの導入 Vue CLI3を入れるためには、最低でもNode.jsのバージ…

コンポーネントとは ローカルで定義 グローバルで定義 コンポーネントの親子構造について コンポーネント間のデータのやり取り propsオプション $emitメソッド 親コンポーネントから子コンポーネントへデータを渡す 子コンポーネントから親コンポーネントへ…

inputタグ チェックボックス(単体) チェックボックス(複数) ラジオボタン セレクトボックス(単数選択) セレクトボックス(複数選択) 修飾子 .lazy .trim .number inputタグ チェックボックス(単体) チェックボックスに設定するv-modelの値をブーリアン型にす…

booleanでの制御 単数 複数 クラスを配列に格納 クラスをオブジェクトで管理 三項演算子を使ったCSS操作 インラインスタイルを使ったバインディング オブジェクトを使ってインラインスタイル booleanでの制御 単数 isLargeがTrueの場合はlageClassを適用する…

算出プロパティ メソッドと算出プロパティとの違い getterとsetter 監視プロパティ（ウォッチャ） 算出プロパティと監視プロパティの違い 基本 deep immediate 算出プロパティVS監視プロパティ 算出プロパティ 算出プロパティとは複雑な処理をかけるメソッド…

ローカルフィルター グローバルフィルター 引数が２つ以上ある場合 １回でフィルターを複数使う場合 Vueのフィルターはインスタンスで宣言するローカルフィルターと、 グローバルで設定し使用できるグローバルフィルターがある。 ローカルフィルター ローカ…

v-once v-pre v-html v-cloak v-once 要素とコンポーネントを一度だけ描画し、その後は静的コンテンツとして扱われスキップすることができる。 以上のことから更新性能を上げることができる 下記コードではボタン押下後内部のmessageプロパティは変化してい…

どうやったらVueを使えるのか 基礎知識 データバインディングとは Mustache構文 汎用的なディレクティブ ディレクティブとは v-bind v-if v-show v-for v-forの問題点 解決方法 v-on インラインイベントハンドラ 引数が複数あり、イベントオブジェクトを受け…