真正掌握vuex的使用方法（五）

现在咱们先抛开vuex，一起来做一个如上图一样的切换案例：

<template>
    <div id="app">
        <!--点击此按钮index变为0,并让此按钮应用上样式active-->
       <input type="button" value="vue" :class="{active:index==0}" @click="index=0">
        <!--点击此按钮index变为1,并让此按钮应用上样式active-->
       <input type="button" value="es6" :class="{active:index==1}" @click="index=1">
        <!--点击此按钮index变为2,并让此按钮应用上样式active-->
       <input type="button" value="node" :class="{active:index==2}" @click="index=2">
        <!--当index为0时显示此DIV-->
        <div v-show="index==0">
            <p><a href="https://zhangpeiyue.com/archives/101">利用Vue-cli中的proxyTable解决开发环境的跨域问题</a></p>
            <p><a href="https://zhangpeiyue.com/archives/120">真正掌握vuex的使用方法（一）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/122">真正掌握vuex的使用方法（二）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/126">真正掌握vuex的使用方法（三）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/127">真正掌握vuex的使用方法（四）</a></p>
        </div>
        <!--当index为1时显示此DIV-->
        <div v-show="index==1">
            <p><a href="https://zhangpeiyue.com/archives/92">es6箭头函数的理解及面试题</a></p>
            <p><a href="https://zhangpeiyue.com/archives/88">es6中class类的全方面理解（三）——静态方法</a></p>
            <p><a href="https://zhangpeiyue.com/archives/86">es6中class类的全方面理解（二）——继承</a></p>
            <p><a href="https://zhangpeiyue.com/archives/83">es6中class类的全方面理解（一）</a></p>
            <p><a href="https://zhangpeiyue.com/archives/72">es6中的模块化</a></p>
        </div>
        <!--当index为2时显示此DIV-->
        <div v-show="index==2">
            <p><a href="https://zhangpeiyue.com/archives/118">如何通过node.js对数据进行MD5加密</a></p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'App',
        data(){
            return {
                //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
                index:0
            }
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

上面的代码并不复杂，相信大家也都可以看的明白。通过以上代码咱们可以实现一个简单的切换，通过这种形式来完成的切换可以称其为乞丐版的切换。因为里面的数据都被写死了！所以咱们可以将代码进行一些优化，将数据单独存放起来进行管理： 
首先将所有的数据放到data中：

data(){
    return {
        tagList:[
            {
                tagName:"vue",//按钮的名字
                newList:[//vue新闻的内容列表
                    {
                        newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                        newHref:"https://zhangpeiyue.com/archives/101"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（一）",
                        newHref:"https://zhangpeiyue.com/archives/120"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（二）",
                        newHref:"https://zhangpeiyue.com/archives/122"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（三）",
                        newHref:"https://zhangpeiyue.com/archives/126"
                    },
                    {
                        newTitle:"真正掌握vuex的使用方法（四）",
                        newHref:"https://zhangpeiyue.com/archives/127"
                    }
                ]
            },
            {
                tagName:"es6",//按钮的名字
                newList:[//es6新闻的内容列表
                    {
                        newTitle:"es6箭头函数的理解及面试题",
                        newHref:"https://zhangpeiyue.com/archives/92"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（三）——静态方法",
                        newHref:"https://zhangpeiyue.com/archives/88"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（二）——继承",
                        newHref:"https://zhangpeiyue.com/archives/86"
                    },
                    {
                        newTitle:"es6中class类的全方面理解（一）",
                        newHref:"https://zhangpeiyue.com/archives/83"
                    },
                    {
                        newTitle:"es6中的模块化",
                        newHref:"https://zhangpeiyue.com/archives/72"
                    }
                ]
            },
            {
                tagName:"node",//按钮的名字
                newList:[//node新闻的内容列表
                    {
                        newTitle:"如何通过node.js对数据进行MD5加密",
                        newHref:"https://zhangpeiyue.com/archives/118"
                    }
                ]
            }
        ],
        //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
        index:0
    }
}

然后再将template进行修改

<div id="app">
    <!--对按钮进行遍历-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--对新闻进行遍历-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>

最后运行项目，如你所愿，正常运行，一切都是那么美好！ 
就目前来讲这些数据都已经被单独存放起来了，不过做到这样还远远不够，因为不管是按钮的文字还是新闻的内容正常来讲都是来自于后台人员提供的接口。所以咱们还要继续调整！ 
首先创建一个server.js，创建一个基于express的node服务来提供接口：

var express=require("express");
var app=express();
app.get("/getTagList",function(req,res){
    res.json([
        {
            tagName:"vue",
            newList:[
                {
                    newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                    newHref:"https://zhangpeiyue.com/archives/101"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（一）",
                    newHref:"https://zhangpeiyue.com/archives/120"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（二）",
                    newHref:"https://zhangpeiyue.com/archives/122"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（三）",
                    newHref:"https://zhangpeiyue.com/archives/126"
                },
                {
                    newTitle:"真正掌握vuex的使用方法（四）",
                    newHref:"https://zhangpeiyue.com/archives/127"
                }
            ]
        },
        {
            tagName:"es6",
            newList:[
                {
                    newTitle:"es6箭头函数的理解及面试题",
                    newHref:"https://zhangpeiyue.com/archives/92"
                },
                {
                    newTitle:"es6中class类的全方面理解（三）——静态方法",
                    newHref:"https://zhangpeiyue.com/archives/88"
                },
                {
                    newTitle:"es6中class类的全方面理解（二）——继承",
                    newHref:"https://zhangpeiyue.com/archives/86"
                },
                {
                    newTitle:"es6中class类的全方面理解（一）",
                    newHref:"https://zhangpeiyue.com/archives/83"
                },
                {
                    newTitle:"es6中的模块化",
                    newHref:"https://zhangpeiyue.com/archives/72"
                }
            ]
        },
        {
            tagName:"node",
            newList:[
                {
                    newTitle:"如何通过node.js对数据进行MD5加密",
                    newHref:"https://zhangpeiyue.com/archives/118"
                }
            ]
        }
    ]);
});
app.listen(80,function(){
    console.log("开启服务成功");
})

node server.js将服务开启。 
通过设置proxyTable来解决开发环境中的跨域问题：

proxyTable: {
    "/api":{
        target:"http://127.0.0.1",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/api': ''//路径的替换规则
        }
    }
},

