偽類和偽元素就是為文檔中不一定存在的結構指定樣式，或者為某些元素（甚至文檔本身）的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。

偽類的形式：選擇符: 偽類{ 屬性:屬性值 }

偽元素的形式：選擇符:: 偽元素{ 屬性:屬性值 }

CSS3規范中要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類。

鏈接偽類

a:link{…}  //指向未訪問的鏈接

a:visited{…} //指向已訪問的鏈接

動態偽類

E:hover{…}  //元素上有鼠標指針停留

E:active{…} //元素被用戶輸入激活

E:focus{…}  //元素擁有輸入焦點

偽類的順序很重要，一般為link-visited-focus-hover-active。動態偽類可以應用到任何元素，可以為用戶提供一種“強調”的作用。

E:first-child{…}

為父元素（可以body，div，ul，ol等）中的第一個子元素E元素設置樣式，注意，E必須是父元素中的第一個子元素。

E:lang(value)

為E元素中lang屬性為value的元素設置屬性。相當于E[lang |= “value”]。

結合偽類

a:link:hover{…}//鼠標停留在未訪問的鏈接上

a:visited:hover{…}//鼠標停留在已訪問的鏈接上

偽元素選擇器

在文檔中插入假想元素，導致用戶代理對一個假想元素做出響應。

p:first-letter{…}  //設置首字母樣式，為p塊級元素第一個元素設置樣式

p:first-line{…}   //設置第一行的樣式，為p塊級元素第一個元素設置樣式

所有偽元素都必須放在出現該偽元素的選擇器的最后面。

設置之前和之后元素的樣式

E:before {content:”…”}

E:after {content:”…”}

注：關于偽類和偽元素，我的理解并不是很深，不過掌握上面的這些內容，我想也是夠用了。以上內容大部分是《CSS權威指南》中內容，總結了一下方便記憶。關于偽類和偽元素的內容，這里有一個不錯的文章，下面是這篇文章的鏈接：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto 下面的內容引自這篇文章，可以補充上面的內容，貼在這里方便自己日后查閱。

偽類與偽元素的具體用法

vue 的生命周期11個鉤子函數是按照以下的順序來的 ：（不可逆轉哦,第11個除外） 
一. 組件創建前后

1.beforeCreate
2.created
    


        

            1
        

        

            2
        

    

如，寫一個子組件，然后掛在到父組件，在子組件中，console.log 子組件中的

