vue 入門總結

毛仔發表於2018-11-21
Vue

這篇文章旨在給要學習vue的新手一個大概的認知輪廓，讓你心裡有個學習的結構，有的放矢，避免在前期浪費太多時間。

vue單檔案元件簡介

首先，vue是什麼，為什麼用vue自然不用說，下面直接來個例子，大概掃一下，往下看

<template>
<div class="_full_inner _scroll _effect component-chat" :class="{'_effect--30':decline}">
    <search-bar></search-bar>
    <ul class="wechat-list">
        <li class="item _line-fine" v-for="item in wechat_list" transition="chat-item">
            <div class="info" :class="{
                'current':currentIndex==$index
                }" @touchstart="info_touchstart($index)" v-touch:tap="info_tap($index)" v-touch:swipeleft="info_swipeleft($index)" v-touch-options:swipe="{ direction: 'horizontal' }">
                <div class="ico-box">
                    <i :class="item.chatConfigModel | f_news 'nclass'" v-text="item.chatBaseModel | f_news 'ntext'" v-show="item.chatBaseModel | f_news 'nshow'"></i>
                    <div class="ico">
                        ![](item.base.iconSrc)
                    </div>
                </div>
                <div class="desc">
                    <div class="desc-time" v-text="item.chatBaseModel.endTimeStr | fmtDate 'hh:ss'"></div>
                    <div class="desc-title" v-text="item.base.name"></div>
                    <div class="desc-message">
                        <div class="desc-mute iconfont icon-mute" :title="item.chatConfigModel.newsMute | json" v-show="item.chatConfigModel.newsMute"></div>
                        <span :title="item.base.type" v-show="item.base.type==='friends'" v-text="item.chatBaseModel.endChatAuth+':'"></span>
                        <span v-text="item.chatBaseModel.endChatTxt"></span>
                    </div>
                </div>
            </div>
            <div class="handle">
                <div class="handle-unread" v-touch:tap='increase_newsState($index,1)' v-show="item.chatBaseModel.newsUnreadCount==0">標為未讀</div>
                <div class="handle-unread" v-touch:tap='increase_newsState($index,0)' v-show="item.chatBaseModel.newsUnreadCount>0">標為已讀</div>
                <div class="handle-del" v-touch:tap="delete_item($index)">刪除</div>
            </div>
        </li>
    </ul>
</div>
<!-- router -->
<router-view transition="cover" keep-alive></router-view>
</template>
<script>
import {
    wechat_list
} from 'getters'
import {
    get_menu_wechat_list,
    set_menu_active,
    set_chat,
    set_chat_count,
    set_news_state,
    delete_news
} from '../vuex/actions'

import searchBar from 'components/search-bar.vue'

export default {
    vuex: {
        getters: {
            wechat_list
        },
        actions: {
            get_menu_wechat_list,
        set_menu_active,
        set_chat,
        set_chat_count,
        set_news_state,
        delete_news
    }
},
route: {
    activate({
        from,
        to,
        next
    }) {

        this.set_menu_active(0)
        next()
    }
},
data() {
    return {
        decline: false,
        currentIndex: -1, //列表item處在左劃狀態
        isTouchSwipe: false, //驗證是否處於左劃狀態
    }
},
events: {
    'route-pipe' (_decline) {
        this.decline = _decline
        this.$parent.$emit('route-pipe', _decline)
    }
},
methods: {
    info_touchstart(_index) {
        this.currentIndex = -1
    },
    info_tap(_index) {
        var index = _index;
        if (index >= 0 && !this.isTouchSwipe) {
            this.set_chat(this.wechat_list[index])
            this.$router.go({
                path: "/chat/dialogue"
            })
        }
        this.isTouchSwipe = false
    },
    info_swipeleft(_index) {
        event.stopPropagation()
        if (!this.isTouchSwipe) {
            this.isTouchSwipe = true
            this.currentIndex = _index
        } else {
            this.isTouchSwipe = false
        }
    },
    computed_unRead_count() {
        //計算未讀數量
        let sum = 0;
        console.log(this.wechat_list)
        this.wechat_list.forEach(({
            chatBaseModel,
            chatConfigModel
        }, index) => {
            if (!chatConfigModel.newsMute) {
                let count = chatBaseModel.newsUnreadCount
                sum += count
            }
        })
        this.set_chat_count(sum)
    },
    increase_newsState(index, val) {
        this.isTouchSwipe = false;
        //改變已讀未讀狀態並回撥計算未讀總和
        this.set_news_state(index, val, () => {
            this.currentIndex = -1
            this.computed_unRead_count()
        })
    },
    delete_item(index) {
        this.delete_news(index, () => {
            this.currentIndex = -1;
            this.computed_unRead_count()
        })

    }
},
filters: {
    f_news(obj, attr) {
        var obj = obj || {}
        let newsClass = obj.newsMute ? '_news-dot' : '_news-count'
        let newsText = !obj.newsMute ? obj.newsUnreadCount : ''
        let newsShow = (obj.newsUnreadCount > 0)
        let o = {
            nclass: newsClass,
            ntext: newsText,
            nshow: newsShow
        }
        return o[attr]
    }
},
components: {
    searchBar
},
created() {
    this.get_menu_wechat_list(() => {
        this.computed_unRead_count()
    })
}
}
</script>
<style scoped>
</style>

