摘要：通過(guò)點(diǎn)擊事件來(lái)更換不同的值和文章內(nèi)容。文章排版整潔，注意詩(shī)游戲玩轉(zhuǎn)簡(jiǎn)書(shū)的第一步，從這個(gè)專題開(kāi)始。專題主編蘇錦年投稿須知本專題收錄古詩(shī)詞現(xiàn)代詩(shī)以及詩(shī)詞點(diǎn)評(píng)及指導(dǎo)。內(nèi)容必須為原創(chuàng)，切勿用其他詩(shī)人的詩(shī)句。

接著上一篇我們接著講,關(guān)于這個(gè)網(wǎng)站的專題頁(yè)面和2015精選頁(yè)面，如果有小伙伴沒(méi)看過(guò)上一篇文章，這里附上上一篇文章的的鏈接基于Vue,Vue-router,Vuex的簡(jiǎn)書(shū)網(wǎng)站模仿
這里是網(wǎng)站的源碼下載地址 Github Repo
這里是Demo地址，在線感受vue的魅力

App.vue:黃色框部分和紫色框部分

Topic.vue:橙色框部分

Topic_article.vue:藍(lán)色框部分（同時(shí)也是重點(diǎn)部分，實(shí)現(xiàn)點(diǎn)擊排序）

學(xué)會(huì)分析頁(yè)面結(jié)構(gòu)，是用vue開(kāi)發(fā)一個(gè)比較重要的地方（我猜的），所以我再次分析了一次。頁(yè)面結(jié)構(gòu)分析結(jié)束后，接下來(lái)就是上代碼的時(shí)候了。

topic.vue部分和上一篇文章的home.vue部分是如出一轍的，為了讓大家加深印象，我就再講一次（我不會(huì)講我是來(lái)湊字?jǐn)?shù)的，嘿嘿）。上代碼：

由于橙色框部分里熱門(mén)和推薦兩個(gè)導(dǎo)航按鈕，要根據(jù)兩個(gè)按鈕展示不同的文章，這就和上一篇文章里的Home.vue里實(shí)現(xiàn)的方式一樣，我們通過(guò):class="{active: show === "hot"}來(lái)判斷當(dāng)前按鈕是否處于被點(diǎn)擊狀態(tài)，這里的show來(lái)自于vuex(getters)獲取到的show,并且給它加上不一樣的樣式。通過(guò)@click="displayTopic("hot")點(diǎn)擊事件來(lái)更換不同的show值和文章內(nèi)容。這樣我們就實(shí)現(xiàn)了點(diǎn)擊切換按鈕狀態(tài)和文章區(qū)域內(nèi)容。下面放上點(diǎn)擊事件的代碼：
actions.js:

export const displayTopic = ({ dispatch },show) => {
    dispatch("DISPLAY_TOPIC",show)
} 

store.js:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {
    topics:{
        fir: {
            img:"../../static/topic_1.jpg",
            title:"游戲",
            par:"玩轉(zhuǎn)簡(jiǎn)書(shū)的第一步，從這個(gè)專題開(kāi)始。
                  想上首頁(yè)熱門(mén)榜么？好內(nèi)容想被更多人看到么？來(lái)投稿吧！
                  如果被拒也不要灰心哦～入選文章會(huì)進(jìn)一個(gè)隊(duì)列挨個(gè)上首頁(yè)，請(qǐng)耐心等待。
                  投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
            number:"97233",
            concern:"121.7",
            keys:"故事、連載",
            time:"20160620"        
        },
        sec: {
            img:"../../static/topic_3.jpg",
            title:"詩(shī)",
            par:"詩(shī)，讓你感受自己的心靈。
                 專題主編：蘇錦年 投稿須知：
                 1.本專題收錄古詩(shī)、詞、現(xiàn)代詩(shī)以及詩(shī)詞點(diǎn)評(píng)及指導(dǎo)。
                 2.內(nèi)容必須為原創(chuàng)，切勿用其他詩(shī)人的詩(shī)句。
                 3.文章排版整潔，注意...",            
            number:"35420",
            concern:"146.6",
            keys:"詩(shī)",
            time:"20160630"
        }
    },
    show_2:"hot"
}

