kazu22002の技術覚書

技術屋として日々の内容を記録しているサイト。PHPやAWSをやっています。

Vue.jsでデータバインディング

公式ドキュメントのサンプルを参考に勉強しています。

ディレクティブ

vue.jsのサンプルを見ているとディレクティブを覚えるだけで結構できることが広がる感じがする。

jp.vuejs.org

個人的に使ったことがあるのは「v-on」「v-bind」「v-for」「v-model」ぐらいです。

「v-on」でclickイベントの関数呼び出しを書いたり、「v-model」でフォームの入力のキー値を指定したりしてみました。

確かにIDで書くことが結構減る印象で、2度手間感がなくスッキリした気がします。

v-bind

jp.vuejs.org

Vue.jsを利用してタグの中の要素を編集する際には「v-bind」を利用して操作します。

classとかstyleとか色々操作できます。

タグ要素の中で”Mustache” 構文(二重中括弧) 「{{ msg }}」な感じで書いても、全く書き換わらないので、注意です。

これはハマりました。

「{{ }}」で書けば、そのまま出力されるんでしょ。と思ってたら大間違いでしたね。

v-model

jp.vuejs.org

<!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メソッドを書いていないのに、反映されています。。。

今回のサンプルは表示するサンプルになっていますが、検索とか計算とかが簡単にかけそうなイメージです。

複雑な処理はどうやるんだろ。。。

着実に進みます

ひとつずつ順調にイメージできている気がします。

実際に使ってみると、理解していないとハマることが多いのはしょうがないですね。

とにかく書いて見ます。