Vue.js入门第四篇

上一篇中已经将所需工具简单的介绍了一下，完成了项目结构的基本布局，从本篇开始就是对Vue的具体使用了，今天的主要内容是使用 v-for 和 v-bind 指令创建一个简单的导航栏。结果如下：

导航栏

首先进入到 TopBar.vue 组件中，让 data 返回一个菜单项列表：

TopBar.vue

接着改动一下 TopBar.vue 的 template ，通过使用 v-for 指令循环生成菜单项：

TopBar.vue

这样我们就可以依据 data 中的 menus 数组来生成菜单项了。

---

再看看 template 中 menu 前面的 avatar 部分，这里用 v-bind 指令将 border-color 样式绑定到了 borderColor 这个属性上，然后在每个菜单项上加了一个点击事件 @click（v-click 指令的缩写形式）绑定到 changeAvatarBorder 方法上，在 changeAvatarBorder 方法中，根据传来的 index 的值来对 borderColor 的值进行改变，然后 avatar 就会响应从而改变边框颜色，从这里也可以很好的解释为什么要在菜单项上加 key 属性了，其实就是为了对各个菜单项进行区分。

导航栏

可以看到点击首页使头像的边框变成了黑色。

样式设计很费时间和精力，而且还不一定做的好，所以考虑之后会用一些 css 库，比如 element-ui。

代码： https://github.com/jianghewang/vue-project