Help us understand the problem. What is going on with this article?

【Vue.js】コンポーネントの属性について

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

コンポーネントの属性について

VueでHTMLのタグの属性に値を設定する場合に、「v-bind」というものを利用します。v-bind:○○という形で属性を指定することで、Vueオブジェクトを用意した値をコンポーネントタグの属性に指定して表示させることができます。

v-modelで値をバウンド

値を入力してその値をコンポーネントに表示します。
コンポーネントの場合は「v-model」というものを使用します。
「v-model」はinputに入力された値の値をVueのdataプロパティの値にバインドする機能になります。
入力された値を変更するとリアルタイムでバインドされた変数の値が更新されます。

<input v-model="変数名">

上記のように記述します。

v-onでバインドする

イベント関係の属性に値をバインドさせるためのもの。

v-on:イベント名="・・・処理・・・"

イベント名には、属性として用意する値から「on」を取り除いたものを使います。例えば、onclickをバインドしたいならば、v-on:clickとなります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away