在App.vue中引入axios：

import axios from "axios";

在mounted周期函数中，通过axios来调用接口，改变tagList的值：

mounted(){
    axios.get("api/getTagList")
        .then(data=>{
            this.tagList=data.data;
        })
}

最后App.vue的内容：

<template>
<div id="app">
    <!--对按钮进行遍历-->
   <input type="button" v-for="(item,i) in tagList" :value="item.tagName" :class="{active:i==index}" @click="index=i">
    <!--对新闻进行遍历-->
    <div v-for="(item,i) in tagList" v-show="i==index">
        <p v-for="info in item.newList"><a :href="info.newHref">{{info.newTitle}}</a></p>
    </div>
</div>
</template>
<script>
    import axios from "axios";
    export default {
        name: 'App',
        data(){
            return {
                tagList:[],
                //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
                index:0
            }
        },
        mounted(){
            axios.get("api/getTagList")
                .then(data=>{
                    this.tagList=data.data;
                })
        }
    }
</script>
<style>
    #app input,#app p{
        margin:5px;
        padding:5px;
    }
    #app input.active{
        background:red;
    }
    #app div{
        border:1px solid red;
    }
</style>

一切都是那么的自然！ 
如果对node不是特别了解的同学，可以在static文件夹内创建一个名字叫tagList的json文件，用于存储数据值。

[
    {
        "tagName": "vue",
        "newList": [
            {
                "newTitle": "利用Vue-cli中的proxyTable解决开发环境的跨域问题",
                "newHref": "https://zhangpeiyue.com/archives/101"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（一）",
                "newHref": "https://zhangpeiyue.com/archives/120"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（二）",
                "newHref": "https://zhangpeiyue.com/archives/122"
            },
            {
                "newHref": "https://zhangpeiyue.com/archives/126"
            },
            {
                "newTitle": "真正掌握vuex的使用方法（四）",
                "newHref": "https://zhangpeiyue.com/archives/127"
            }
        ]
    },
    {
        "tagName": "es6",
        "newList": [
            {
                "newTitle": "es6箭头函数的理解及面试题",
                "newHref": "https://zhangpeiyue.com/archives/92"
            },
            {
                "newTitle": "es6中class类的全方面理解（三）——静态方法",
                "newHref": "https://zhangpeiyue.com/archives/88"
            },
            {
                "newTitle": "es6中class类的全方面理解（二）——继承",
                "newHref": "https://zhangpeiyue.com/archives/86"
            },
            {
                "newTitle": "es6中class类的全方面理解（一）",
                "newHref": "https://zhangpeiyue.com/archives/83"
            },
            {
                "newTitle": "es6中的模块化",
                "newHref": "https://zhangpeiyue.com/archives/72"
            }
        ]},
    {
        "tagName":"node",
        "newList":[
            {
                "newTitle":"如何通过node.js对数据进行MD5加密",
                "newHref":"https://zhangpeiyue.com/archives/118"
            }
        ]
    }
]

然后将mounted函数中调取的接口地址调整为”/static/tagList.json”即可：

mounted(){
    axios.get("/static/tagList.json")
        .then(data=>{
            this.tagList=data.data;
        })
}