你可能有點懵逼，其實就三個塊兒

<template>
   ....
</template>
<script>
  ....
</script>
<style>
   ....
</style>

那麼這個東西是JB玩意兒呢？這個是一個vue的元件，是單檔案元件，vue有兩個核心的思想，雙向繫結和元件開發，雙向繫結說的是頁面資料和記憶體資料相互影響，一個改變，另外一個也會隨著改變，這個慢慢理解。最直觀的其實是元件開發的思想，上面這個檔案就是一個元件，template裡是html佈局，script是這個頁面需要的資料，方法，style是樣式，一個vue專案都是由這樣的檔案組成的，這樣的好處可能你也看出來了，兩個，一個是複用性強，另一個是就近維護，擺脫修改一個東西，要模板，樣式，js檔案到處找。這是單檔案元件的介紹。

語法

上面你只是有了一個大概的瞭解，下面我們看看語法，還是看上面的例子，看這一段兒

import {
wechat_list
} from 'getters'
import {
    get_menu_wechat_list,
    set_menu_active,
    set_chat,
    set_chat_count,
    set_news_state,
    delete_news
} from '../vuex/actions'

import searchBar from 'components/search-bar.vue'

export default {

沒錯，這是es6的語法，vue中這樣引入模組，輸出模組資料的語法隨處可見，所以你應該去看看es6關於module這一塊兒的語法 阮一峰es6教程，接著看下面這段兒

data() {
return {
    decline: false,
    currentIndex: -1, //列表item處在左劃狀態
    isTouchSwipe: false, //驗證是否處於左劃狀態
  }
},

這一段返回了一個物件，裡面有一些鍵值對，這些就是頁面中需要的資料。

methods: {
info_touchstart(_index) {
    this.currentIndex = -1
},
info_tap(_index) {
    var index = _index;
    if (index >= 0 && !this.isTouchSwipe) {
        this.set_chat(this.wechat_list[index])
        this.$router.go({
            path: "/chat/dialogue"
        })
    }
    this.isTouchSwipe = false
},

這一段兒定義了很多method，這些方法就是頁面的資料互動和動作

components: {
    searchBar
},

這是一個元件，是這個元件引入的另一個元件，vue就是因為這樣的用法才顯得很nice，你會發現上面的html中有這樣的語句

 <search-bar></search-bar>

js中還有這樣的語句

import searchBar from 'components/search-bar.vue'

至於為什麼這麼寫先不要考慮，先看下面這一段

created() {
this.get_menu_wechat_list(() => {
    this.computed_unRead_count()
})
}

這是個啥呢，每個vue例項都有一個生命週期，從建立到銷燬這個過程，vue都給出了對應的回撥函式，你只要可以指定在某個階段，要怎樣。再看一段兒

 vuex: {
    getters: {
        wechat_list
    },
    actions: {
        get_menu_wechat_list,
    set_menu_active,
    set_chat,
    set_chat_count,
    set_news_state,
    delete_news
  }
},

這個又是啥呢？由於vue異常受歡迎，所以圍繞著vue出現了很多外掛，這個vuex就是其中一個，還有專門做路由的vue_router，還有專門做請求的vue-resource（現在官網推薦vue_axios）。

小結：vue語法涉及的內容還是挺多的，那麼怎麼學呢？首先你得把官方文件先看了，官方文件寫的相當的詳細，你最好把那些小例子都做了。比如基本語法有哪些，啥事雙向繫結，啥是計算屬性，啥是生命週期，元件有幾種語法，單檔案元件的語法，看了官網，這些東西你差不多就懂了一些，接著，看一下視訊，最好是講腳手架工具運用的，這樣，有了基礎語法，你自己下個空的腳手架，試一試，就更有感覺了。下面說一說vue腳手架工具

vue_cli

官網剛開始就有句話，說剛開始學的時候不要去用腳手架，建議你先引入一個cdn檔案，直接開始看語法，這是對的，因為直接看腳手架，上面全是單檔案元件的語法，可能很難接受，所以先引入檔案把官網的例子走一走，知識點過一遍是最好的。
啥是腳手架工具呢？就像剛才說的，你直接引入一個vue.js可以寫一些簡單的語法例子，但是vue的核心就是元件化，而單檔案元件全是.vue的檔案，瀏覽器並不認識，就需要webpack來編譯，所以vue提供了一個框架，整合了webpack，你可以按照官網下載一個，對於熟悉nginx的你，剛開始接觸基於node的vue，你可能會遇到一些坑，看看這篇文章，可能會給你省下很多時間一些坑和補充。關於vue的腳手架工具，你應該儘量去理解他的檔案結構，比如哪個是入口檔案，元件怎麼引入，怎麼例項化，元件裡面怎麼引元件，這些都需要一點一點看。這些建議看視訊，會比較快。如果上面說的你都知道了，這個時候，你差不多就是一個合格的vue小菜雞了。

補充：vue腳手架是前後端分離的架構，那麼如果在laravel中怎樣使用vue的元件化功能呢？可以看一下我的另外一篇文章[laravel與vue]()（我還沒寫呢，寫的有點累了，後面補上。）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章