- 2020年2月23日
- 2021年7月5日
Laravelのslot機能でボタンの文言を変えて使い回す！
はじめに Laravelのbladeでhtmlのコーディングを行っていると、「Vueのコンポーネントの様に中身だけ変えて使い回したい！って場面が多々出てくると思います。 そんな時にLaravelに元々あったsectionとは別にslotという機能がめ […]
MONTH
2020年2月
- 2020年2月22日
- 2020年3月5日
v-slotで親子間で様々なやりとりを行う
v-slot propsはあくまでStringやNumberなどのデータしか送れません。htmlタグを送る時は別のやり方があります。 子コンポーネントに受け皿としてslotを使う 以下の様に、子コンポーネントでは受け皿として<slot>を […]
- 2020年2月22日
- 2020年3月5日
Vue-cliについて学ぶ
プロジェクトとは プロジェクトとは、プログラムの作成に必要な色々なファイル(スクリプトファイル、イメージファイルなど)をまとめて管理するものです。 今までやってきた様な自分で1からファイルを全て作成する様なやり方はフルスクラッチと呼び、区分されていま […]
- 2020年2月17日
- 2020年3月5日
親コンポーネントから子コンポーネントへのデータの受け渡し
コンポーネント間でdataの受け渡しで出来ること 親コンポーネントの内容に合わせて子コンポーネントの内容も変える事が可能です。 例えばブログサービスをやってる時、親コンポーネントに書いた内容によって、子コンポーネントのタイトルやフォント、文字色なんか […]
- 2020年2月16日
- 2021年10月27日
methodsとcomputedを使ってイベント処理を行う
はじめに 「v-on」の記事にてイベントの作り方は説明しました。 その時の様に、処理が短い場合はそのままダブルクウォークテーションの中に書く事が多いです。しかし、長い処理をした場合にはそのまま書くのは煩雑で見にくくなってしまいます。 そのような場合に […]
- 2020年2月15日
- 2020年3月5日
v-model ・v-onを理解する
今回はVueのテンプレート構文であるv-modelとv-onの使い方や実用例をみていきます。これまでにVueのテンプレート構文ではv-ifでの条件分岐、v-forでのループ処理、v-bindでの属性のバインドを見てきました。詳しくは以下の記事をご覧く […]
- 2020年2月11日
- 2020年3月5日
Vueコンポーネントを利用する
はじめに これまでVue.jsの基本的な使い方やテンプレート構文について触れてきました。その中では1つのVueオブジェクトの中に全てを記述していました。 今後、より複雑なアプリケーションを作る際にVueオブジェクトを複数作る事もしばしば出てきます。 […]
- 2020年2月11日
- 2020年2月11日
scssの使い方・書き方入門
scssとは scssはcssを効率的に書く事のできるメタ言語です。cssの場合、長く複雑な記述をしなければいけない所を、scssを使うとわかりやすくシンプルに書く事ができます scssの使い方 実際にscssを使っていく際に.scssか.sassと […]
- 2020年2月10日
- 2021年7月5日
Vueで簡単な税込み・割り勘計算アプリを作る
前置き Vueの基礎文法の復習として以下の要件の税込み・割り勘計算アプリを作りました。 コンポーネントやcomputed、methods、v-on、v-modelなどの簡単な解説も添えたので、Vue初学者の参考になるかと思います。 また本記事では過去 […]