Vue.js勉強記録その4 コンポーネントを使おう section3-2 ver1

Vue.js3超入門

こちらの本を、絶賛勉強中。

勉強の記録を残します。今回は、Chapter3のSection3-2 v属性を使いこなすを進めます。

■v属性を使いこなす

・v-bindで属性を設定する

前回やった、v-bindでコンポーネントに対して属性を設定している。

<p>Hello {{name}}</p>

こんな感じのtemplateに対して、

<hello name='ISHIKAWA' />

こう呼び出すと、

<p>Hello ISHIKAWA</p>

こうなるわけだが、この時のhelloに対する属性を、v-bindで呼び出せる。v-bindを使えれば、変数を使ってname属性を付加でき、pタグで表示できる。

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <hello v-for="item in data" v-bind:namae="item" />
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
               data: ['Taro', 'Hanako', 'Sachiko', 'Jiro']
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       props: { namae: String },
       data() {
           return {
               message: 'これは新しいメッセージです。'
           }
       },
       template: '<p class="alert alert-primary">Hello、{{namae}}!</p>'
   });

   app.mount('#app');
</script>

こうすると、data:[配列]で格納した名前が、順番に表示される。

<hello v-for="item in data" v-bind:namae="item" />

この記述で、dataに入っている配列の値を順番にitemに格納して繰り返し処理している。そして、v-bind:namae="item"で、namae属性にitem（各名前）が入る。

この時、別にわざわざバインド（結びつける）しなくても、namae="item"で良いのでは？と思って書いてみたら、普通に文字列のitemが出力された。

そうだったww
ダメなんだったw
前やったじゃん。。

Vue.js勉強記録その2 -Chapter2 Vue3の基本をマスターしよう！

まだまだvue.jsの書き方に慣れていないですねぇ。

・v-modelで値をバインド!

inputタグを使って、テキストを入力できる様にし、その入力した値がリアルタイムで画面に表示できる様にする。

v-modelという機能を使う。v-modelは、inputの入力値をdataメソッドの変数の値に結びつける機能。

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
   <p>{{message}}</p>
   <div>
       <hello v-bind:name="name" />
   </div>
   <div class="form-group">
       <input type="text" v-model="name" class="form-control">
   </div>
</div>

<script>
   const appdata = {
       data() {
           return {
               message: '※コンポーネントを表示する',
               name: 'no-name'
           }
       }
   }
   let app = Vue.createApp(appdata);

   app.component('hello', {
       props: ['name'],
       data() {
           return {
               message: 'これは新しいメッセージです。'
           }
       },
       template: '<p class="alert alert-info">Hello、{{name}}!</p>'
   });

   app.mount('#app');
</script>

inputタグを見ると、

<input type="text" v-model="name" class="form-control">

こんな感じで、v-modelで、変数nameと入力された値が結び付けられている。inputの値が変わると、変数nameが変わる。変数nameは、

const appdata = {
   data() {
       return {
           message: '※コンポーネントを表示する',
           name: 'no-name'
       }
   }
}

dataメソッドに書いてある。（no-nameのやつ）ここと、inputの入力された値が結び付けられている。さらに、このnameプロパティは、コンポーネントの中でも使われている。

template: '<p class="alert alert-info">Hello、{{name}}!</p>'

この、{{name}}としてpタグで表示されている。

つまり、、

1.ブラウザ上で、inputタグの値を変える

2.アプリケーションオブジェクトのdataメソッドの中の変数nameが書き換わる

3.コンポーネント内のテンプテートに書いてある、{{name}}が書き換わり、画面に表示される。

おそらく、こんな感じの流れで処理がされてる。らしい。多分。

ピタゴラスイッチみたいですね。

■まとめ

このSECTIONは、まだまだ続くのですが、少し長くなりすぎるので一旦ここまで。

少しずつ自分で動かせる様なものになってきて、どんどん楽しくなってきた分、少しずつ頭がついていかないことも出てきました。

noteでこんな風に少し前に戻りつつ、まとめながら進めると、理解が深まりますね。