vue你不知道的奇淫絕技

ixlei 發(fā)布于2019-08-22 13:58 / 2291人閱讀

摘要：之前做過(guò)的組件配置系統(tǒng)核心就是它。但是如果你想改動(dòng)到這個(gè)元素的樣式，但是又不想改動(dòng)公用模板。

1.placeholder與computed巧用

表單開發(fā)肯定是日常開發(fā)中必不可少的環(huán)節(jié)，可是設(shè)計(jì)圖經(jīng)常會(huì)有表單默認(rèn)值的設(shè)計(jì)，比如:

需求方的需求點(diǎn)是：在沒有輸入值的時(shí)候顯示默認(rèn)值，在輸入值的時(shí)候顯示輸入值。

通常就能想到用placeholder來(lái)解決這個(gè)問題，并且通常會(huì)用v-model來(lái)綁定data中的值。然后，data的值再設(shè)定默認(rèn)值為空

//script
data(){
    return {
        index:0,
        name:""
    }
}
//template

以上這種效果是,第一個(gè)input的placeholder的值顯示不出，顯示了index的值：0，不符合需求
第二種能顯示placeholder的值,需求滿足。

但是一些復(fù)雜的需求，比如，讓用戶選擇城市名(city)和國(guó)家名(country)，最后在一個(gè)變量(countryAndCity)上顯示，這個(gè)時(shí)候就要用computed

//template




//script
data(){
    return {
        city:"",
        country:""
    }
},
computed:{
    countryAndCity () {
        let str = ""
        if(this.city && this.country){
            str = `${this.city}+${this.country}`
        }
        return str
    }
}

在上面就需要做個(gè)判斷，當(dāng)city和country有值的情況才顯示結(jié)果，否則顯示placeholder的值。

2.單選選中和多選選中的設(shè)計(jì)

諸如經(jīng)過(guò)設(shè)計(jì)師設(shè)計(jì)的單選和多選按鈕

單選按鈕就比較簡(jiǎn)單了

//template
{{item}}

//script

data(){
    return {
        currentIndex:0，
        list:["aa","bb","cc","dd"]
    }
},
methods:{
    select(index){
        this.currentIndex = index
    }
}

上面很簡(jiǎn)單，大概看看就懂了，這是單選的情況，那要是多選的情況呢，那就要換個(gè)思路了

首先換個(gè)數(shù)據(jù)格式

data(){
    return {
        list:[
        {text:"aa",isActive:false},
        {text:"bb",isActive:false}
        {text:"cc",isActive:false}"
        ]
    }
},
methods:{
    select(index){
        this.list[index].isActive = !this.list[index].isActive
    }
}

然后template就要變成這樣

{{item.text}}

3.動(dòng)態(tài)組件和異步組件的使用

動(dòng)態(tài)組件一般很少用到，但是要做動(dòng)態(tài)引入組件的時(shí)候真的超級(jí)好用。之前做過(guò)的組件配置系統(tǒng)核心就是它。我用的是一個(gè)動(dòng)態(tài)組件循環(huán)，然后用is獲取組件名，用props獲取各個(gè)組件的自定義props



componentList:[{ name:"index",props:{title:"title"}}]

4.created和mounted的服務(wù)端渲染

created和mounted在客戶端渲染時(shí)期window對(duì)象都是存在的，所以可以直接操作。
但是在服務(wù)端渲染時(shí)期，它們兩者的window都是不存在的，所以要加一句判斷,在所有邏輯前面

if(typeof window !== "object") return ;

5.this.$emit的妙用

基于組件化思維，很多時(shí)候我們會(huì)把一個(gè)頁(yè)面拆分成幾個(gè)組件，然后會(huì)提取一些公用的組件，比如dialog彈窗組件，他的打開和關(guān)閉，都是根據(jù)引用組件頁(yè)面的data的一個(gè)值來(lái)決定，

//app.vue


data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    }
}

但是關(guān)閉按鈕通常是寫在dialog組件內(nèi)部的，也就是說(shuō)，在引用組件頁(yè)面是沒有這個(gè)按鈕可以點(diǎn)擊的，
所以，可以在dialog里面將點(diǎn)擊時(shí)間的信號(hào)傳遞出來(lái)，引用組件頁(yè)面接收到了信號(hào)，再控制關(guān)閉

//dialog.vue
 
 點(diǎn)擊關(guān)閉 

methods:{
    close() {
        this.$emit("close")
    }
}    

//app.vue


data(){
    return {
        isDialog:false
    }
}
methods:{
    showDialog(){
        this.isDialog = true
    },
    closeDialog(){
        this.isDialog = false
    }
}

大致的思路就是把真正關(guān)閉的操作，放在isDialog的頁(yè)面，方便操作。
后續(xù)還會(huì)出一個(gè)不這樣引用，直接在methods的方法中引用的公用組件寫法，敬請(qǐng)期待

6.css的scoped

vue中的css可以用scoped這個(gè)關(guān)鍵子來(lái)限制css的作用域

這個(gè)日常就會(huì)用到，因?yàn)檫@樣就不用考慮class的命名會(huì)重合，加上使用sass、less、stylus、postcss等css處理器，效果簡(jiǎn)直杠杠的。
但是如果你想改動(dòng)到body這個(gè)元素的css樣式，但是又不想改動(dòng)公用layout模板。那你就可以在一個(gè)vue文件寫兩個(gè)style標(biāo)簽

大概就先寫這么多啦，之后再補(bǔ)充，歡迎關(guān)注