Vue.js

フィルター（filter）でテキストをフォーマットするコンポーネント上で、表示したいdataを作成。mainで、フォーマット形式を定義。第１引数には、フォーマット名、第２引数には関数をかく。 Vue.filter("lowerCase",f...

ディレクティブとは、v-から始まるVueが提供しているパーツの事です。Vueが提供しているディレクティブについてはこちら↓Vueが提供してくれているもの以外でも、自分でv-を作成することができます。主に、抽象化したコードを再利用したい時に使...

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

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

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

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

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

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

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

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