今までReactしか触ったことがなかったので、以前から触ってみたいなと思っていたVue.jsを初めて触ってみました。
１時間ほどvueを触ってみた感触を書き記しておきます。
Vueの環境構築
Vue.js を vue-cli を使ってシンプルにはじめてみる
上の記事を参考に環境構築をしてみます。
$ vue create vue-test
$ cd vue-test
$ npm run serve
この３つをターミナルで入力するだけでとりあえず初期画面を立ち上げることができました。
ここまでは簡単ですね。
コンポーネントを編集してみる
ぱっと見た感じcomponentsフォルダ内のHelloWorld.vueをApp.vueで呼び出しているみたいです。
ごちゃごちゃしてて見にくいのでいらないものを全部消していきます。
<template>
<div>
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<template>
<div>HelloWorld!</div>
</template>
これで画面上にHelloWorld!が表示されるだけのシンプルな画面になりました。
入力フォームを作ってみる
次にフォームを作成してみます。
<template>
<div>
HelloWorld!
<br />
<input v-model="message" />
<p>入力された文字: {{ message }}</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
message: String
}
};
</script>
scriptタグの中でpropsを定義すれば入力された値が取得できます。
Reactで言うところのvalueがvuejsではv-modelになるようですね。
ReactのようにonChangeを使わなくても入力された値を即時に取得することができるみたいです。
ちなみに下記のように書けば他のコンポーネントにもpropsの値を渡すことができるようです
<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>
<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を書くことで作成できるようです。
<template>
<div>
<button type="button" @click="onClick">アラート</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
onClick: function() {
alert("アラートを表示");
}
}
};
</script>
ReactのonClickがvueでは@clickと書くようです。
イベントを作成する時、Reactだとfunctionをbindしてあげる必要があります。
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
alert("アラートを表示");
}
クリックイベントの作成はvueの方が楽な気がしますね。
あまり難しいことは試していませんが、ざっとvueを使ってみた感じ、Reactを触ったことがあればvueを使うのはそんなに難しくないなと思いました。
深く調べなくてもvueは直感的に使える気がします。
次はvueでAPI通信とか試してみたいですね。