CATEGORY

Vue.js

  • 2020年3月8日
  • 2020年3月8日

動的コンポーネントを使い表示内容を切り替える

こんにちは!てりーです(@teriteriteriri)。今回はVue.jsで動的にコンポーネントを切り替える方法を見ていきます。 動的コンポーネントの使い方 :is=”変数”で切り替える 分かりやすい例です。コンポーネントを […]

  • 2020年3月4日
  • 2021年10月27日

Vue.js・Reactを触る際に知っておきたい仮想DOMの話

記事の概要 昨今、様々なプロダクトにおいて使われているVue.jsとReact。人気の理由の1つにリアクティブなブラウザの描画があげられます。 ブラウザの再描画を支えている技術が「仮想DOM」なのですが、Vue.js・Reactからフロントエンドを触 […]

  • 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月10日
  • 2021年7月5日

Vueで簡単な税込み・割り勘計算アプリを作る

前置き Vueの基礎文法の復習として以下の要件の税込み・割り勘計算アプリを作りました。 コンポーネントやcomputed、methods、v-on、v-modelなどの簡単な解説も添えたので、Vue初学者の参考になるかと思います。 また本記事では過去 […]

  • 2020年1月29日
  • 2020年3月5日

v-forとv-ifを使ってリストを状況に応じて表示する!

はじめに 今回はvueのテンプレート構文であるv-forの基本的な使い方を解説し、v-forとv-ifを組み合わせて下記の様な仕組みを作っていきます。 v-ifに関しては過去の記事にて解説しているので、そちらを参考にして下さい。 v-forの使い方 […]

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping