vue你不知道的奇淫絕技

ixlei 發布于2019-08-22 13:58 / 2287人閱讀

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

1.placeholder與computed巧用

表單開發肯定是日常開發中必不可少的環節，可是設計圖經常會有表單默認值的設計，比如:

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

通常就能想到用placeholder來解決這個問題，并且通常會用v-model來綁定data中的值。然后，data的值再設定默認值為空

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

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

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

//template




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

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

{{item.text}}

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

動態組件一般很少用到，但是要做動態引入組件的時候真的超級好用。之前做過的組件配置系統核心就是它。我用的是一個動態組件循環，然后用is獲取組件名，用props獲取各個組件的自定義props



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


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

但是關閉按鈕通常是寫在dialog組件內部的，也就是說，在引用組件頁面是沒有這個按鈕可以點擊的，
所以，可以在dialog里面將點擊時間的信號傳遞出來，引用組件頁面接收到了信號，再控制關閉

//dialog.vue
 
 點擊關閉 

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

//app.vue


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

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

6.css的scoped

vue中的css可以用scoped這個關鍵子來限制css的作用域

這個日常就會用到，因為這樣就不用考慮class的命名會重合，加上使用sass、less、stylus、postcss等css處理器，效果簡直杠杠的。
但是如果你想改動到body這個元素的css樣式，但是又不想改動公用layout模板。那你就可以在一個vue文件寫兩個style標簽

大概就先寫這么多啦，之后再補充，歡迎關注

云服務器 GPU云服務器你不知道你不知道的你不知道的javascript 你不知道的javascript上卷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92704.html

Gradle更小、更快構建APP的奇淫技巧

摘要：本文已獲得原作者授權同意，翻譯以及轉載原文鏈接作者譯文鏈接更小更快構建的奇淫技巧翻譯人上個月，我有機會在發表演講。禁用更新構建下一個技能是在中禁用更新構建。它將使每小時檢查庫的新版本，并增加構建時間。本文已獲得原作者授權同意，翻譯以及轉載原文鏈接：Build your Android app Faster and Smaller than ever作者：Jirawatee譯文鏈接：...

mcterry 2019-06-24 18:16 評論0 收藏0
Gradle更小、更快構建APP的奇淫技巧

摘要：本文已獲得原作者授權同意，翻譯以及轉載原文鏈接作者譯文鏈接更小更快構建的奇淫技巧翻譯人上個月，我有機會在發表演講。禁用更新構建下一個技能是在中禁用更新構建。它將使每小時檢查庫的新版本，并增加構建時間。本文已獲得原作者授權同意，翻譯以及轉載原文鏈接：Build your Android app Faster and Smaller than ever作者：Jirawatee譯文鏈接：...

zzir 2019-08-16 14:10 評論0 收藏0
NGINX的奇淫技巧 —— 2. IF AND 和 OR

摘要：在上一篇文章里的奇淫技巧字符串截斷中我們介紹過了使用來進行截斷字符串的用法這次我們來了解下的邏輯用法什么是邏輯用法呢就程序中的關系就叫做邏輯了支持的與或者與嗎答案是當你嘗試這樣配置重載時會報出錯誤那么我們應該怎樣來實現和的邏輯關系呢在上一篇文章:《NGINX里的奇淫技巧 —— 1. 字符串截斷》中, 我們介紹過了使用if來進行截斷字符串的用法, 這次我們來了解下if的邏輯用法: 什...

CarterLi 2019-07-25 13:27 評論0 收藏0
NGINX的奇淫技巧 —— 7. IF實現數學比較功能 (2)

摘要：接上文的奇淫技巧實現數學比較功能竟然不支持這樣的寫法隨機從取隨機從取如果正則匹配如果正則不匹配求大牛來實現接上文《NGINX的奇淫技巧 —— 6. IF實現數學比較功能 (1)》 NGINX竟然不支持這樣的寫法.... location = /test/ { default_type html; set_random $a 0 9; #$a 隨機從0-...

lifefriend_007 2019-07-25 13:26 評論0 收藏0