今回はvue-cliを使用してVueプロジェクトをインストールして、それを使ってVueの基本構文を学んでいきたいと思います。
Vueを学ぶのにはCDNを利用する方法とインストールする方法があり、CDNの方がとっつきやすいのですが、より実践的であろうコンポーネント構文を使えること、ローカルホストで内容を確認できることからvue-cliからインストールする方法を選びました。
vue-cliをインストール
vue-cliをインストールするにはnpmを使用します。nodejsのサイトからダウンロードしてセットアップしましょう。
Macの場合はHome Brewから入手可能です。
Macで環境を構築する際に便利なものにHome Brewというパッケージマネージャーがあります。 なにか必要なパッケージがあるときにその依存関係にある他のパッケージも一緒にインストールしてくれる[…]
npmをインストールできたらvue-cliをインストールします。
$ npm install -g @vue/cli
vueコマンドが使用できるようになっていますので、createで新プロジェクトを作成します。
$ vue create vue-sample
# 質問されますが必要なものがなければEnterキーで進めます
# Successfully created project vue-sample.
# Get started with the following commands:
#
# $ cd vue-sample
# $ npm run serve
指定通りにコマンドを実行するとサーバーが立ち上がりますので、localhost:8080でアクセスしてみましょう。
$ cd vue-sample
$ npm run serve
vueのデフォルトページが表示されればインストール成功です。
Vueを学ぶ準備
Vueの基本構文を学ぶために、最初の設定をします。
先程表示されたページは src/App.vue というファイルですが、今回は学ぶためにこちらは使用せず、同じ階層に MyApp.vue を作成します。
<template>
<span>Hello World</span>
</template>
<script>
export default {
}
</script>
次に src/main.jsがありますので、それの2行目を書き換えます。
import Vue from 'vue'
import App from './MyApp.vue' // MyApp.vueに変更
もう一度 localhost:8080にアクセスしてみると、表示が変わっていて、Hello Worldと表示されているはずです。
コンポーネント構文の基本
表示したいHTMLを template タグ内に書き、それに対して保持したいデータやメソッドなどを export default の中に書いていきます。
<template>
<span>Hello World</span>
</template>
<script>
export default {
}
</script>
これをHTMLのタグにマウントすることで表示されているのですが、この辺の説明は割愛します。(MyApp.vue は idが app の要素にマウントされています。）
ではMyApp.vueを書き換えることで、vueのコンポーネント構文を学んでいきます。
Vueの基本構文
データの保持と変数の表示
dataプロパティに関数を定義し、その返り値に保持したい変数を定義します。表示をしたい場合にはマスタッシュ構文を使います。
マスタッシュ構文とは {{ }} で囲って記載した部分のことです。
<template>
<span>{{ msg }}</span>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
}
},
}
</script>
算出プロパティ
算出プロパティは演算などを用いる計算結果のデータの保持をします。computed プロパティに記載します。
計算の結果を保持するので、計算する場合は data ではなく computed に記載するといいでしょう。
<template>
<span>{{ longMsg }}</span>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
}
},
computed: {
longMsg: function () {
// dataプロパティにはthis付きでアクセス
return this.msg + ' to vue-sample'
},
},
}
</script>
v-bind (:)
クラスやスタイル、属性を動的に変えたいときに使用します。
<!-- template内は1まとまりにする必要があるのでdivを追加 -->
<template>
<div>
<span v-bind:style="{'color': msgColor}">{{ msg }}</span>
<button v-bind:disabled="isBtnDisabled">
クリックしてください
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
msgColor: 'red',
isBtnDisabled: false,
}
},
}
</script>
Hello Worldの色が msgColorの値によって変わるようになりました。
isBtnDisabled は例では false ですが、true に相当する値なら、ボタンが無効になります。
同様にクラスもバインドすることができます。クラスやスタイルにバインドする場合のキーはシングルクオーテーションで囲います。(ハイフンが読み込めないため）
<button class="btn" v-bind:class="{'btn-primary': isPrimary}">
クリックしてください
</button>
また、v-bind:hoge の v-bind は省略することができて、以下のように書いても同じ意味になります。
<button :disabled="isBtnDisabled">クリックしてください</button>
メソッド
メソッドを利用したい場合は、methodsプロパティにメソッドを追加することもできます。
<template>
<div>
<span v-bind:style="{'color': msgColor}">{{ msg }}</span>
<button v-bind:disabled="isBtnDisabled">
クリックしてください
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
msgColor: 'red',
isBtnDisabled: false,
}
},
methods: {
changeColor: function () {
this.msgColor = 'blue'
this.isBtnDisabled = true
},
},
}
</script>
msgColor の値を変える changeColor() というメソッドを定義しました。こちらは後で使用してみたいと思います。
v-on (@)
ボタンをクリックしたときなどにメソッドを呼ぶためのイベントリスナーを登録できます。
<template>
<div>
<span v-bind:style="{'color': msgColor}">{{ msg }}</span>
<button v-bind:disabled="isBtnDisabled" v-on:click="changeColor">
クリックしてください
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
msgColor: 'red',
isBtnDisabled: false,
}
},
methods: {
changeColor: function () {
this.msgColor = 'blue'
this.isBtnDisabled = true
},
},
}
</script>
メソッドにより変数の値が変更されましたので、先程定義した v-bind の影響で文字色が変わり、ボタンが無効になったかと思います。
また、v-onは@を使用して省略して書くことができます。
<button :disabled="isBtnDisabled" @click="changeColor">クリックしてください</button>
v-show
表示の切り替えをしたいときに使用します。
true に相当する値なら表示に、 false に相当する値なら非表示になります。
<template>
<div>
<span v-bind:style="{'color': msgColor}">{{ msg }}</span>
<button v-show="!isBtnDisabled" v-on:click="changeColor">
クリックしてください
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
msgColor: 'red',
isBtnDisabled: false,
}
},
methods: {
changeColor: function () {
this.msgColor = 'blue'
this.isBtnDisabled = true
},
},
}
</script>
こちらは内部的にはDOMに style=”display: none;” を追加して非表示にします。
下記にある v-else は使用することができません。
v-if, v-else
表示の切り替えをしたいときに使用します。
true に相当する値なら表示に、 false に相当する値なら非表示になります。
<template>
<div>
<span v-bind:style="{'color': msgColor}">{{ msg }}</span>
<button v-if="!isBtnDisabled" v-on:click="changeColor">
クリックしてください
</button>
<span v-else>ボタンは無効になりました</span>
</div>
</template>
<script>
export default {
data: function () {
return {
msg: 'Hello World',
msgColor: 'red',
isBtnDisabled: false,
}
},
methods: {
changeColor: function () {
this.msgColor = 'blue'
this.isBtnDisabled = true
},
},
}
</script>
こちらは内部的にはDOMに要素を追加したり削除したりします。
また、隣接する要素に v-else を定義することもできます。
v-for
ループをして繰り返し要素を作成するのに使用します。回数指定のループ、配列のループ、オブジェクトのループに対応しています。
<template>
<div>
<span>回数指定のv-for</span>
<ul v-for="i in 3" :key="i">
<li>{{ i }}回目</li>
</ul>
<span>配列のv-for</span>
<ul v-for="category in categories" :key="category">
<li>{{ category }}</li>
</ul>
<span>オブジェクトのv-for</span>
<ul v-for="(value, key) in user" :key="key">
<li>{{ key }}:{{ value }}</li>
</ul>
</div>
</template>
<script>
export default {
data: function () {
return {
categories: ['news', 'anime', 'variety'],
user: {
id: '1',
name: 'taro',
age: '20',
},
}
},
}
</script>
注意点としては key 属性を v-bind する必要があることです。これはVueのパフォーマンス等に影響するので、与える値は id など一意な値が望ましいです。
v-model
v-modelはフォームなどの入力の際に使用します。
フォームの value 属性に v-bind を使用することで、データをフォームに与えることができます。しかし、入力値を変数に与えることができません。
v-model を使用することで、データをフォームに与えると同時に入力値を変数に与えることができます。
<template>
<div>
<div>
<input :value="vBind">
{{ vBind }}
</div>
<div>
<input v-model="vModel">
{{ vModel }}
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
vBind: 'v-bindを使用しています',
vModel: 'v-modelを使用しています',
}
},
}
</script>
こちらを表示してそれぞれのフォームに入力してみると違いがわかるかと思います。
最後に
Vueを導入して基本的な構文を学ぶまでを紹介してきました。
普通のjavascriptやjQueryとは違って、設定値を書いていくようなスタイルで実装できますので、非常に学習コストが低いことが伺えますね。
