vue你不知道的奇淫絕技

1.placeholder與computed巧用

表單開發確定是平常開發中必不可少的環節，但是設計圖常常會有表單默認值的設計，好比:

需求方的需求點是：在沒有輸入值的時候顯示默認值，在輸入值的時候顯示輸入值。

一般就能想到用placeholder來解決這個問題，而且一般會用v-model來綁定data中的值。而後，data的值再設定默認值爲空

//script
data(){
    return {
        index:0,
        name:''
    }
}
//template
<input type="number" placeholder="默認值index" v-model="index"/>
<input type="text" placeholder="默認值name" v-model="name"/>

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

可是一些複雜的需求，好比，讓用戶選擇城市名(city)和國家名(country)，最後在一個變量(countryAndCity)上顯示，這個時候就要用computed

//template
<input type="text" placeholder="城市" v-model="city"/>
<input type="text" placeholder="國家" v-model="country"/>
<input type="text" placeholder="國家+城市" v-model="countryAndCity"/>

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

在上面就須要作個判斷，當city和country有值的狀況才顯示結果，不然顯示placeholder的值。

2.單選選中和多選選中的設計

諸如通過設計師設計的單選和多選按鈕

單選按鈕就比較簡單了

//template
<li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li>

//script

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

上面很簡單，大概看看就懂了，這是單選的狀況，那要是多選的狀況呢，那就要換個思路了

首先換個數據格式

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就要變成這樣

<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>

3.動態組件和異步組件的使用

動態組件通常不多用到，可是要作動態引入組件的時候真的超級好用。以前作過的組件配置系統核心就是它。我用的是一個動態組件循環，而後用is獲取組件名，用props獲取各個組件的自定義props

<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components>

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

4.created和mounted的服務端渲染

created和mounted在客戶端渲染時期window對象都是存在的，因此能夠直接操做。
可是在服務端渲染時期，它們二者的window都是不存在的，因此要加一句判斷,在全部邏輯前面

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

5.this.$emit的妙用

基於組件化思惟，不少時候咱們會把一個頁面拆分紅幾個組件，而後會提取一些公用的組件，好比dialog彈窗組件，他的打開和關閉，都是根據引用組件頁面的data的一個值來決定，

//app.vue
<dialog v-if="isDialog"></dialog>

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

可是關閉按鈕一般是寫在dialog組件內部的，也就是說，在引用組件頁面是沒有這個按鈕能夠點擊的，
因此，能夠在dialog裏面將點擊時間的信號傳遞出來，引用組件頁面接收到了信號，再控制關閉

//dialog.vue
 
<div @click="close"> 點擊關閉 </div>

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

//app.vue
<dialog v-if="isDialog" @close="closeDialog"></dialog>

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

大體的思路就是把真正關閉的操做，放在isDialog的頁面，方便操做。
後續還會出一個不這樣引用，直接在methods的方法中引用的公用組件寫法，敬請期待

6.css的scoped

vue中的css能夠用scoped這個關鍵子來限制css的做用域

<style scoped>...</style>

這個平常就會用到，由於這樣就不用考慮class的命名會重合，加上使用sass、less、stylus、postcss等css處理器，效果簡直槓槓的。
可是若是你想改動到body這個元素的css樣式，可是又不想改動公用layout模板。那你就能夠在一個vue文件寫兩個style標籤

<style> body{...} </style>
<style scoped> .. .</style>

大概就先寫這麼多啦，以後再補充，歡迎關注