2020-04-01から1ヶ月間の記事一覧
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監視プロパティ 算出プロパティ 算出プロパティとは複雑な処理をかけるメソッド…
ローカルフィルター グローバルフィルター 引数が2つ以上ある場合 1回でフィルターを複数使う場合 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 インラインイベントハンドラ 引数が複数あり、イベントオブジェクトを受け…