const mutations = {
    DISPLAY_TOPIC (state, show) {
        const topic = {
            hot: {
                fir: {
                    img:"url../../static/vue-demo-hot.jpg",
                    title:"游戲",
                    par:"玩轉(zhuǎn)簡(jiǎn)書(shū)的第一步，從這個(gè)專題開(kāi)始。
                          想上首頁(yè)熱門(mén)榜么？好內(nèi)容想被更多人看到么？來(lái)投稿吧！
                          如果被拒也不要灰心哦～入選文章會(huì)進(jìn)一個(gè)隊(duì)列挨個(gè)上首頁(yè)，請(qǐng)耐心等待。
                          投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
                    number:"97233",
                    concern:"121.7k",
                    keys:"故事、連載"
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩(shī)",
                    par:"詩(shī)，讓你感受自己的心靈。
                     專題主編：蘇錦年 投稿須知：
                     1.本專題收錄古詩(shī)、詞、現(xiàn)代詩(shī)以及詩(shī)詞點(diǎn)評(píng)及指導(dǎo)。
                     2.內(nèi)容必須為原創(chuàng)，切勿用其他詩(shī)人的詩(shī)句。
                    3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6k",
                    keys:"詩(shī)",
                    time:"20160630"
                }
            },
            recommend: {
                fir: {
                    img:"../../static/topic_1.jpg",
                    title:"游戲",
                    par:"玩轉(zhuǎn)簡(jiǎn)書(shū)的第一步，從這個(gè)專題開(kāi)始。
                           想上首頁(yè)熱門(mén)榜么？好內(nèi)容想被更多人看到么？來(lái)投稿吧！
                           如果被拒也不要灰心哦～入選文章會(huì)進(jìn)一個(gè)隊(duì)列挨個(gè)上首頁(yè)，請(qǐng)耐心等待。
                           投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
                    number:"97233",
                    concern:"121.7",
                    keys:"故事、連載",
                    time:"20160620"        
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩(shī)",
                    par:"詩(shī)，讓你感受自己的心靈。
                         專題主編：蘇錦年 投稿須知：
                         1.本專題收錄古詩(shī)、詞、現(xiàn)代詩(shī)以及詩(shī)詞點(diǎn)評(píng)及指導(dǎo)。
                         2.內(nèi)容必須為原創(chuàng)，切勿用其他詩(shī)人的詩(shī)句。
                         3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6",
                    keys:"詩(shī)",
                    time:"20160630"
                },
                thi: {
                    img:"../../static/topic_2.jpg",
                    title:"@IT互聯(lián)網(wǎng)",
                    par:"@IT 專題 由 IT大分類，轉(zhuǎn)定位于IT·互聯(lián)網(wǎng)行業(yè)觀察與思考，數(shù)碼產(chǎn)品極客體驗(yàn)。
                    主編：向右奔跑 http://www.jianshu.com/users/54b5900965ea...",            
                    number:"8409",
                    concern:"111.1",
                    keys:"互聯(lián)網(wǎng)、產(chǎn)品、科技",
                    time:"20160625"            
                }
            }
        }
        state.show_2 = show
        state.topics = topic[show]    
    }
}
export default new Vuex.Store({
    state,
    mutations
})

這里面我省掉了上一章的代碼。這里面我才用模擬的數(shù)據(jù)，可以清楚的看到實(shí)現(xiàn)方式。接下來(lái)講解排序部分，這里算是一個(gè)重點(diǎn)吧，因?yàn)槲以谶@里遇到了坑。

這部分我們要實(shí)現(xiàn)根據(jù)小導(dǎo)航的切換來(lái)顯示不同的順序（熱門(mén)，推薦，最新更新），這里我只做了推薦和最新更新這兩部分。首先要實(shí)現(xiàn)這種效果，我們第一時(shí)間想到的就應(yīng)該是和大導(dǎo)航一樣給小導(dǎo)航添加class綁定和點(diǎn)擊事件。接下來(lái)看代碼，先是Topic_article.vue的代碼：

因?yàn)檫@個(gè)小導(dǎo)航欄在熱門(mén)頁(yè)面里是沒(méi)有的，這里才用了vue的v-if功能實(shí)現(xiàn)，通過(guò)getters獲得此時(shí)的show變量，判斷是否是推薦頁(yè)面，如果是就顯示。這里的文章依然采用vue的列表渲染功能（真好用），同時(shí)給小導(dǎo)航欄設(shè)置了點(diǎn)擊事件，和改變背景的一個(gè)變量。接下來(lái)放上actions.js里面的代碼：

export const sortContent = ({ dispatch },method) => {
    dispatch("SORTCONTENT",method)
}

也是那么短小精悍，畢竟我只用于分發(fā)事件。下面是store.js里面的代碼：

SORTCONTENT (state, method){
        const temp = state.topics
        let arr = []
        let Arr = objClone(state.topics)
        switch(method){
            case "time":
                arr = [temp.fir.time, temp.sec.time, temp.thi.time].sort()
                break
            case "concern":
                arr = [temp.fir.concern, temp.sec.concern, temp.thi.concern].sort()
                break
            default:
                break
        } 
        for(let keys in state.topics){
            if(Arr[keys][method] == arr[2]){
                state.topics.fir = Arr[keys]
            }
            else if(Arr[keys][method] == arr[1]){
                state.topics.sec = Arr[keys]
            }
            else if(Arr[keys][method] == arr[0]){
                state.topics.thi = Arr[keys]
            }
        }
        function objClone(myObj){
            if(typeof(myObj) != "object") return myObj;
            if(myObj == null) return myObj;
            var myNewObj = new Object();
            for(var i in myObj){
                myNewObj[i] = objClone(myObj[i]);
            }
            return myNewObj;
        }
    }

