v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

親コンポーネントから子コンポーネントへのデータの受け渡し

コンポーネント間でdataの受け渡しで出来ること 親コンポーネントの内容に合わせて子コンポーネントの内容も変える事が可能です。 例えばブログサービスをやってる時、親コンポーネントに書いた内容によって、子コンポーネントのタイトルやフォント、文字色なんかを自由に変更させていけます。 propsを使って親から子へデータを渡していくのですが、これが使える様になる表現の幅がめちゃくちゃ広がる超優秀な子です!! 親から子へのデータの渡し方 静的なデータの受け渡し まず一番簡単な静的な受け渡しの例を見ていきましょう。以下のコードでは親から子にnumberを渡すことで、「6」が表示されます。 親コンポーネント この様にそのままpropsに値を代入して子コンポーネントに渡すことが可能です。今回だとnumberに6を渡しています。 子コンポーネント propsにて親からのnumberを受け取ります。propsの”number”には親から受け取った6が入るので、pタグでの出力にも6が反映されます。 動的なデータの受け渡し 静的な時と大きくは変わりませんが、親コンポーネントで扱うデータをv-bindで定義していきます。最初に例にあげたブログタイトルの例で見ていきましょう。 親コンポーネント 直接埋め込むのではなく、v-bind(省略系の:)を使ってtitle変数を設定しています。後にdataにてtitleに値を入れる事が可能です。 子コンポーネント 静的な場合と大きな変化はないです。propsに親コンポーネントで定義したtitleの値が渡されます。 おまけ キャメルケース、ケバブケースの使い分け …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

methodsとcomputedを使ってイベント処理を行う

はじめに 「v-on」の記事にてイベントの作り方は説明しました。 その時の様に、処理が短い場合はそのままダブルクウォークテーションの中に書く事が多いです。しかし、長い処理をした場合にはそのまま書くのは煩雑で見にくくなってしまいます。 そのような場合に使用する構文が今回説明していく「method」と「computed」になります。 methods methodsとは コンポーネントオプションの1つです。Vueインスタンスに対してデータオブジェクトを渡してくれます。 同じデータオブジェクトとしてはpropsやdata、computedなどがあります。それぞれ違いはありますが、大まかな区分として初期状態やデータはpropsやdata。関数チックな処理はmethodsかcomputedを使うケースが多いです。 methodsの使い方 methodsはメソッドなので呼び出しには引数が必要です。以下の様に呼び出し可能です。 コンポーネント内に以下の様に書きます。 methodsの実用例 今回のコードはv-on:clickでhelloというメソッドを用意して、処理はmethods部分に書いています。ボタンをクリックすると、アラートとして「hello+現在のtext+!」が表示されます。 computed computedとは computedは算術プロパティと呼ばれています。基本的にmethodと同じように定義できるコンポーネントオプションです。methodsとの違いは後ほど説明します。 computedの使い方 computedの呼び出しはdataの様に行えます。(引数の必要なし) …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-model ・v-onを理解する

今回はVueのテンプレート構文であるv-modelとv-onの使い方や実用例をみていきます。これまでにVueのテンプレート構文ではv-ifでの条件分岐、v-forでのループ処理、v-bindでの属性のバインドを見てきました。詳しくは以下の記事をご覧ください。 v-model v-modelとは v-modelは、<input>に入力された値をVueのdataプロパティの値やコンポーネントの変数にバインドする機能で、入力された値をリアルタイムに表示することができます。 使用方法は以下の通りです。 変数名はVueインスタンスで指定したdataプロパティの名前や、コンポーネント内で指定した変数名の名前です。 v-modelの実用例 v-modelの実用例です。<input>タグに入力した値が、{{sample}}二つぐに反映される事が確認できます。 html部分 <input>タグに対してv-modelで変数「sample」をバインドしています。こうする事で、<input>タグに入力された値を変数sampleに代入する事ができます。 script部分 こちらは単純です。Vueインスタンスを作り、中にdataオブジェクトとして変数sampleを作っています。初期値は今回空にして入力値が分かり易いようにしています。 v-modelはv-bindと違い v-modelは双方向のバインドになります。なのでhtml側で入力した値がModelに反映されます。 ちょっと難しくなりましたが、現段階ではv-bindでは入力した値は即座には反映されない(イベントを発火させて変えることは可能)。 v-modelは入力値が即座に変数に反映!と覚えておくと良いでしょう v-on v-onとは …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

