Vue中的動畫、監聽見、過濾器、計算屬性

阿新 • • 發佈：2021-01-07

1.動畫

基礎使用：

給哪個元素新增動畫，只需要給元素用<transition>標籤包裹起來就可以

<transition>
    <div class="box" v-show='isShow'></div>
</transition>

之後去樣式中設定6個類名即可

 .v-enter {
            opacity: 0;
        }
        .v-enter-to {
            opacity: 1;
        }
        .v-enter-active {
            transition: all 2s;
        }
        .v-leave {
            opacity: 1;
        }
        .v-leave-to {
            opacity: 0;
        }
        .v-leave-active {
            transition: all 2s;
        }

如果頁面中有多個元素需要新增不同的動畫，那麼只需要給<transition>增加name屬性，同時把6個樣式中的v-替換為name的值

 <transition name='aa'>
    <div class="box" v-show='isShow'></div>
 </transition>
 樣式中:
  .aa-enter {
  opacity: 0;
  }
.aa-enter-to {
opacity: 1;
}
.aa-enter-active {
transition: all 5s;
}
.aa-leave {
opacity: 1;
}
.aa-leave-to {
opacity: 0;
}
.aa-leave-active {
transition: all 5s;
}

2.動畫庫

官網:https://animate.style/

使用:引入css，給需要新增動畫的元素用<transition>包裹起來，然後新增屬性enter-active-classleave-active-class

 <!-- enter-active-class   leave-active-class 使用：引入第三庫 必須新增基類+效果類名 -->
     <transition 
     enter-active-class='animate__animated animate__bounce'
     leave-active-class = 'animate__animated animate__backOutUp'
     >
 <div class="box" v-show='isShow'></div>
 </transition>

2.監聽

-淺監聽

主要監聽基本資料型別

監聽的是在data中宣告的變數，而且監聽的名字不能更改

//淺監聽:只能監聽基礎資料型別

name(newVal, oldVal) {
 console.log(newVal, oldVal)
 },

-深監聽

//監聽引用資料型別用深監聽只能獲取最新的資料handler名稱不能換弊端；使用深監聽會引起頁面的卡頓

//非必要情況不要使用，一旦要使用，需要把深監聽轉換為淺監聽

obj: {
     handler(a) {
     console.log(a)
     },
 deep: true
 },
```

百度搜索案例:

1.原生js案例

<!--  // 跨域；協議，域名，埠號只要有一個不一樣就會出現跨域  jsonp解決
    // jsonp原理:動態建立script標籤，利用src屬性進行跨域
    // 1.動態建立script標籤
    // 2.給src賦值
    // 3.得到資料渲染頁面
    // 4.回撥函式(請求回來的資料)
    // http://suggestion.baidu.com/su?cb=aa&wd=%27abc%E2%80%99 -->
<script>
    // 1.獲取元素
    var oInp = document.querySelector('input')
    var oUl = document.querySelector('ul')

    oInp.oninput = function(a){
        console.log(a)
        // 1.動態建立script標籤
        var os = document.createElement('script');
        // 2.賦值src
        os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.value
        // 3.新增到頁面
        document.body.appendChild(os)
    }

    // 回撥函式
    function aa(res){
        console.log(res)
        var arr = res.s //請求回來的資料
        // 清空上次請求回來的資料
        oUl.innerHTML = ''
        for(var i =0;i<arr.length;i++){
            // 動態建立li
            var oLi = document.createElement('li');
            // 給li新增內容
            oLi.innerHTML = arr[i]
            oUl.appendChild(oLi)
        }
    }
</script>

　2、vue案例

<script>
    // http://suggestion.baidu.com/su?cb=aa&wd=%27abc%E2%80%99
    let vm = new Vue({
        el: '#app',
        data: {
            search: '',
            arr:[],//這是用來儲存請求回來的資料
        },
        methods: {

        },
        watch: {
            search() {
                // 1.動態建立script標籤
                var os = document.createElement('script');
                // 2.賦值src
                os.src = 'http://suggestion.baidu.com/su?cb=aa&wd=' + this.search
                // 3.新增到頁面
                document.body.appendChild(os)
            }
        }
    })

// 定義回撥函式
function aa(res){
    console.log(res)
    vm.arr = res.s
}
</script>

3.過濾器filter

全域性過濾器vue例項的外部定義Vue.filter(過濾器名稱，回撥函式)

區域性過濾器vue例項中增加配置項filters過濾器名稱:function(){過濾操作}

過濾手機號碼
<div id="app">
        <!-- | 叫做管道符  管道符前面是需要過來的屬性，過濾器後面是過濾器名稱-->
      {{tel | filterTel}}
      <!-- 下面的是錯誤的，因為是區域性定義的過濾器 -->
      {{tel | filTel}} 
    </div>
    <script>
    // 全域性過濾器  Vue.filter(過濾器名稱,回撥函式)
Vue.filter('filterTel',(tel)=>{
    return tel.slice(0,3)+'****'+tel.slice(7)
})

    let vm = new Vue({
        el: '#app',
        data: {
          tel:'15858589958'
        },
        methods: {

        },
        
    })</script>
```

過濾價格
<div id="app">
       價格:{{price | filterPrice}}
    </div>
    <script>


// 全域性過濾器  Vue.filter(過濾器名稱,回撥函式)
Vue.filter('filterPrice',(price)=>{
    return price.toFixed(2)
})
    let vm = new Vue({
        el: '#app',
        data: {
          price:29
        },
        methods: {


        },


        
    })
   
// filter: 全域性過濾器  vue例項的外部定義 Vue.filter(過濾器名稱，回撥函式)
//         區域性過濾器  vue例項中增加配置項filters  過濾器名稱:function(){過濾操作}
</script>
```

過濾時間
<script>
<div id="app">
      時間:{{time | filterPrice}}
    </div>
// 全域性過濾器  Vue.filter(過濾器名稱,回撥函式)
Vue.filter('filterPrice',(time)=>{
    // 獲取當前時間
    let data = new Date(time)
    // 年
    let year = data.getFullYear();
    // 月
    let month= (data.getMonth()+1+'').padStart(2,'0');
    // 日
    let day = (data.getDate()+'').padStart(2,'0')
    // 時
    let hours = data.getHours()
    //分
    let min= data.getMinutes()
    // 秒
    let sec = data.getSeconds() 
    return `${year}-${month}-${day} ${hours}:${min}:${sec}`
})
    let vm = new Vue({
        el: '#app',
        data: {
            // new Date().getTime()  獲取當前時間戳
          time:1609917028669
        },
        methods: {
        },

    })
   
// filter: 全域性過濾器  vue例項的外部定義 Vue.filter(過濾器名稱，回撥函式)
//         區域性過濾器  vue例項中增加配置項filters  過濾器名稱:function(){過濾操作}
</script>
```