【初戀】vue單頁應用開發總結

時間 2019-11-10

標籤初戀 vue 單頁應用開發總結简体版

原文原文鏈接

vue新人，沒有高級技巧javascript

本文主要總結了使用vue-cli腳手架安裝開發環境，使用vue.js等進行單頁應用開發所遇問題的總結。
技術棧：
Vue v1.0.21, vue-resource v0.91, vue-router v0.7.13,webpack v1.12.2，vue-clivue

開發中注意所使用的庫的版本！java

項目中問題總結：jquery

一：ESlint驗證相關報錯

ESlint中默認沒有alert、使用「===」做爲比較、不使用雙引號等。
可是能夠在.eslintrc.js 文件中配置驗證規則，配置符合本身團隊需求的驗證規範。
好比：
容許tab和space混用：<'rules': { "no-mixed-spaces-and-tabs": [0, "smart-tabs"] }>
其它配置規則能夠參考eslint中文官網：webpack

二：Vue 相關

始終要記住的是vue指令綁定的都是javascript對象git

1：事件綁定
v-click=」eventName」或者 @click=」eventName」
2：屬性綁定
v-bind:href=」url」或者 :href=」url」
注意：屬性綁定和事件綁定簡寫的區別
3：動態綁定 style
:style=」{ color: colorName, fontSize: size}」github

new Vue({
    data: {
        colorName: 'red',
        size: '14px'
    }
})

也能夠綁定一個對象
:style=」styleObj」web

new Vue({
    data: {
        marginTop: '15px',
        color: 'red'
    }
})

這裏要注意三點：ajax

綁定對象和屬性的區別，一個直接綁定，後者須要 {}，
若是要根據不一樣條件切換綁定的對象，能夠:style ="[ isTrue ? Style1 : style2]"，
new vue( ) 中的data 和 vm 中的data寫法有區別(參考官網文檔)

4：綁定class
可使用對象語法或者數組語法vue-router

數組語法：
1.綁定多個

:class="[ 'a', 'b']"

2.動態綁定

:class="class-a"  :class="[isA ? 'a' :  'b']"

或者

