Vue實戰經驗

記錄本身在寫Vue積累的一些經驗

1. filter，method，computed的使用

剛用這幾個東西的時候，可能會搞混。因此總結了一些相同點和不一樣點,具體選哪一個要看需求，要準確判斷

• 過濾器(能傳參)=>綁定屬性和放在插值裏
• 計算屬性(不能傳參)=>綁定屬性和放在插值裏（計算屬性的值不能改，只能讀）
• 方法(能夠傳參)=>能夠綁定屬性和事件和放在插值裏

計算屬性和方法的不一樣和相同之處

1. 計算屬性會基於依賴進行緩存，若是其依賴不變，則改函數不會執行
2. 方法無論其值有沒有改變，都會從新計算一遍
3. 二者都會根據數據改變而出發

2. vue組件按需加載的方法

const Acomponent= () => import('@/components/Acomponent')

3. vue的data裏的變量名不能用帶下劃線的，取不到

data() {
    _a: 0       //取不到
}

4. 動態圖片和動態圖片背景(圖片在本地，非絕對地址)

<img :src='imgUrl'>      //若是是寫絕對地址沒問題，可是相對地址就不行了，這是webpack的緣由

• 路徑怎麼寫都是找不到的，除非把圖片放到static文件夾裏面，而後寫相對路徑才行,固然這種方法是不會用的；
• 在data裏或者方法裏require(url)，這種方法也不可取，太麻煩了；
• 若是是背景圖片的話推薦寫固定css，而後用綁定動態class或計算屬性或過濾器來切換class；

.class1{
    background:url(url1)
}
.class2{
    background:url(url2)
}

<div :class='computedStyle'></div>
computedStyle(){
    if(xxx){
    return {.class1:true}
    }else{
    return {.class2:true}
    }
}

5. 對組件的理解

• 組件的分離能夠是由於組件能夠被提取出來複用，不管是其邏輯仍是其數據，好比標題欄；也能夠是由於一個組件的代碼太多，放在一塊兒難以組織，這時也能夠單獨提出來
• 我在寫vue組件的時候，將組件分爲公共組件和私有組件
• 公有組件是弱耦合的，業務邏輯比較少的，而私有組件相反
• 公有組件裏面也有數據獲取，有前臺交互，可是這些數據獲取和交互都要依賴父組件（私有組件，也就是頁面）傳遞props或者父組件經過this.$children.func()來調用其邏輯

6. 過濾器除了用在{{}}裏，還能夠放在綁定屬性後面

<div :id="test | formatId"></div>

7. Vue控制dom

• Dom文本：用插值法與數據綁定
• Dom結構：用v-if v-else v-show等控制html結構
• Dom樣式：用屬性綁定樣式
• Dom操做：用事件綁定

8. 父子組件消息傳遞

1. 父組件傳給子組件： props
2. 子組件傳給父組件： 子組件$emit,觸發自定義事件並將數據做爲參數傳遞給父組件，父組件用事件監聽，並拿到傳遞過來的參數

<div id="father" @listenChild="handle">father</div>
    handle(parma) {
        console.log(parma)
    }
    <div id="child" @click="handleClick">child</div>
    handleClick() {
        this.$emit('listenChild', parma)
    }

1. 兄弟組件傳遞：this.$parent.$refs.component.$data
2. 組件跨度太大建議用Vuex管理

9. Vue build配置assetspublicpath

若是是cdn靜態資源，能夠加上域名如www.cdn.com打包後的地址自動變爲www.cdn.com/index.js

10. v-html 能夠轉義字符串,至關於innerHTML

11. v-cloak

<div id='app' v-cloak>
    {{msg}}
</div>

[v-cloak] {
    display: none;
}

這樣當msg還沒被渲染出來以前，是不會顯示這個div的，即不會出現{{msg}}這個字符串

12. scoped

<style>標籤里加上scoped，會在每一個標籤上加上一段data-v-xxx,編譯出來的scc都會加上[data-v-xxx]來限定範圍，只在這個頁面有效，去掉scoped就不會產生data-v-xxx了。

13. input的focus要想有效果要放在$nextTick裏，或者用setTimeout

this.$nextTick(() => {
    this.$refs.inout.$el.focus();
})

14. 在webpack打包的項目中引入jquery，若是版本低於2.0會報錯，通常就是用npm安裝最新版的jquery

15. Render函數

1. v-show指令沒法綁定，只能經過手寫if，else

data() {
    return {
        mark: true
    }
}
render: (createElement) => {
    return createElement('h1', this.mark ? '標題' : '');
}

1. 自定義指令

例子

16. Vuex

• GEtters能夠將state裏的數據過濾後返回

getters: {
    formatTime: _s => formatTime(_s.timeStr)
}

• Actions 通常用來異步改變數據，也就是在回調裏調用mutations

17. v-model綁定input，若是input是數字類型，而且輸入的爲非數字，vue返回的值爲空字符串

18. event bus 實現兄弟組件之間的通訊

event bus

19. 用axios獲取本地文件，寫絕對路徑部署只能部署到靜態服務器的根目錄問題

用axios獲取本地文件，好比json文件的時候，通常放在static文件夾裏，可是寫路徑時不能寫絕對路徑，應該寫'./static/a.json',雖然這個路徑是錯的，可是node會直接從static裏去找。
寫成這樣的相對路徑是由於打包後的json文件會放在static文件夾下，而index在static文件夾外面，因此爲了調試和打包後部署在任何文件目錄下均可以訪問到本地的json文件，寫錯相對路徑。

20. tag爲router-link的屬性，指定該標籤渲染哪一種的標籤，默認爲標籤

<router-link tag='div' class="tab-item" to="/recommend">
    <span class="tab-link">推薦</span>
</router-link>

21. router-link標籤在選中時默認會加上router-link-exact-active router-link-active兩個class

22. 將build的assetsPublicPath改成./以後，css裏的相對路徑就會報錯，還須要改一下css大打包路徑，在utils裏的50行後面加上

publicPath: '../../'

ue相對路徑修改