寝て起きて寝て

プログラミングが出来ない情報系のブログ

javascript

コンポーネント

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

v-modelのinputタグ+修飾子

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

Vueのクラス系バインディング基礎

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

算出プロパティと監視プロパティ

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

Vueのfilterの使い方

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

Vueその他のディレクティブ

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

VueJS入門メモ

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

Promiseメモ

Promiseとは ある処理が完了したら呼ばれる関数 Promiseは3つの状態を持っている ・ unresolved(実行待ち) ・ resolved(成功) ・ rejected(失敗) thenで成功時の処理を実行 catchで失敗時の処理を実行する promise = new Promise((resolve,reject)=>{ …

動的プロパティ

動的プロパティとは 動的プロパティとは、でKeyを設定すると、 内の処理が評価された後それがKeyとなる動作のこと 例1: const obj = { [1+2]:'key' } obj//{"3":"key"} 例2: const id = 'column' const obj = { [id]:'コラム' } obj//{"column":"コラム"…

ES6継承メモ

使い方 ・ ES5 function Book(options) { this.title = options.title; this.ReadFlag = false; } Book.prototype.isRead = function () { return this.ReadFlag; } function Takashi(options) { Book.call(this, options);//Bookを継承 this.price = option…

分割代入(Destruicturing)メモ

分割代入とは ・ 参照元がオブジェクトの場合 代入元と代入先のkeyと変数名が”””同じ”””であれば、 {key名} = オブジェクト名で代入することができる 存在しないkeyを指定した場合はからの変数が作られるだけで、エラーにはならない(参照するとundefinedにな…

Rest演算子とSpread演算子メモ

Rest演算子 引数を可変にしたい場合使う 引数に「..."変数名"」と記載すると引数が複数個合った場合 配列として引数に格納される function restTest(...num){ console.log(num); } restTest(1,2,3,4,5,6,7); 出力結果 (7) [1, 2, 3, 4, 5, 6, 7] Spread演算…

ES6で追加されたアロー関数基礎知識メモ

書き方 ・ES5では ・ES6では 1行で完結するのであれば 引数が”””1つ”””なのであれば 引数が0個なら アロー関数の利点 エラーが出る例 ES5のエラー回避方法 ES6のエラー回避方法 どこでもアロー関数を使っていいわけではない 書き方 ・ES5では const add = fu…

ES6で追加されたメソッドメモ

forEach 今どきfor(let i=0;i