首頁 > web前端 > js教程 > 值得收藏的vue開發技巧實例

值得收藏的vue開發技巧實例

小云云
發布: 2018-01-25 14:53:42
原創
2494 人瀏覽過

本文我們會從很多方面來細說vue的一些很好用的開發技巧,值得收藏起來哦,希望能幫助到大家。

1.placeholder與computed巧用

表單開發肯定是日常開發中必不可少的環節,可是設計圖經常會有表單預設值的設計,例如:
值得收藏的vue開發技巧實例

需求方的需求點是#:在沒有輸入值的時候顯示預設值,在輸入值的時候顯示輸入值。

通常就能想到用placeholder來解決這個問題,通常會用v-model來綁定data中的值。然後,data的值再設定預設值為空

1

2

3

4

5

6

7

8

9

10

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//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.單選和多選的設計

諸如經過設計師設計的單選和多選按鈕
單選按鈕就比較簡單了

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

    }

}

登入後複製

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

首先換個數據格式

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

//app.vue

<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

//dialog.vue

  

<p @click="close"> 点击关闭 </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

    }

}

登入後複製

大致的思路就是把真正關閉的操作,放在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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
這裡舉例有錯嗎
來自於 1970-01-01 08:00:00
0
0
0
PHP單例模式
來自於 1970-01-01 08:00:00
0
0
0
php - 單例模式問題
來自於 1970-01-01 08:00:00
0
0
0
多對多關係的例子
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板