Vueで分からないことがあります。教えてください

Question

vueの勉強中です。
v-bindの動作や機能について分からないことがあるので教えてください。
下のhtmlでは変数aの値をv-bindを使ってbに入れて、hoge and hogeと出力させたかったのですが、上手く行きませんでした(aのほうしかhogeと表示されず、bは消えてしまった。その結果、hoge andのみの出力となっている)
これを見ると、配列postsの要素をv-bindを使って他の変数(key,title)に格納しているようです。v-bindには新しい変数を宣言するような機能はないのでしょうか？
どこがおかしいのでしょうか？書き方に認識違いがありましたら教えてほしいです

<div id="vind" v-bind:b="a"> {{a}} and {{b}} </div> <script> var vbind=new Vue({ el:"#vbind", data:{a:"hoge"} }) </script>

Answer 1

それはコンポーネントという機能を使って子コンポーネントのプロパティに親から
値を渡すときの話で基本v-bind:xxxはその属性(xxx)に指定した値を使うって意味になります。

<div id="vbind">
  <div v-bind:id="a">
    {{a}} and {{b}}
  </div>
</div>

これでdivのidがhogeになる感じです。

  var vbind = new Vue({
    el: "#vbind",
    data: {
      a: "hoge",
      b: ""
    },
    created: function() {
      // 代入は代入で普通にスクリプトで行う
      this.b = this.a;
    }
  })

Comments

[ahbdjdhdh]

子コンポーネントのプロパティに値を渡した場合は、子コンポーネント内では変数として使えるってことですか？
それとも子コンポーネント内でもタグの属性としてしか使えないのでしょうか？

[sousuke]

違います。基本的にコンポーネントもそうでない場合も変数(dataのプロパティ)は
自分で定義する必要がありv-bindの効果だけで新しく変数を生やすことはできないと思ったほうがいいです。v-bind:xxx="a"は「xxxにaを束縛している」「xxxはaに依存している」というただの宣言で、代入式ではないです。

タグの属性としか使えないわけではなく自身の関数で利用できたり普通になんでもできます。
何回も修正すみません、「v-bind:に限って」言えばそもそもv-bindディレクティブはvueのdata内のプロパティをhtmlの属性に反映するためのものです。コンポーネントの時はコンポーネントのプロパティに設定します。

https://jp.vuejs.org/v2/api/#v-bind