プログラミング

JavaScript

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

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

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

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

【Vue.js】CLIを使う

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

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

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

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

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

【Vue.js】v- ディレクティブまとめ③~条件分岐補足~

前回のv-から始まるディレクティブまとめはこちら↓※前回はif等の条件分岐についてでした。その他のv-ディレクティブについてまとめた記事はこちら↓v-show切り替えをしたい時につかうディレクティブ。v-ifと同じように使用することができる...
JavaScript

【Vue.js】v- ディレクティブまとめ②~条件付きレンダリング~

v-から始まるディレクティブのまとめ記事はこちら↓v-ifif文。条件がtrueもしくはfalseの時に実行される。falseの時に表示したい場合、textをfalseに変更して、v-ifディレクティブのdata参照に「!」をつける。大概の...
JavaScript

【Vue.js】computedとmethodの違い

computedとmethodは同じ描画をしてくれますが、下記違いがあります。この違いが公式ページでも書かれていますので、リンクを貼ります。 >vue.js公式ページcomputed依存関係が更新された時だけ実行する。呼び出す時に()がいら...
JavaScript

【Vue.js】v-ディレクティブまとめ

Vue特有のv-から始まるディレクティブをまとめてみました。<環境>Vue.js v2v-textdataの文字列表示。{{}}と同じ意味を持ち、同じ使い方をする。v-once一度だけ表示させたい時に使う。v-htmlvueで作成したHTM...
JavaScript

【Vue.js】v-onでイベントをハンドリングしてみる

前回の記事はこちら↓今回やりたい事「ボタンをクリックしたら、表示するテキストを変更する。」を実装します。前回作成したコードにイベントを追加していきます。前回のコードはこちら↓HTMLにボタンを追加前回のコードにbuttonを追加します。bu...