成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue你不知道的奇淫絕技

ixlei / 2293人閱讀

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

1.placeholder與computed巧用

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

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

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

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

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

但是一些復(fù)雜的需求，比如，讓用戶選擇城市名(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
    }
}

在上面就需要做個判斷，當(dāng)city和country有值的情況才顯示結(jié)果，否則顯示placeholder的值。

2.單選選中和多選選中的設(shè)計

諸如經(jīng)過設(shè)計師設(shè)計的單選和多選按鈕

單選按鈕就比較簡單了

//template

  • {{item}}
    • 

//script

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

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

    首先換個數(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就要變成這樣

  • {{item.text}}
    •
    3.動態(tài)組件和異步組件的使用

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

    

componentList:[{ name:"index",props:{title:"title"}}]
    4.created和mounted的服務(wù)端渲染

    created和mounted在客戶端渲染時期window對象都是存在的，所以可以直接操作。
    但是在服務(wù)端渲染時期，它們兩者的window都是不存在的，所以要加一句判斷,在所有邏輯前面

    if(typeof window !== "object") return ;
    5.this.$emit的妙用

    基于組件化思維，很多時候我們會把一個頁面拆分成幾個組件，然后會提取一些公用的組件，比如dialog彈窗組件，他的打開和關(guān)閉，都是根據(jù)引用組件頁面的data的一個值來決定，

    //app.vue


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

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

    //dialog.vue
 

     點擊關(guān)閉 
    

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

//app.vue


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

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

    6.css的scoped

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

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

    大概就先寫這么多啦，之后再補(bǔ)充，歡迎關(guān)注

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92704.html

    相關(guān)文章

    • Gradle更小、更快構(gòu)建APP的奇淫技巧

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

      mcterry 評論0 收藏0

    • Gradle更小、更快構(gòu)建APP的奇淫技巧

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

      zzir 評論0 收藏0

    • NGINX的奇淫技巧 —— 2. IF AND 和 OR

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

      CarterLi 評論0 收藏0

    • NGINX的奇淫技巧 —— 7. IF實現(xiàn)數(shù)學(xué)比較功能 (2)

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

      lifefriend_007 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <