Vue.jsでデータバインディング
公式ドキュメントのサンプルを参考に勉強しています。
ディレクティブ
vue.jsのサンプルを見ているとディレクティブを覚えるだけで結構できることが広がる感じがする。
個人的に使ったことがあるのは「v-on」「v-bind」「v-for」「v-model」ぐらいです。
「v-on」でclickイベントの関数呼び出しを書いたり、「v-model」でフォームの入力のキー値を指定したりしてみました。
確かにIDで書くことが結構減る印象で、2度手間感がなくスッキリした気がします。
v-bind
Vue.jsを利用してタグの中の要素を編集する際には「v-bind」を利用して操作します。
classとかstyleとか色々操作できます。
タグ要素の中で”Mustache” 構文(二重中括弧) 「{{ msg }}」な感じで書いても、全く書き換わらないので、注意です。
これはハマりました。
「{{ }}」で書けば、そのまま出力されるんでしょ。と思ってたら大間違いでしたね。
v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.4.4/dist/vue.js"></script>
</head>
<body>
<div id="example-1" >
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
message: ''
}
})
</script>
</body>
</html>
入力フォームにいれた内容がすぐ反映されるサンプルです。
フォームの内容のChangeメソッドを書いていないのに、反映されています。。。
今回のサンプルは表示するサンプルになっていますが、検索とか計算とかが簡単にかけそうなイメージです。
複雑な処理はどうやるんだろ。。。
着実に進みます
ひとつずつ順調にイメージできている気がします。
実際に使ってみると、理解していないとハマることが多いのはしょうがないですね。
とにかく書いて見ます。
