Vue.jsを更に学ぶ(5日目)

#動的にコンポーネントを切り替える

まずHome.vueとAbout.vueを用意しておく

```Home.vue
<template>
  <p>Home</p>  
</template>
```

```About.vue
<template>
  <div>
    <p>About</p>
    <input>
  </div>
</template>
```

```App.vue
<template>
  <div>
    <LikeHeader>
      <h3>初めまして</h3>
    </LikeHeader>
    <LikeNumber :number="number" @my-click="incrementNumber"></LikeNumber>
    <button @click="currentComponent = 'Home'">Home</button>
    <button @click="currentComponent = 'About'">About</button>
    <component v-bind:is="currentComponent"></component>
  </div>  
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue"
//新しく作ったコンポーネントをimprot
import About from "./components/About.vue"
import Home from "./components/Home.vue"

export default {
  data() {
    return {
      number: 10,
      currentComponent: "Home"
    }
  },
  components: {
    LikeHeader,
    //新しく作ったコンポーネントを登録
    About,
    Home
  },
  methods: {
    incrementNumber(value) {
      this.number = value
    }
  }
}
</script>
```

注目すべきは

```.vue
<component v-bind:is="currentComponent"></component>
```

v-bind:is=""の""にコンポーネント名を入れると、そのコンポーネントが表示されるようになる。

これで、Homeボタンを押すと、Home.vueが表示され、Aboutボタンを押すと、About.vueが表示されるようになる。

この切り替えの際に、毎回インスタンスがdestroyされることに注意する。

#keep-aliveを使って動的コンポーネントの状態を維持する

```App.vue
<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>
```

このようにコンポーネントタグをkeep-aliveタグで囲むだけで前回の状態を保持することができる。

inputタグの中身もこれで残すことができる。

#activatedとdeactivated

```About.vue
<template>
  <div>
    <p>About</p>
    <input>
  </div>
</template>
<script>
export default {
  deactivated() {
    //Homeボタンが押された時の処理を書く。
  },
  activated() {
    //Aboutボタンが押された時の処理を書く。
  }
}
</script>
```

#Vue.jsでフォームを作ろう

##v-modelにオブジェクトを指定する

```App.vue
<template>
  <div>
    <LikeHeader>
      <h3>初めまして</h3>
    </LikeHeader>
    <LikeNumber :number="number" @my-click="incrementNumber"></LikeNumber>
    <button @click="currentComponent = 'Home'">Home</button>
    <button @click="currentComponent = 'About'">About</button>
    <keep-alive>
      <component v-bind:is="currentComponent"></component>
    </keep-alive>
    <div>
      <h2>イベントフォーム</h2>
      <label for="title">タイトル</label>
      <input id="title" type="text" v-model="eventData.title">
      <p>{{ eventData.title}}</p>
    </div>
  </div>  
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue"
import About from "./components/About.vue"
import Home from "./components/Home.vue"

export default {
  data() {
    return {
      number: 10,
      currentComponent: "Home",
      eventData: {
        title: "タイトル"
      }
    }
  },
  components: {
    LikeHeader,
    About,
    Home
  },
  methods: {
    incrementNumber(value) {
      this.number = value
    }
  }
}
</script>
```

注目すべきはこれ

```vue
<input id="title" type="text" v-model="eventData.title">
```

##.lazy

```vue
<input id="title" type="text" v-model.lazy="eventData.title">
```

v-modelに.lazyをつけると、inputタグからフォーカスを外した時に双方向バインディングが起きる。


##.number

```vue
<input id="maxNumber" type="number" v-model.number="eventData.maxNumber">
```

v-modelに.numberをつけると、inputタグから返される数字のdata型が、
StringからNumberに変えることができる。ただそれだけ。

##.trim

先頭と最後の空白を除いたものを返すことができる。

```vue
<input id="host" type="text" v-model.trim="eventData.host">
```


##複数行テキストに対して双方向バインディング

```vue
<label for="detail">イベントの内容</label>
<textarea id="detail" cols="30" rows="10" v-model="eventData.detail"></textarea>
<pre>{{ eventData.detail }}</pre>
```

##単体のチェックボックス

```vue
<input type="checkbox" id="isPrivate" v-model="eventData.isPrivate">
<label for="isPrivate">非公開</label>
<p>{{ eventData.isPrivate }}</p>
```

label for="idの名前"にすると、labelの文字をクリックしてもチェックボックスが反応するようになる。

また、今回のisPrivateというプロパティの型はboolean。クリックするごとに切り替わる。

##複数のチェックボックス

```vue
<p>参加条件</p>
<input type="checkbox" id="10" value="10代" v-model="eventData.target">
<label for="10">10代</label>
<input type="checkbox" id="20" value="20代" v-model="eventData.target">
<label for="20">20代</label>
<input type="checkbox" id="30" value="30代" v-model="eventData.target">
<label for="30">30代</label>
<p>{{eventData.target}}</p>
```

複数の時は、v-modelに指定するプロパティの初期値を[]にしておいて、配列を返せるようにしておけば良い。
これで、チェックが入ったら、その値が配列に入る。

##ラジオボタン

```vue
<p>参加費</p>
<input type="radio" id="free" value="無料" v-model="eventData.price">
<label for="free">無料</label>
<input type="radio" id="paid" value="有料" v-model="eventData.price">
<label for="paid">有料</label>
```

1.ラジオボタンを設置し、value="~~"と属性をつける。

2.v-modelで指定したプロパティ名の初期値をvalue属性の名前にすると、最初からそのボタンが選択された形になる。

##セレクトボックス

```vue
<p>開催場所</p>
<select v-model="eventData.location">
  <option v-for="location in locations" :key="location">{{location}}</option>
</select>
<p>{{eventData.location}}</p>
```

1.v-forを使ってセレクトボックスを配置

2.v-model="~~"で指定したプロパティの初期値に、セレクトボックスの値の1つを指定してあげれば、それが初期表示されるようになる。

##コンポーネントでv-modelを使う

これは難しいので、後でゆっくり学習します。。