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となります。