建议chrome、IE9+等支持vue.js的浏览器
首先我先把官方的示意代码发个大家（大家可以复制一下看看效果）：
这里是渲染出来的页面，就是一个简单的选项卡的使用！下面我来从这个选项卡讲解一下我自己这个小白学习vue.js的一点体会。
注！！！：我只是一个新学习的小白只是我说的自己的看法，说的不好或者说的不对的请大家谅解一下！ 首次看到这个组件我第一想法有点懵，毕竟刚刚接触vue.js，我顺着代码的顺序遇见什么方法变量就去找哪里定义的，结果感觉好像看懂了一些！但是你在想想如果让自己在写一遍会写吗？答案：还是自己写不出来！其实这个懂只是看懂了，并不一定是你看会了！ 我感觉大部分打初学者开始都是这样，所以我写这篇文章并不是教大家学习这一门框架，而是从自己的感悟告诉大家如何开始学习框架！那就是：“找到核心！“ 每种框架的开发肯定都有自己的核心，比如我刚刚学习的vue.js。核心其核心多人都知道，vue.js是数据驱动视图，模块式开发。听着是不是感觉在说一些谁都知道无用废话？其实不然！下面我来给大家讲一下我的见解。
核心话少只用几句话介绍，但是真的是言简意赅！首先看数据驱动视图，那么数据就一定是这个框架的核心。我们这个选项卡重要的是切换内容，那么我们怎么切换的？根据什么切换？对！找的这个要驱动视图的数据来切换当前，这就是“核心”！我们全要围绕着它来展开我们的思路！ 首先我们先到我们要做出来的效果是什么？切换两个一级菜单呈现不同内容！那么我们就在数据data定义出这两个数据data：{tabs:['Posts', 'Archive']}，用数据驱动视图！ 我们切换一级菜单时每次切换到哪个tab（是'Posts'或是 'Archive'）是不是应该知道？所以我们需要定义当前的状态！再添加一个当前状态到data里（data：{currentTab: 'Posts',tabs:['Posts', 'Archive']}），对这个“核心“就data这个数据！我所有逻辑都围绕它来展开！（是数据驱动视图吧？） 我们把当数据转换成要展现的东西：
我们能知道当前的状态currentTab 是什么，是不是就是知道应该那个tab需要展示什么内容了呢？我们理所当然可以使用它切换tab下的内容。
其实说的了这么多话好多都是啰嗦的，我要说其实就一点找到这个框架或者要开发项目的核心，像这组件要写出来其实很简单，就是直接在data里定义出我们要展示的东西，无非就是几个tab（tabs: ['Posts', 'Archive']），当前处于哪个状态（currentTab: 'Posts'），围绕着这个去想是不是自己也很快就有思路就能开发出这个组件呢？ 我想并不是咱们学习能力或者理解能力查是咱们一直没找对从哪里突破。 我们一开始在写这个功能时候脑海里是有这个功能的效果图的，点击会切换就是这么简单。vue.js是数据驱动视图的，所以只要在数据里把想到的东西放里面再去调用就是这么简单。无非就是几个按钮，现在是显示那个按钮下面的东西那就把这些定义到数据里，然后通过你能想到的逻辑去修改他们以达到想要的效果而已。
重点是找到从哪开始写这个组件，它的思想是从哪里开始的，data里其实就是这组件一功能所有起始点，整个功能都围绕data里这两条数据完成的
只是个人看法，如有不对希望谅解，谢谢！