Vueコンポーネントを利用する

はじめに これまでVue.jsの基本的な使い方やテンプレート構文について触れてきました。その中では1つのVueオブジェクトの中に全てを記述していました。 今後、より複雑なアプリケーションを作る際にVueオブジェクトを複数作る事もしばしば出てきます。 そこで、使えるのがコンポーネントです。 コンポーネントとは 一言でまとめると「名前付きの再利用可能な Vue インスタンス」です! 作成方法は以下の通り。 実際にHTMLとして出力して欲しい箇所は設定情報の中にオブジェクトで書きます。 具体的には templateの中にpタグやbuttonタグを記述しました。 また、html内で呼び出してあげたい時は、 で簡単に呼び出せます。 helloコンポーネントを作成してみる 基本的な使い方を知った所で、実際にコンポーネントの実例を見ていきましょう。helloコンポーネントを作成し、その中に「Hello!」と記述して出力できるかを試してみます。 コンポーネントを利用している部分 ここにtemplate内のhtml文が挿入されています。 …

Read More
スクリーンショット 2020-02-10 18.11.45
Vue.js

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

前置き Vueの基礎文法の復習として以下の要件の税込み・割り勘計算アプリを作りました。 コンポーネントやcomputed、methods、v-on、v-modelなどの簡単な解説も添えたので、Vue初学者の参考になるかと思います。 また本記事では過去の記事で触れた「vueインスタンスの基礎」や「v-if」についての解説は入れていません。必要に応じてこちらを参考にしてください。 要件 任意の数と人数が入力されたときに以下の二つの出力をできるようにする。(数、人数ともに整数とする) 1.税込みの値 2.税込み金額を人数で割った値 完成品 本編 さて、実際に作成に入っていきましょう。 一旦、完成物のコードを見て頂き、それを沿って解説を入れていこうと思います。 完成版ソースコード 解説 コンポーネントの出力 61~63行目: 以下の記述をすることで、「Calculationコンポーネント」を呼び出しています。 65~106行目: …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

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

