本文我們會從很多方面來細說vue的一些很好用的開發技巧,值得收藏起來哦,希望能幫助到大家。
1.placeholder與computed巧用
表單開發肯定是日常開發中必不可少的環節,可是設計圖經常會有表單預設值的設計,例如:

需求方的需求點是#:在沒有輸入值的時候顯示預設值,在輸入值的時候顯示輸入值。
通常就能想到用placeholder
來解決這個問題,通常會用v-model
來綁定data
中的值。然後,data
的值再設定預設值為空
1 2 3 4 5 6 7 8 9 10 | data(){
return {
index:0,
name: ''
}
}
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <input type= "text" placeholder= "城市" v-model= "city" />
<input type= "text" placeholder= "国家" v-model= "country" />
<input type= "text" placeholder= "国家+城市" v-model= "countryAndCity" />
data(){
return {
city: '' ,
country: ''
}
},
computed:{
countryAndCity () {
let str = ''
if (this.city && this.country){
str = `${this.city}+${this.country}`
}
return str
}
}
|
登入後複製
在上面就需要做個判斷,當city和country有值的情況才會顯示結果,否則顯示placeholder的值。
2.單選和多選的設計
諸如經過設計師設計的單選和多選按鈕
單選按鈕就比較簡單了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <li v- for = "item, index in list" : class = "{" active ":currentIndex === index}" @click= "select(index)" >{{item}}</li>
data(){
return {
currentIndex:0,
list:[ 'aa' , 'bb' , 'cc' , 'dd' ]
}
},
methods:{
select(index){
this.currentIndex = index
}
}
|
登入後複製
上面很簡單,大概看看就懂了,這是單選的情況,那要是多選的情況呢,那就要換個思路了
首先換個數據格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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就要變成這樣
1 | <li v- for = "(item, index) in list" : class = "{" active ":item.isActive}" @click= "select(index)" >{{item.text}}</li>
|
登入後複製
3.動態元件和非同步元件的使用
動態元件一般很少用到,但是要做動態引入元件的時候真的超級好用。之前做過的組件配置系統核心就是它。我用的是動態元件循環,然後用is取得元件名,用props取得各個元件的自訂props
1 2 3 | <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都是不存在的,所以要加一句判斷,在所有邏輯前面
1 | if (typeof window !== 'object' ) return ;
|
登入後複製
5.this.$emit的妙用
基於組件化思維,很多時候我們會把一個頁面拆分成幾個組件,然後會提取一些公用的組件,比如dialog彈出窗口組件,他的打開和關閉,都是根據引用組件頁面的data的一個值來決定,
1 2 3 4 5 6 7 8 9 10 11 12 13 | <dialog v- if = "isDialog" ></dialog>
data(){
return {
isDialog:false
}
}
methods:{
showDialog(){
this.isDialog = true
}
}
|
登入後複製
但是關閉按鈕通常是寫在dialog元件內部的,也就是說,在引用元件頁面是沒有這個按鈕可以點擊的,
所以,可以在dialog裡面將點擊時間的訊號傳遞出來,引用元件頁面接收到了訊號,再控制關閉
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<p @click= "close" > 点击关闭 </p>
methods:{
close() {
this. $emit ( 'close' )
}
}
<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的作用域
1 | <style scoped>...</style>
|
登入後複製
這個日常就會用到,因為這樣就不用考慮class的命名會重合,加上使用sass、less、stylus、postcss等css處理器,效果簡直是槓槓的。
但如果你想改動到body這個元素的css樣式,但又不想改動公用layout模板。那你就可以在一個vue檔案寫兩個style
標籤
1 2 | <style> body{...} </style>
<style scoped> .. .</style>
|
登入後複製
相關推薦:
Vue實作數字輸入框中分割手機號碼實例教學
vue語法拼接字串詳解
vue 元件之間使用eventbus傳值詳解
vue過渡動畫詳解
vue實作驗證碼60秒倒數功能簡單實例
以上是值得收藏的vue開發技巧實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!