kazu22002の技術覚書

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

Vue.jsでHelloVue表示とループ表示

Vue.jsドキュメント見ながら四苦八苦中です。

ただ楽しくなってきたので、いろいろやったことや詰まった点を混ぜながら書いて行きたいです。

基本はドキュメントのサンプルを実行しているだけです。

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

<!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とかを使用したほうがいいんだろうなぁ。と思いながら、まずは実際の動作を目指すあたりです。