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

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

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

Topic.vue:橙色框部分

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

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

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

由于橙色框部分里熱門和推薦兩個導航按鈕，要根據兩個按鈕展示不同的文章，這就和上一篇文章里的Home.vue里實現的方式一樣，我們通過:class="{active: show === "hot"}來判斷當前按鈕是否處于被點擊狀態，這里的show來自于vuex(getters)獲取到的show,并且給它加上不一樣的樣式。通過@click="displayTopic("hot")點擊事件來更換不同的show值和文章內容。這樣我們就實現了點擊切換按鈕狀態和文章區域內容。下面放上點擊事件的代碼：
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:"玩轉簡書的第一步，從這個專題開始。
                  想上首頁熱門榜么？好內容想被更多人看到么？來投稿吧！
                  如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                  投稿必須原創。如果發現有非...",            
            number:"97233",
            concern:"121.7",
            keys:"故事、連載",
            time:"20160620"        
        },
        sec: {
            img:"../../static/topic_3.jpg",
            title:"詩",
            par:"詩，讓你感受自己的心靈。
                 專題主編：蘇錦年 投稿須知：
                 1.本專題收錄古詩、詞、現代詩以及詩詞點評及指導。
                 2.內容必須為原創，切勿用其他詩人的詩句。
                 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:"玩轉簡書的第一步，從這個專題開始。
                          想上首頁熱門榜么？好內容想被更多人看到么？來投稿吧！
                          如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                          投稿必須原創。如果發現有非...",            
                    number:"97233",
                    concern:"121.7k",
                    keys:"故事、連載"
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩",
                    par:"詩，讓你感受自己的心靈。
                     專題主編：蘇錦年 投稿須知：
                     1.本專題收錄古詩、詞、現代詩以及詩詞點評及指導。
                     2.內容必須為原創，切勿用其他詩人的詩句。
                    3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6k",
                    keys:"詩",
                    time:"20160630"
                }
            },
            recommend: {
                fir: {
                    img:"../../static/topic_1.jpg",
                    title:"游戲",
                    par:"玩轉簡書的第一步，從這個專題開始。
                           想上首頁熱門榜么？好內容想被更多人看到么？來投稿吧！
                           如果被拒也不要灰心哦～入選文章會進一個隊列挨個上首頁，請耐心等待。
                           投稿必須原創。如果發現有非...",            
                    number:"97233",
                    concern:"121.7",
                    keys:"故事、連載",
                    time:"20160620"        
                },
                sec: {
                    img:"../../static/topic_3.jpg",
                    title:"詩",
                    par:"詩，讓你感受自己的心靈。
                         專題主編：蘇錦年 投稿須知：
                         1.本專題收錄古詩、詞、現代詩以及詩詞點評及指導。
                         2.內容必須為原創，切勿用其他詩人的詩句。
                         3.文章排版整潔，注意...",            
                    number:"35420",
                    concern:"146.6",
                    keys:"詩",
                    time:"20160630"
                },
                thi: {
                    img:"../../static/topic_2.jpg",
                    title:"@IT互聯網",
                    par:"@IT 專題 由 IT大分類，轉定位于IT·互聯網行業觀察與思考，數碼產品極客體驗。
                    主編：向右奔跑 http://www.jianshu.com/users/54b5900965ea...",            
                    number:"8409",
                    concern:"111.1",
                    keys:"互聯網、產品、科技",
                    time:"20160625"            
                }
            }
        }
        state.show_2 = show
        state.topics = topic[show]    
    }
}
export default new Vuex.Store({
    state,
    mutations
})

這里面我省掉了上一章的代碼。這里面我才用模擬的數據，可以清楚的看到實現方式。接下來講解排序部分，這里算是一個重點吧，因為我在這里遇到了坑。

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

因為這個小導航欄在熱門頁面里是沒有的，這里才用了vue的v-if功能實現，通過getters獲得此時的show變量，判斷是否是推薦頁面，如果是就顯示。這里的文章依然采用vue的列表渲染功能（真好用），同時給小導航欄設置了點擊事件，和改變背景的一個變量。接下來放上actions.js里面的代碼：

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

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

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

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

下面是store.js里面模擬的數據

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

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