值得收藏的vue開發(fā)技巧實(shí)例

本文我們會(huì)從很多方面來(lái)細(xì)說(shuō)vue的一些很好用的開發(fā)技巧，值得收藏起來(lái)哦，希望能幫助到大家。

1.placeholder與computed巧用

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

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

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

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

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

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

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

//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
<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
 }
}

上面很簡(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就要變成這樣

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

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

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

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
<dialog v-if="isDialog"></dialog>

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

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

//dialog.vue
 
<p @click="close"> 點(diǎn)擊關(guān)閉 </p>

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
 }
}

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

6.css的scoped

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

<style scoped>...</style>

這個(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)簽

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com