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

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

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

Topic.vue:橙色框部分

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

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

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

由于橙色框部分里熱門和推薦兩個導(dǎo)航按鈕，要根據(jù)兩個按鈕展示不同的文章，這就和上一篇文章里的Home.vue里實現(xiàn)的方式一樣，我們通過:class="{active: show === "hot"}來判斷當(dāng)前按鈕是否處于被點擊狀態(tài)，這里的show來自于vuex(getters)獲取到的show,并且給它加上不一樣的樣式。通過@click="displayTopic("hot")點擊事件來更換不同的show值和文章內(nèi)容。這樣我們就實現(xiàn)了點擊切換按鈕狀態(tài)和文章區(qū)域內(nèi)容。下面放上點擊事件的代碼：
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)簡書的第一步，從這個專題開始。
                  想上首頁熱門榜么？好內(nèi)容想被更多人看到么？來投稿吧！
                  如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                  投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
            number:"97233",
            concern:"121.7",
            keys:"故事、連載",
            time:"20160620"        
        },
        sec: {
            img:"../../static/topic_3.jpg",
            title:"詩",
            par:"詩，讓你感受自己的心靈。
                 專題主編：蘇錦年 投稿須知：
                 1.本專題收錄古詩、詞、現(xiàn)代詩以及詩詞點評及指導(dǎo)。
                 2.內(nèi)容必須為原創(chuàng)，切勿用其他詩人的詩句。
                 3.文章排版整潔，注意...",            
            number:"35420",
            concern:"146.6",
            keys:"詩",
            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)簡書的第一步，從這個專題開始。
                          想上首頁熱門榜么？好內(nèi)容想被更多人看到么？來投稿吧！
                          如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                          投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
                    number:"97233",
                    concern:"121.7k",
                    keys:"故事、連載"
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩",
                    par:"詩，讓你感受自己的心靈。
                     專題主編：蘇錦年 投稿須知：
                     1.本專題收錄古詩、詞、現(xiàn)代詩以及詩詞點評及指導(dǎo)。
                     2.內(nèi)容必須為原創(chuàng)，切勿用其他詩人的詩句。
                    3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6k",
                    keys:"詩",
                    time:"20160630"
                }
            },
            recommend: {
                fir: {
                    img:"../../static/topic_1.jpg",
                    title:"游戲",
                    par:"玩轉(zhuǎn)簡書的第一步，從這個專題開始。
                           想上首頁熱門榜么？好內(nèi)容想被更多人看到么？來投稿吧！
                           如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                           投稿必須原創(chuàng)。如果發(fā)現(xiàn)有非...",            
                    number:"97233",
                    concern:"121.7",
                    keys:"故事、連載",
                    time:"20160620"        
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩",
                    par:"詩，讓你感受自己的心靈。
                         專題主編：蘇錦年 投稿須知：
                         1.本專題收錄古詩、詞、現(xiàn)代詩以及詩詞點評及指導(dǎo)。
                         2.內(nèi)容必須為原創(chuàng)，切勿用其他詩人的詩句。
                         3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6",
                    keys:"詩",
                    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)品極客體驗。
                    主編：向右奔跑 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ù)，可以清楚的看到實現(xiàn)方式。接下來講解排序部分，這里算是一個重點吧，因為我在這里遇到了坑。

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

因為這個小導(dǎo)航欄在熱門頁面里是沒有的，這里才用了vue的v-if功能實現(xiàn)，通過getters獲得此時的show變量，判斷是否是推薦頁面，如果是就顯示。這里的文章依然采用vue的列表渲染功能（真好用），同時給小導(dǎo)航欄設(shè)置了點擊事件，和改變背景的一個變量。接下來放上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;
        }
    }

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

這個頁面相對來說比較簡單，就一個vue的列表渲染（不用列表渲染的話代碼太多，太長，關(guān)鍵是逼格不高），先上頁面：

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

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

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

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