实现效果：

实现代码以及注释：

！DOCTYPE htmlhtmlhead标题按钮绑定/title元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=边'元名称=“视口”内容='宽度=器件宽度，初始比例=1.0 '样式类型=' text/CSS ' * { margin 3360 0 0；padd : 0；}正文{ font : 15px/1.3 ' Open Sans '，无衬线；color: # 5e5b64文本对齐：中心；} a，a :已访问{ outline:无；颜色： # 3b 9 DC 1；} a :悬停{ text-decoration : none}节、页脚、页眉、侧边、导航{显示：块} /*菜单栏*/nav { display : inline-block；余量： 60px汽车45px背景色： # 5597 B4盒影： 0 1px 1px # CCC边界半径： 2px} nav a { display : inline-block；padd : 18px 30pxcolor : # fff！重要；字体粗细：粗体；font-size : 16px文本-装饰：无！重要；线高： 1;文本转换：大写；背景色-:透明；-网络套件-transit :底色0.25 SZ-指数： moz-transit :底色0.25秒过渡：背景色0.25秒；} nav a :第一个孩子{边框半径：2 px 0 0 2px} nav a :最后一个孩子{ border-radius :0 2px 2px 0；} nav.home .主页，导航项目。项目，导航服务。服务，导航。联系。联系{底色： # e 35885} p { font-size :22 px字体粗细：加粗；color : # 7d 9098 } p b { color : # ffffdisplay :内联块；padding:5px 10px背景-颜色： # c4d 7e 0；边框-半径：2 px文本转换：大写；font-size :18 px}/style/head dydiv id=' main '！-导航栏菜单会得到处于活跃的的变量的值作为一个上课！-为了防止当我们点击链接时页面发生跳转，我们使用预防优化-nav v-bind : class=' active ' v-: click。防止！-当一个菜单中的链接被点击，我们调用定义在javaScript vue中的激活方法-a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' Home ' v-: click=' makaaactive(' Home ')' Home/a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' project ' v-333: click=' makaaactive(' project ')' project/a href='小胡子表达式将被活跃的的值替换，它将发生任何变化它都将会自动更新-pYOU select { { active } }/p/div脚本src=' http :https://cdnjs。云耀斑。com/Ajax/libs/vue/2。0 .5/vue。量滴js '/script脚本类型=' text/JavaScript '//创建一个某视频剪辑软件示例，并且传递一个可选对象var demo=new Vue({ //一个数字正射影像图元素表示我们的视角模型el: '#main '，//定义属性值，给定初始化值data: { active: 'home' }，//我们需要使用到的函数methods: { makeActive:函数（项){ //当一个模型发生变化，视图会自动更新this . active=item } } })；/脚本/正文/html