2020-01

JavaScript

【Vue.js】v-modelでフォーム要素をコントロールする

v-modelの使い方 v-から始まるディレクティブについて書いた記事はこちら↓ 改めて、inputタグとv-modelでデータバインディングをする方法を記載。 lazy修飾子 v-modelに.lazy修飾子をつけることによって、inpu...
2020.01.31
JavaScript
JavaScript

【Vue.js】動的コンポーネント

動的にコンポーネントを切り替える方法 componentタグとv-bind:is を使って切り替えを実装する 切り替えを行いたいコンポーネントをインポートしてcomponentsで定義させる。 今回はボタンを設けて、それぞれのボタンが押され...
2020.01.30
JavaScript
JavaScript

【Vue.js】slotを使ったコンポーネント間のデータ受け渡し

いままでのコンポーネントについての記事はこちら↓ htmlタグを含めて子にデータを送る時 親テンプレート上で、子コンポーネントのタグ内に送りたいHTMLを記載する。{{}}も使用可能。 子テンプレート上では、受け取りたい箇所に<slot>を...
2020.01.29
JavaScript
JavaScript

【Vue.js】console.logでUnexpected console statementが出たときの対処法

console.logを入力するとエラーが起こる時の対処法。このエラーは、ESLintという構文検証ツールが表示させている。 エラーを非表示にするには、console.logの上部に「 eslint-disable-next-line no...
2020.01.29
JavaScript
プログラミング勉強法

【独学】わたしが実践したプログラミング学習教材

プログラミングをいざ勉強しよう！と思っても独学だとどこから手をつければいいかなかなか分からないと思います。プログラミングの独学については様々なサイトがありますが、今回は私が実際に使用したサイトと勉強法をお伝えします。 自分の学びたい方向性を...
2020.01.29
プログラミング勉強法
JavaScript

【Vue.js】コンポーネント間でのデータ受け渡し

親から子へデータを受け渡す 子コンポーネント上でpropsを使って、親から子へ受け渡しをしたい値の変数名を定義していく。propsはプロパティの略。配列かオブジェクトで記載していく。 propsは「,」カンマで区切る事で、複数作ることが可能...
2020.01.28
JavaScript
JavaScript

【Vue.js】コンポーネントの登録方法

Vueは、ひとつのインスタンスにつき、ひとつのテンプレートにしか適用されない仕様です。インスタンスを再利用するときは、コンポーネントを使用します。 コンポーネント登録の方法 グローバル登録とローカル登録があります。 グローバル登録 グローバ...
2020.01.27
JavaScript
JavaScript

【Vue.js】CLIを使う

CLIを使うメリット 大規模アプリケーションの開発に用いられるファイルの分割ができる最終的に公開するコードをminファイル化してくれる（軽量化）プラグインの追加が簡単になるHMR（HTMLを変更した時にブラウザーに自動的に保存される）SCS...
2020.01.24
JavaScript
JavaScript

【Vue.js】インスタンスについてのメモ

Vueインスタンスは複数作成可能 Vueインスタンスは複数作成する事が可能。但し、複雑化することからインスタンスはひとつにまとめることが望ましい。 他のVueインスタンスからアクセスする方法 Vueインスタンスを変数に格納することにより、外...
2020.01.23
JavaScript
JavaScript

【Vue.js】v- ディレクティブまとめ④～リストレンダリング～

前回までの記事はこちら↓条件分岐ディレクティブ（下記２記事） その他のディレクティブ v-for 配列に基づいて描画する。 配列をそのままリスト表示 dataで指定した配列に基づいてList表示させる方法。v-for="word in gr...
2020.01.21
JavaScript
次のページ