1.style样式的动态绑定
    2.生命周期
    3.事件监听

    1. <template>
    2.   <div class="about">
    3.     <h1 class="nav" :style="{opacity:opacity}">This is an about page</h1>
    4.   </div>
    5. </template>
    6. <script>
    7. export default {
    8.   data(){
    9.     return {
    10.       opacity:0
    11.     }
    12.   },
    13.   mounted(){
    14.     window.addEventListener("scroll",this.handle)
    15.   },
    16.   methods:{
    17.     handle(){
    18.       var height = document.documentElement.scrollTop;
    19.       /* 到达300完全显示 */
    20.       var opacity = height/300;
    22.       if(opacity>1){
    23.         opacity = 1;
    24.       }
    25.       console.log(opacity)
    26.       this.opacity = opacity;
    27.     }
    28.   },
    29.   destroyed(){
    30.     window.removeEventListener("scroll",this.handle)
    31.   }
    32. }
    33. </script>
    34. <style scoped>
    35.   .nav{
    36.     position: fixed;
    37.     top:0;
    38.     left:0;
    39.     width:100%;
    40.     height: 40px;
    41.     background: red;
    42.     z-index: -1;
    43.   }
    44. </style>