data（）{ return { a:1 },
    beforeCreate(){
        console.log(this.a)//undefined },
    created(){
        console.log(this.a)//1 }
}
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

. 
.

二. vue啟動前后

3.beforeMount 4.mounted
    


        

            1
        

        

            2
        

    

這兩個的意思就是， 
vue在beforeMount時，還不管事，也就是說，還沒有渲染數據到<div id="app"><div/>里面，此時的這個組件還是空的

當mounted時，才會往<div id="app"><div/> 添加東西，也就是vue正式 
接管<div id="app"><div/>

可以獲取#app的innerHTML查看差異；

beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的內容 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

. 
.

三. 組件更新前后

5.beforeUpdate 6.updated
    


        

            1
        

        

            2
        

    

這個就不用我多說了吧？當子組件里面的 視圖改變 的時候觸發。 
如，做一個按鈕，讓data里面的a++，假如 一開始a是1 
beforeUpdate返回1 
updated返回2

beforeUpdate(){
    console.log(document.getElementById('a').innerHTML)//1 },
updated(){
    console.log(document.getElementById('a').innerHTML)//2 }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

    

再點一次 
beforeUpdate返回2 
updated返回3。。。 
. 
.

四. 組件銷毀前后(一般配合v-if使用)

7.beforeDestroy
8.destroyed
    


        

            1
        

        

            2
        

    

給這個子組件用v-if來控制它的銷毀和創建，注意以下：v-show不行。 
子組件銷毀前觸發beforeDestroy 
子組件銷毀后觸發destroyed 
第一次會觸發7.8. 
創建子組件后會觸發以上的第1.2.3.4.鉤子函數。

有一個問題，如果我們在子組件里寫一個定時器，然后，子組件被銷毀了，定時器還會執行嗎？ 
答案是會的 
所以這時候就會用到了destroyed,在組件被銷毀后，我們把定時器給清除就好了。

所以這兩個鉤子函數一般用于做性能的優化。 
. 
.

五. 組件激活時，未激活時

9.activated
10.deactivated
    


        

            1
        

        

            2
        

    

這兩個鉤子函數呢一般配合<keep-alive><keep-alive/>來使用。 
通過看 四。這個例子，你肯定知道了一個組件怎么被銷毀和創建。 
但是我們知道通常一個組件是很大的，如果我們總是一直創建、銷毀、創建、銷毀。。。這樣很不合理，而且很浪費性能。。。

這時候我們就可以用<keep-alive><keep-alive/>配合著兩個鉤子函數來控制組件的激活和不激活。

說一下<keep-alive><keep-alive/>，它就相當于把你的組件給緩存下來了，目的呢就是不讓組件重復的渲染，然后我們通過v-if觸發，子組件就不會再觸發7 和 8 了，而是只會頻繁的觸發9 和 10 
這樣性能會比7 和 8 好的多。 
. 
.

六. 當捕獲一個來自子孫組件的錯誤時被調用

11.errorCaptured
    


        

            1
        

    

當子孫組件報錯的時候，父組件會觸發這個鉤子函數，并且會返回三個參數， 
第一個參數是 錯誤對象 
第二個參數是 報錯的子孫組件 
第三個參數是 報錯的子孫組件的具體哪個地方報錯。（如，假如我沒有定義b這個變量，但是我去console.log(b) 這一句肯定會報錯，假如我把這句錯誤代碼寫在了created這個鉤子函數里，那第三個參數會返回就是：created hook）

具體第11個沒深入研究，喜歡的可以去看下官網的 errorCaptured。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

本組件基于element-ui 的圖標庫（星星圖標）

第一步：

vue + webpack + element-ui 框架

第二步：

創建Rate.vue文件，實現雙向綁定分數

第三部：

使用組件

代碼

在app.vue中引入組件

    


        


            


                


                

            

            


                

                    <Rate v-model='value' size="32px">
                

            

        

        


            


                


                

            

            


                

                    <span>{{value}} 分</span>
                

            

        

        


            


                


                

            

            


                

                    </Rate>
                

            

        

    

import Rate from './components/Rate'

組件

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="Rating" :value='value'>
                

            

        

        


            


                


                

            

            


                

                    <ul class="Rating-list">
                

            

        

        


            


                


                

            

            


                

                    <li v-for="s in 5" @click="changeRate(s)">
                

            

        

        


            


                


                

            

            


                

                    <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
                

            

        

        


            


                


                

            

            


                

                    </li>
                

            

        

        


            


                


                

            

            


                

                    </ul>
                

            

        

        


            


                


                

            

            


                

                    <slot></slot> <!--顯示用戶自定義內容-->
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

    


        


            


                


                

            

            


                

                    props: {
                

            

        

        


            


                


                

            

            


                

                    size: { //父組件傳值設置字體大小
                

            

        

        


            


                


                

            

            


                

                    type: String,
                

            

        

        


            


                


                

            

            


                

                    default: '16px'
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    value: { //綁定value，與$emit實現雙向綁定
                

            

        

        


            


                


                

            

            


                

                    type:Number,
                

            

        

        


            


                


                

            

            


                

                    default:0 
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    data() {
                

            

        

        


            


                


                

            

            


                

                    return {
                

            

        

        


            


                


                

            

            


                

                    star: this.value, // 初始化
                

            

        

        


            


                


                

            

            


                

                    style: {
                

            

        

        


            


                


                

            

            


                

                    fontSize: this.size //通過prop傳值設置星星字體大小
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    methods: {
                

            

        

        


            


                


                

            

            


                

                    changeRate(s) {
                

            

        

        


            


                


                

            

            


                

                    this.star = s //更新當前星星數量
                

            

        

        


            


                


                

            

            


                

                    this.$emit('input', s); //將當前星星數量s與v-model綁定
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

demo演示

1. 1、opacity:0
2. 2、visibility:hidden
3. 3、diaplay:none
4. 4、position:absolute

     opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。

visibility

     第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏

    注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。

dispaly

    display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。

    任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。

    不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。

position

    假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。

1. .hide {
2. position: absolute;
3. top: -9999px;
4. left: -9999px;
5. }

    隱藏元素的另一種方法是通過剪裁它們實現。

1. .hide {
2. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
3. }

1. 1、opacity:0
2. 2、visibility:hidden
3. 3、diaplay:none
4. 4、position:absolute

     opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。

visibility

     第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏

    注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。

dispaly

    display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。

    任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。

    不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。

position

    假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。

1. .hide {
2. position: absolute;
3. top: -9999px;
4. left: -9999px;
5. }

    隱藏元素的另一種方法是通過剪裁它們實現。

1. .hide {
2. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
3. }