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

Vue.js 忘備録(v-bind)

More than 1 year has passed since last update.

基本中の基本ともいえる v-bind と v-model ディレクティブについて。
:slight_smile:v-〇〇が出てきたらディレクティブと思っておこう

v-bind(属性バインディング)

v-bind の構文
v-bind:[属性]="プロパティ"

☆マスタッシュ記法({{ }})はテキストのバインディングに使用するためのものであり、属性に対して使用することはできない。(※htmlのタグの中に書くことはできない)
なので属性に対するバインディングはv-bind ディレクティブを用いて、HTMLのいずれかのタグ要素の属性として指定する。

特徴
・odel の値を HTML コンポーネントに反映(出力)する。
・HTML コンポーネントの値が変わっても、Model の値は変わらない。
・Model から HTML への一方通行。

コンポーネントとは

・本質的にはあらかじめ定義されたオプションを持つ Vue インスタンスのこと。
・つまり、名前付きの再利用可能な実体。
・同じオプションオブジェクトを受け入れる。
new Vue( ... )の形式

クラスとスタイルのバインディング

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