:class=」[ ‘class-a', {'a': isA, 'b': isB}]'

像下面這樣數組嵌套不能識別

:class="[ ‘class-a', [isA ? 'a' : 'b']]" // class-a, 0

對象語法
1.單個

:class="{ 'class-a' : isA}"

2.動態綁定

:class="{ 'class-a': isA, 'class-b': isB}'

或者做爲一個對像綁定
:class="classObj"

data: {
    classObj: {
        isA: true,
        isB: false
    }
}

注意：綁定class時，須要注意class是字符串，須要用引號包裹

5：data中的數據沒有被渲染到dom中
在子組件中，data必須是一個function，以下。其中的data須要return返回，纔會被監聽，響應數據偵聽

exports default {
    data () {
        return {
            color: ‘red’
        }
    }
}

6：父子組件通訊
知識點：props，dispatch，broadcast，emit

假設有以下父子組件

<parent>
    <header>頭部組件</header>
    <child><child>
    <sidebar-contact>側邊客服組件</sidebar-contact>
    <footer>腳步組件</footer>
</parent>

// 子組件child
<ul>
    <li v-for=」item in items」> {{ item }} </li>
</ul>

其中，child組件爲一個列表，數據異步獲取。
路由切換到parent所在組件時，在route中獲取數據，並將數據傳給child。代碼以下：

// 父組件中
<parent>
    <header>頭部組件</header>
    <child  :data-for-child="dataForChild"><child>
    <sidebar-contact>側邊客服組件</sidebar-contact>
    <footer>腳步組件</footer>
</parent>

<script>
export default {
    route: {
        data (transition) {
            this.$http.get('url').then((res) => {
                this.dataForChild = res.json().data // 假設結果是數組，通過.json()處理，獲取結果同jquery的ajax返回值res.data
            })
        }
    },
    data () {
        return {
            dataForChild: ''// 綁定的數據應該顯示聲明
        }
    }
}
</script>

子組件中經過props接受數據

// child組件內容
<ul>
    <li v-for=」item in dataForChild」> {{ item }} </li>
</ul>
<script>
    export default {
        props: {
            dataForChild: {
                type: Array // 聲明數據類型，非必須
            }
        }
    }
</script>

這樣就完成了基本父子組件通訊。

增長需求，動態獲取li的高度值
獲取LI的高度方法（getLiH）確定是寫在child組件上，但直接寫在child組件上，無論在child組件生命週期的任什麼時候候調用都是不能獲取到li的高度。（在執行getLiH時，異步數據可能沒有返回，此時li爲null）
所以咱們須要知道什麼數據已經返回且DOM已經更新。
官網說:

Vue.nextTick(() => {
    // dom更新了
})

所以，代碼改成：

//parent組件
//....
    this.dataForChild = res.json().data // 假設結果是數組
    this.$nextTick(() => {
        this.$broadcast(‘getLiH’)
    })
//...

//child 組件 
events: {
    getLiH () {
        // 獲取li的高度
    }
}

知識補充：
events爲一個對象，鍵是監聽的事件對象，值是回調。個人理解是events中的一個事件至關於事件執行vm.$on 和事件觸發vm.$emit.左邊代碼等價於：

methods: {
    getLiHFn () {
        // 獲取li的高度
    }
},
ready: {
    this.$on('getLiH', this.getLiHFn)
}

需求變動 child組件是一個分頁組件，須要實現上拉加載更多功能，當加載最後一頁數據後須要fire掉上拉加載更多這個方法

假設數據加載完變量爲 <this.loadMore.loadAll = true;> 由於加載更多的邏輯實如今child，數據來源於parent 經過ajax異步請求返回的數據。整個過程爲child執行上拉操做，告訴parent執行異步請求，當異步請求返回的data.lengh 爲0 時，設置<this.loadMore.loadAll = true>並經過props傳遞給child，child中執行fire上拉加載這個函數。

// parent組件：

// 父組件中
template:
<parent>
    <header>頭部組件</header>
    <child  :data-for-child="dataForChild" :load-more="loadMore"><child> // 傳遞數據
    <sidebar-contact>側邊客服組件</sidebar-contact>
    <footer>腳步組件</footer>
</parent>

script:
data () {
    return {
        loadMore: {
            size: 10,
            page: 1,
            loadAll: false
        }
    }
},
method：{
    //...
    loadMore (size, page, done) {
        this.$http.get('url').then((res) => {
            if (res.json().code == 0) { done }
        })
    }
    //...
},
compiled: {
    this.$on('loadMoreData', this.loadMore)
}

// child組件中
props: { // 經過props接受數據
    loadMore: {
        type: Object,
        default: '' // 默認數據，能夠不寫
    }    
},
methods: {
    //...
    this.$dispatch('loadMoreData', this.loadMore.size, this.loadMore.page, () => {
        if (this.loadMore.loadAll) {
        // fired 上拉加載更多
        }
    })
    //...
}

知識點
1：$dispatch,子組件告知父組件要幹啥
2：dispatch中匿名函數done的調用。ajax異步請求處理須要在回調中進行

7:[Vue warn]: Attribute "transition" is ignored on component because the component is a fragment instance:
官方說，出現實例片斷的緣由以下：
一、模板包含多個頂級元素。
二、模板只包含普通文本。
三、模板只包含其它組件（其它組件多是一個片斷實例）。
四、模板只包含一個元素指令，如或 vue-router 的。
五、模板根節點有一個流程控制指令，如 v-if 或 v-for。
常犯的錯誤是模板中這樣寫，形成片斷實例產生

<template>
    <nav></nav>
    <content></content>
 </template>

用個div包裹在 nav和content就好了

vue-resource相關

使用版本：v0.91
1：使用timeout 選項時，報錯： Uncaught TypeError: request.cancel is not a function
參考答案在這裏
注：v0.93版本已經修復

2：微信中，有返回數據，可是res.data.data 的數據爲空
緣由v0.91中res是整個http請求的數據，包含response的header、body等，區別jquery返回的res，能夠經過res.data.data 獲取到渲染用的數據（相似jquery res.data）;
在微信中res.data 被轉爲一個字符串，不一樣於其餘瀏覽器（除微信）輸出json對象，故res.data.data 在微信中輸出是一個空字符串。

解決方法，使用res.json() 獲取返回中的json，處理後的res的值相似jquery的ajax返回的res

vue-route 相關

1：帶參數的跳轉，成功跳轉後，url地址欄中url卻沒有攜帶參數
v-link=」name: ’lists’, query: { list: id12}」或者router.go({ name: ‘lists’, query: { list: id12}})
給參數加上’’ , 即v-link=」name: ’lists’, query: { list: ‘id12’}」

2：跨頁面參數
下面是 router中data(transition) 的transition對象，跨頁面（或者跨路由）傳遞參數主要使用的是 ‘to’ 和 ‘from’ 下面的屬性（query，params等）的值。