最近やっているプロジェクトでjQueryを使ってたのですが、jQueryの面倒さに発狂したくなってしまい、なんとかならないものかと思っていたところ、Vue.jsに出会いましたので学習をはじめました。
参考
今回udemyを一通り受講し、振り返りをしているため非常に参考とさせていただきました。非常に分かりやすい構成になっているため、初めて学習を始める人はまず受講してみることをオススメ致します。
Vue.jsの基本構文
データバインディング
Mustache構文
Vue.jsではMustache構文を使うことで、簡単にVueインスタンスデータとHTMLを結びつけることができます。
このデータの結びつけのことをデータバインディングといいます。
下記の例を表示すると {{ message }} にはHello Vue.js!が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue Sample</title>
</head>
<body>
<div id="example">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>
</html>
var app = new
Vue({
el: "#example",
data: {
message: "Hello Vue.js!"
}
});
v-bind
簡単なテキストのデータバインディングであればMustache構文を使えましたが、DOM要素の属性をデータバインディングする場合にはMustache構文はエラーとなり使えません。
※以降Vueに関わる部分のみHMTLを記載
<div id="example-error">
<a href="{{ url }}">Google</a>
</div>
var app = new Vue({
el: "#example-error",
data: {
url: "https://google.com"
}
});
そこで使用するのが v-bindディレクティブ です。
v-bindディレクティブ を使えばDOM要素の属性を動的に切り替えることができます。
例1：href属性のデータバインディング
下記例だとhref属性のurlにGoogleのURLがデータバインディングされます。
<div id="example1">
<a v-bind:href="url">Google</a>
</div>
var app = new Vue({
el: "#example1",
data: {
url: "https://google.com"
}
});
例２:value属性のデータバインディング
下記例ではinputタグのvalue属性がデフォルトでおはよう！と表示されます。
<div id="example2">
<input v-bind:value="message">
<p>{{ message }}</p>
</div>
var app = new Vue({
el: "#example2",
data: {
message: "おはよう！"
}
});
しかし初期値のおはよう！は正しく表示されていましたが、文字を書き換えた時にpタグが書き換わっていなかったことに気づくと思います。
これはv-bindによるデータバインディングは
・jsで更新したdataはテンプレートに更新されるが、
・テンプレート側で更新してもdataが更新されない
という性質があるためです。そこで登場するのが、v-on メソッドです。
v-on
v-onメソッドはイベント処理をするためのディレクティブです。
input要素のテキストエリアに入力する度にinputイベントが発生するので、v-bindに追加でv-onを追加してdataを更新する処理を追加します。
<div id="example">
<input
v-bind:value="message"
v-on:input="message = $event.target.value"
>
<p>{{ message }}</p>
</div>
var app = new Vue({
el: "#example",
data: {
message: "おはよう！"
}
});
- 初期値で
messageにおはよう！が入力されています - そのためMustasche構文でかいているpタグにも
おはよう！が表示されます - 入力欄に
おはよう！の！を削除するとinputイベントが発生し、messageを書き換えます - するとMustasche構文でかいているpタグにも
おはように更新されます
このようにjsからテンプレートのデータを更新するだけでなくく、テンプレートからもデータを更新することを 双方向データバインディングといいます。下記の2行は全く同じ表現で、どちらもmessageに対して双方向データバインディングすることができます。
v-model
v-bindとv-onを組み合わせた双方向データバインディングの例を示しましたが、これはv-modelというディレクティブで表現することができます。
// どちらも同じ
<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value">
v-bindとv-onの省略記法
v-bindとv-onは頻繁に使用するため省略記法があります。
| ディレクティブ | 完全な構文 | 省略記法 |
|---|---|---|
| :v-bind | <a v-bind:href="url"> ... </a> |
<a :href="url"> ... </a> |
| :v-on | <a v-on:click="func"> ... </a> |
<a @click="func"> ... </a> |
繰り返し処理
v-for
v-forを使えば繰り返し文を使うことができます。
またv-for="(user, index) in users"とすることで配列のキーを取り出すことも可能です。
<ul id="example">
<li
v-for="(user, index) in users"
>
{{ member }}
</li>
</ul>
var app = new Vue({
el: "#example",
data: {
users: ["佐藤", "鈴木", "山田"]
}
});
表示・非表示の切り替え
v-if, v-if-else, v-else
v-ifディレクティブではブロックを条件に応じて描画することができます。
<div id="app">
<div v-if="toggle">
<p>Hello</p>
<div v-else>
<p>World</p>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
toggle: true // 切り替える
}
})
v-show
v-showディレクティブは属性値がtrueとなる場合に要素を表示します。
<div id="app">
<div v-show="toggle">
<p>Hello</p>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
toggle: true // 切り替える
}
})
v-ifとv-showの比較と使い分け
比較
v-ifとv-showは表示・非表示の方法に明らかな違いがあります。
| v-if | v-show | |
|---|---|---|
| 切り替え方法 | ブロックごと作成・削除 | ブロックを残したまま表示・非表示を切り替え |
| 初期描画コスト | 低い | 高い |
| 描画切り替えコスト | 高い | 低い |
v-ifは非表示にする時にブロックごと削除します。
一方でv-showは非表示にする時にブロックに対してCSSのdisplay:noneを使って切り替えます。
使い分け
v-if
・ 初期描画コストが低く、描画切り替えのコストが高い
・ そのため切り替えの頻度が低いなら、初期描画コストの低いv-ifを使用する
v-show
・ 初期描画コストが高く、描画切り替えのコストが低い
・ そのため切り替えの頻度が多いなら、描画切り替えコストの低いv-ifを使用する
算出プロパティ
内容にボリュームがあるためお引越ししました。
[Vue.js]算出プロパティとメソッドの違い
さいごに
今回初めてVue.jsを使ってみましたが、jQueryのように直接DOM操作をするわけでなく、少ない量でかつわかりやすくDOMの操作をすることができ非常に期待が高まりました。
使い分けに関する情報など、初学者に少しでも役に立てば幸いです。