まず最初の表示にしてみる

<!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="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

表示で試すだけならこんな感じです。

このときにbody内のscriptタグをヘッダーに書いてたりすると、動かないです。

そのまま{{message}}みたいな表示がされます。

いつのまにかscriptってbodyの最後に書くみたいな感じになっているんですね。

読み込む速度とかに影響がでるらしいことは知っていましたが、こういうフレームワークでも影響あったりするんですね。

ループを書いてみる

jp.vuejs.org

実用性を求めてリスト表示がいいなぁ。と試してみます。

HTMLとスクリプトの部分のサンプルをそのまま書いてみます。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

これでリスト表示できますね。

liタグの「v-for="item in items"」がキモです。

v-forディレクティブを使用して、itemsの配列をループさせてます。

これだけだと、そのままPHPで表示したほうが楽じゃない？とか思ったのですが、動的に変更したい場合に、dataのitemsの配列の内容を変えるだけでHTMLが変わります。

example1.items = [
      { message: 'Hoge' },
      { message: 'Fuga' },
      { message: 'HogeHoge' },
      { message: 'FugaFuga' }
    ];

という感じで、内容を上書きするだけでリストが変わります。

なんとなく便利そうな気がしてきて楽しいです。

まぁ、やっとMVVMの実感を少し得られた感じです。

このまま導入までいくぞ！！

jqueryも便利でしたが、こういうフレームワーク使って書いてみると、jqueryなしで書ききってみたい気持ちが強くなってきましたね。

ただjqueryで動作している部分もあるため、置き換えていくのはやっぱり大変だと思っているので、適当な場所で使っていけたらと思っています。

vue.js書いてみてパーツごとにVueインスタンス作れそうで、期待通りっぽいです。

コンポーネントとかうまく書きたい。。。

あと正直、導入部分でのCommonJsとかwebpackとかのワードが出ただけで挫折しそうな危険があったので、直接読み込むだけで利用するところから始めています。

本当はWebpackとかを使用したほうがいいんだろうなぁ。と思いながら、まずは実際の動作を目指すあたりです。