這個(gè)事件的代碼也很好理解，通過(guò)對(duì)不同的method,把不同的變量進(jìn)行排序后賦值給一個(gè)數(shù)組，然后依次與topics做匹配，因?yàn)槲疫@里只模擬了三個(gè)數(shù)據(jù)，故這部分操作比較簡(jiǎn)單。重點(diǎn)的是當(dāng)我匹配topics里第三個(gè)屬性（thi）的值的時(shí)候，這個(gè)時(shí)候topics里的第三個(gè)屬性值已經(jīng)變了（因?yàn)槿绻诙€(gè)屬性(sec)的值是最小的，就會(huì)把這個(gè)屬性賦給第三個(gè)屬性，這時(shí)候第三個(gè)屬性就變了，所以第三次匹配的時(shí)候還是得出和第二次同樣的結(jié)果）。這時(shí)候我的做法是克隆一個(gè)和topics相同的對(duì)象，用這個(gè)對(duì)象去匹配，匹配好了之后把這個(gè)對(duì)象里相應(yīng)的值賦值給topics。我講的有點(diǎn)啰嗦，具體看代碼實(shí)現(xiàn)。（ps:克隆對(duì)象的時(shí)候，我竟然直接進(jìn)行賦值克隆，殊不知都是指向同一個(gè)地址空間，后來(lái)了解到需要重新開(kāi)一個(gè)地址空間才能克隆，故有了上面那段objClone函數(shù)。）
到這里簡(jiǎn)書(shū)兩個(gè)主要的部分就講完了（Home.vue,Topic.vue）
接下來(lái)說(shuō)一說(shuō)2015年精選頁(yè)面

這個(gè)頁(yè)面相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，就一個(gè)vue的列表渲染（不用列表渲染的話代碼太多，太長(zhǎng)，關(guān)鍵是逼格不高），先上頁(yè)面：

圖中類似的標(biāo)簽有12個(gè)，故才用列表渲染來(lái)簡(jiǎn)化重復(fù)的代碼，接下來(lái)是代碼部分：

下面是store.js里面模擬的數(shù)據(jù)

    texts:{
        Jan:{
            title:"給你90天，成為不一樣的自己",
            content_1:"如果你應(yīng)付不了現(xiàn)在的生活和工作",
            content_2:"無(wú)論你走到哪里，",
            content_3:"無(wú)論你換了什么工作，什么公司，",
            content_4:"都無(wú)濟(jì)于事。",
            content_5:"因?yàn)槟愀緵](méi)想讓自己成熟起來(lái)，",
            content_6:"想讓變的更優(yōu)秀也不過(guò)是一句口頭禪。",
            author:"",
            bg:"url(../../static/bonus_1.jpg)"
        },
        Feb:{
            title:"使你更有思想的20本書(shū)",
            content_1:"真正偉大的當(dāng)代文學(xué)，",
            content_2:"正如人們借由狄更斯來(lái)了解十九世紀(jì)的英國(guó)，",
            content_3:"后人也可以通過(guò)《自由》來(lái)了解",
            content_4:"二十一世紀(jì)初期的美國(guó)。",
            content_5:"",
            content_6:"",
            author:"",
            bg:"url(../../static/bonus_2.jpg)"
        },
        Mar:{
            title:"無(wú)感是最舒適的愛(ài)情",
            content_1:"愛(ài)情原本就是個(gè)很嬌氣的東西，",
            content_2:"它經(jīng)不起太多的矯情，你死我活和無(wú)理取鬧，",
            content_3:"也經(jīng)不起任何的偽裝，刻意討好和忍辱負(fù)重。",
            content_4:"當(dāng)她拂去所有的驚喜，榮幸，不敢置信和小心翼翼，",
            content_5:"才是愛(ài)情最原本的樣子。",
            content_6:"當(dāng)她不再刻意的感受他的存在，",
            author:"",
            bg:"url(../../static/bonus_3.jpg)"
        },
        Apr:{
            title:"無(wú)感是最舒適的愛(ài)情",
            content_1:"愛(ài)情原本就是個(gè)很嬌氣的東西，",
            content_2:"它經(jīng)不起太多的矯情，你死我活和無(wú)理取鬧，",
            content_3:"也經(jīng)不起任何的偽裝，刻意討好和忍辱負(fù)重。",
            content_4:"當(dāng)她拂去所有的驚喜，榮幸，不敢置信和小心翼翼，",
            content_5:"才是愛(ài)情最原本的樣子。",
            content_6:"當(dāng)她不再刻意的感受他的存在，",
            author:"",
            bg:"url(../../static/bonus_4.jpg)"
        }

這里我只給出5條數(shù)據(jù)，后面都是重復(fù)的，代碼就不過(guò)多講解了，實(shí)現(xiàn)方式和前面的一樣?？吹竭@里是不是感覺(jué)寫(xiě)一個(gè)網(wǎng)頁(yè)很簡(jiǎn)單，是不是覺(jué)得Vue可好玩了，是的話那就對(duì)了，加油吧！騷年！
結(jié)尾還是那句話，求個(gè)收藏什么的，如有錯(cuò)誤，歡迎斧正。