はじめてVue.jsを触ってみた

今までReactしか触ったことがなかったので、以前から触ってみたいなと思っていたVue.jsを初めて触ってみました。
１時間ほどvueを触ってみた感触を書き記しておきます。
##Vueの環境構築
[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)
上の記事を参考に環境構築をしてみます。

```
$ vue create vue-test
$ cd vue-test
$ npm run serve
```
この３つをターミナルで入力するだけでとりあえず初期画面を立ち上げることができました。
ここまでは簡単ですね。
<img width="1438" alt="スクリーンショット 2019-08-19 15.09.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439548/d268b9e4-fe8f-4172-9da7-e5e836ea539b.png">
##コンポーネントを編集してみる
ぱっと見た感じcomponentsフォルダ内の`HelloWorld.vue`を`App.vue`で呼び出しているみたいです。
ごちゃごちゃしてて見にくいのでいらないものを全部消していきます。

```vuejs:App.vue
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>
```
```vuejs:HelloWorld.vue
<template>
  <div>HelloWorld!</div>
</template>
```
これで画面上にHelloWorld!が表示されるだけのシンプルな画面になりました。
##入力フォームを作ってみる
次にフォームを作成してみます。

```vuejs:HelloWorld.vue
<template>
  <div>
    HelloWorld!
    <br />
    <input v-model="message" />
    <p>入力された文字: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    message: String
  }
};
</script>
```
scriptタグの中でpropsを定義すれば入力された値が取得できます。
<img width="287" alt="スクリーンショット 2019-08-19 15.41.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439548/9963b584-d0bb-755e-084d-db65ceec48b9.png">
Reactで言うところの`value`がvuejsでは`v-model`になるようですね。
Reactのように`onChange`を使わなくても入力された値を即時に取得することができるみたいです。

ちなみに下記のように書けば他のコンポーネントにもpropsの値を渡すことができるようです

```vuejs:HelloWorld.vue
<template>
  <div>
    HelloWorld!
    <br />
    <input v-model="message" />
    <SecondComponent :msg="message" />
  </div>
</template>

<script>
import SecondComponent from "./SecondComponent.vue";

export default {
  name: "HelloWorld",
  props: {
    message: String
  },
  components: {
    SecondComponent
  }
};
</script>
```
```vuejs:SecondComponent.vue
<template>
  <div>
    <p>入力された文字: {{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: "SecondComponent",
  props: {
    msg: String
  }
};
</script>
```
他のコンポーネントに値を渡すのはReactだと`{this.props.msg}`を書くだけで簡単に渡せるので、この辺りはReactの方が簡単な気がしますね。
(TypeScriptなどを使って型定義する場合はinterfaceを書く必要があるのでVueと書く量は大差ないかもしれませんが)
##クリックイベントを使ってみる
クリックイベントはscriptタグ内に`method`を書くことで作成できるようです。

```vuejs:HelloWorld.vue
<template>
  <div>
    <button type="button" @click="onClick">アラート</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    onClick: function() {
      alert("アラートを表示");
    }
  }
};
</script>
```
<img width="1010" alt="スクリーンショット 2019-08-19 16.15.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439548/e977e4e0-e2c0-9e87-b112-7909e630341e.png">

Reactの`onClick`がvueでは`@click`と書くようです。
イベントを作成する時、Reactだとfunctionをbindしてあげる必要があります。

```react:React
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    alert("アラートを表示");
  }
```
クリックイベントの作成はvueの方が楽な気がしますね。

あまり難しいことは試していませんが、ざっとvueを使ってみた感じ、Reactを触ったことがあればvueを使うのはそんなに難しくないなと思いました。
深く調べなくてもvueは直感的に使える気がします。
次はvueでAPI通信とか試してみたいですね。
##参考
[Vue.jsでフォームを使おう](https://qiita.com/MariMurotani/items/10702fbcae2997fcae80)
[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)