はじめに
最近Vue.jsを勉強しています。
自分の備忘を兼ねて、初歩的な内容を書いていきます。
基本
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Sample</title>
<meta name="description" content="sample">
<!-- Vue.jsをインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<!-- Vue.jsを適用する場所 -->
<div id="app">
</div>
<script>
//最初にVueクラスをインスタンス化
new Vue({
//elオプション：Vueを適用する場所を指定
el: '#app',
//dataオプション：Vueで使用するデータを用意する
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
まずVueクラスをインスタンス化します。
そして、elオプションにより、Vueを適用する場所を指定します。今回はappというidを持つdiv要素に対して適用するので、el: '#app'としています。
最後に、dataオプションで、使用するデータを用意します。「プロパティ:値」のように記述するので、今回は'Hello Vue!'という文字列をmessageプロパティにセットしたことになります。
このデータを表示させてみます。
HTML内で{{プロパティ名}}のように記述すると、該当するプロパティの値が呼び出され、表示されます。
<body>
<div id="app">
<!-- messageデータを呼び出し -->
{{message}}
</div>
<!-- Vue適用範囲外なので呼び出されない -->
{{message}}
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
結果
messageプロパティの値が呼び出され、表示されました。
2段目はVueが適用されるdiv要素の外なので、データが呼び出されず、そのまま表示されています。
v-forディレクティブ
Vueでは、ディレクティブというものを使って、表示に関する様々な制御を行えます。
v-forディレクティブは、for文のような繰り返し処理を行います。
<body>
<div id="app">
<ul>
<!-- 配列itemsから要素itemを繰り返し取り出す -->
<li v-for="item in items">
<!-- 取り出したitemのname属性を表示 -->
{{item.name}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
//表示する要素を格納した配列
items: [
{name: 'item1'},
{name: 'item2'},
{name: 'item3'}
]
}
});
</script>
</body>
まずdataオプションで、複数の要素を格納した配列を用意しておきます。
次に繰り返し表示したいHTML要素のタグにv-for="item in items"といった記述を追加します。
そしてその要素の中に{{item.name}}と記述します。
これで、配列の要素を繰り返し取り出し、それらを次々に表示させています。
状況によってリストの内容が変化する場合等に便利そうですね。
v-onディレクティブ
v-onディレクティブはイベント制御を行うことができます。
<body>
<div id="app">
<!-- クリックしたらcountを1増加させる -->
<button v-on:click="count += 1">ボタン</button>
{{count}}
</div>
<script>
new Vue({
el: '#app',
data: {
//ボタンが押されるたびに1ずつ増える
count: 0
}
});
</script>
</body>
ボタンにv-on:click="count += 1"と記述することにより、クリックすると変数countを1増加させるという処理を付加できます。
変数countは画面に表示されているので。増加していく様子を見ることができます。
v-ifディレクティブ
v-ifディレクティブを使うと、条件によって表示させる内容を変化させることができます。
<body>
<div id="app">
<button v-on:click="count += 1">ボタン</button>
{{count}}
<!-- 条件によって表示内容を変化させる -->
<div v-if="count % 2 === 0">偶数</div>
<div v-else>奇数</div>
</div>
<script>
new Vue({
el: '#app',
data: {
//ボタンが押されるたびに1ずつ増える
count: 0
}
});
</script>
</body>
divタグにv-if="count % 2 === 0"と記述することで、この条件を満たす場合に要素が表示されるようにしました。
これにより、countが偶数か奇数かを判定して表示するようにしています。ボタンを押すたびに表示が切り替わります。
v-showディレクティブ
v-ifディレクティブと似ています。記載内容がtrueなら要素が表示されます。
<body>
<div id="app">
<button v-on:click="show = !show">ボタン</button>
{{show}}
<!-- 値がtrueなら表示される -->
<div v-show="show">表示</div>
<!-- 値がtrueでなければ表示される -->
<div v-show="!show">非表示</div>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
});
</script>
</body>
ボタンを押すと、showについて、true・falseの切り替えが行われます。
これにより、表示される要素が切り替わります。
おわりに
Vue.jsは、HTMLを自在に操作できて便利そうですが、なかなか奥が深いようです。頑張って勉強を続けます。
(参考)
この本で勉強しています。
Webデザインの現場で使えるVue-jsの教科書