【Vue】Vueの勉強始めようpart3(v-forとv-bindでリンク集生成)【524日目】

前回

www.nyamucoro.com

参考書籍

実際のコード

■プルリクエスト

topのリンク生成方法を変更 by klack710 · Pull Request #5 · klack710/study-vue · GitHub

■作ったもの(ブランチはdevelop参照なので、今後も更新されます)

klack710.github.io

今回やったことは？

1. v-bindとv-forを使って、TOPのリンク集をVueで生成
2. v-textでリンク名を生成
3. Vueのdata属性をネストして管理

学んだメモ

1. v-forは、増やすやつにつける。forの癖で外側に書きがち
2. v-textでテキスト書き換えられる
3. ネストする時に、[]つかうか{}使うか迷った。命名したかったから{}使った

リンクをVueで管理に切り替えてみた。

        <ol>
            <li v-for="item in link_list">
                <a v-bind:href="item.link_url" v-text="item.link_name"></a>
            </li>
        </ol>

var app = new Vue({
  el: "#app",
  data: {
    link_list: {
      hello: {
        link_url: "/hello/index.html",
        link_name: "hello"
      },
      bind_click: {
        link_url: "/bind_click/index.html",
        link_name: "bind_click"
      },
      data: {
        link_url: "/data/index.html",
        link_name: "data"
      }
    }
  }
});

感想は？

URLと名前の組み合わせはよくあるやつなので、
それをHTML側ではなくVue側で一つの形で保存できたのは良かった。

リスト構造するものは、これでVueによる一括管理ができそう。

パット見キレイそうには見えるんだけど、
実際のプロジェクトとかでは別な書き方になるんでしょうか？

教えていただけると嬉しいです(´；ω；｀)どんな形であれアドバイス求むぅ・・・