Vue
今回の目標 前回環境構築を行なったが、 前回の状態だとソースコードを更新してもイメージの再作成を行わないと反映されないので反映されるように設定を行う。 また、起動周りをDocker Compose で行うようにdocker-compose.ymlファイルの作成を行う 今回の目…
今回の目標 DockerFileを作成し、Docker内でVueが動くようにする 次回 docker-compose を使い複数のコンテナを制御できるようにする為記事を分割 今回の目標 環境 vueのプロジェクトを作成 Dockerfile作成 イメージの作成 コンテナ作成 補足 参考記事 環境 M…
カスタムディレクティブとは 使い方 グローバルの場合 ローカルの場合 記載方法 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の新規プロジェクトの作成から立ち上げまで で作成した後のファイル…
ライフサイクルとは 各ライフサイクルフックについて 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のバージ…
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 インラインイベントハンドラ 引数が複数あり、イベントオブジェクトを受け…