はじめに 今回はvueのテンプレート構文であるv-forの基本的な使い方を解説し、v-forとv-ifを組み合わせて下記の様な仕組みを作っていきます。 v-ifに関しては過去の記事にて解説しているので、そちらを参考にして下さい。 v-forの使い方 繰り返し表現であるfor文に相当するテンプレート構文です。構文は以下の様に書きます。 配列の中身が変数に格納されます。この配列にはオブジェクトも入れることができ、オブジェクトを入れた場合は以下のようになります。 itemに値、keyにプロパティが格納されます。 買い物リストを出力する まず、上記の様な買い物リストを使って、v-forの基本的な使い方を見ていきましょう。 var dataにて買い物リストの内容をitems配列に設定します。v-forを使ってそれをitemに格納し、リスト表示させればOKです。 リストを条件に応じて表示する さて、v-forとv-ifを使ってクリックするとリストが表示される仕組みを作っていきましょう。 要件・リストバー(柱、上弦)をクリックするとリストの中身(キャラクター名)が表示される。・再度リストバーをクリックするとリストの中身が閉じる。・v-forとv-ifを使う。 サンプルコード html部分 6行目・buttonタグにonclick(クリックした際の反応)でdoAction関数をセットしいます。 8行目・v-ifを使って条件分岐をしています。(今回は変数haのtrue …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-ifで条件分岐をしよう!

はじめに Vueのテンプレート構文を学んでいきます。前回はv-bindを使ってstyle属性をバインドすることで、色やフォントサイズを変えていきました。 今回はv-ifの基礎や使い方を説明していきます。 v-ifの基本的な使い方 条件分岐のif文に相当するテンプレート構文です。 以下のように記述します。 この場合だと条件式の場合は「内容①」それ以外の場合は「内容②」が出力されます。 3つ以上の条件分岐 v-ifも他のプログラミング言語と同じ様に、elseifを使うことで条件分岐を増やすことができます。例えば3つの条件分岐を行いたい場合は この場合は条件式Aの時は「内容①」条件式Bの時は「内容②」それ以外の場合は「内容③」が出力されます!!!慣れちゃえば簡単ですね。。 例題!3の倍数判定カウンター 要件・カウンターを作り、クリックした回数を数えられる様にする。・カウンターが3の倍数の時は「3の倍数です」と出力する。・カウンターが3の倍数の時には「3の倍数ではありません。余りがXです」と正しい余りを入れて出力する。 解説 HTML部分 「カウント数を3で割った余りによって内容が変化する」ようにv-if、v-else-if、v-elseを使用して条件分岐をさせています。 また、3行目のv-ifでは3の倍数にする為に「カウント数を3で割った余りが0」と「カウント数が0でない」の二つの条件式を設定しています。 条件式において・A かつ …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

v-bindでスタイルを変える

はじめに 前回のVue入門①ではVueの基本的な書き方についてまとめていきました。 今回からはVueのテンプレート構文に入ります テンプレート構文はVue独自の書き方で、Vue学習の基本に当たる部分になります。 v-bindとは? v-bindはタグの属性の値に変数などを設定できます。設定する値には変数やオブジェクトなどを入れることができます。 宣言方法は 例題!v-bindでスタイルを変えよう! 例題:v-bind使って文字の色とフォントサイズが違うexample1とexample2を出力する。各文字の色とフォントサイズは以下に示す。 example1:文字色=red、フォントサイズ=20ptexample2:文字色=blue、フォントサイズ=30pt やる気のある人は一緒に考えてみましょう!! 解説 <出力結果> <使用コード> v-bindに該当する所の詳細を見ていきます。 表示(出力)の部分 今回は文字色とフォントサイズを変更するので、v-bindを使ってstyle属性を指定しています。styleの値は上はstyles、下にはstyles_2を置いています。 スクリプト …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (16)
Vue.js

Vueで「Hello Vue!!」を出力する

はじめに 本記事はVueの初心者を対象に、Vueでどうやって「Hello Vue!!」が出力されているかについて記しました。 また、掌田津耶乃氏の「Vue.js&Nuxt.js 超入門」を参考にしています。 本記事を読んでVueについて深く知りたくなったら是非、手に取って下さい。 Vueの基本的な型 Vue.jsは大きく分けて「出力の部分」と「スクリプト」の2か所から成り立っています。 これを「Hello Vue!!」を出力する方法例に見ていきましょう。 解説 表示(出力)の部分 上のコードのポイントは2つです。 ・[id=”app”]とcssセレクタを宣言している点。・{{message}}で変数のmessageに値を入れている点。ちなみにこの構文をムスタシェ構文という。(らしい笑) スクリプト 3行目~5行目:var data ={‥省略‥}:dataという変数にオブジェクトを作っています。 8行目~11行目:var …

Read More
238d7e91-fd60-ce16-b071-6be3275434f2
エンジニアリングライフ

Vue.jsで簡単なアプリケーションを作るまでに学んだこと

はじめに 完全に個人用の備忘録として作りました。 udemyの「Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)」で学習した内容のメモになります。 内容としてはsection1~4まで。 背景 仕事の関係でVue.jsを使うので、「関わりたいなら最低限これやってねー!」と言われたのがudemyの「Vue JS …

Read More
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
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping