前回
参考書籍
実際のコード
■プルリクエスト
topのリンク生成方法を変更 by klack710 · Pull Request #5 · klack710/study-vue · GitHub
■作ったもの(ブランチはdevelop参照なので、今後も更新されます)
今回やったことは?
- v-bindとv-forを使って、TOPのリンク集をVueで生成
- v-textでリンク名を生成
- Vueのdata属性をネストして管理
学んだメモ
- v-forは、増やすやつにつける。forの癖で外側に書きがち
- v-textでテキスト書き換えられる
- ネストする時に、[]つかうか{}使うか迷った。命名したかったから{}使った
リンクを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による一括管理ができそう。
パット見キレイそうには見えるんだけど、
実際のプロジェクトとかでは別な書き方になるんでしょうか?
教えていただけると嬉しいです(´;ω;`)どんな形であれアドバイス求むぅ・・・