一.屬性計算、屬性監(jiān)聽、屬性過濾

1.認(rèn)識MVVM

V （用戶視圖界面）通過VM (應(yīng)用程序)? 向Model(數(shù)據(jù)模型)? 取值與賦值的過程！

? ? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)雙向綁定? ?視圖改變更新數(shù)據(jù)，數(shù)據(jù)改變更新視圖

?2.屬性計算

//在vue實例中通過computed去計算new Vue({//掛載容器el: "#app",// 設(shè)置數(shù)據(jù)data: {firstName: "",// 姓lastName: "",//名num: 0},computed:{
//在這個對象中寫方法，這個方法名稱就可以作為屬性，retrun的值就是計算的結(jié)果fullName(){return this.firstName+this.lastName
}}
)}

2.屬性監(jiān)聽

通過屬性偵聽，觀察數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化，就執(zhí)行相關(guān)的回調(diào)函數(shù)，data、路由等數(shù)據(jù)發(fā)生改變，就可以執(zhí)行對應(yīng)的回調(diào)，往往用于處理一些異步的操作

用途：根據(jù)城市名稱查詢天氣信息，根據(jù)歌曲id獲取歌曲信息

 new Vue({//掛載容器el: "#app",data: {city: "廣州",music_id: "",user: {age: 20}},watch:{city(nValue,oValue){console.log('數(shù)據(jù)變化') }})}

3.屬性過濾

vue中的filter是輸送介質(zhì)管道不可缺少的一種裝置，意思就是把一些不必要的東西過濾掉，

過濾器實質(zhì)不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進(jìn)行加工處理后返回過濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理，我們也可以理解其為一個純函數(shù)

//用法<div class="container mt-3"><h3>{{str}}</h3><h3>{{str | xxx}}</h3><h3>{{str | yyy}}</h3><!-- 可以多次使用過濾器  先去除字母再轉(zhuǎn)大寫 --><h3>{{str | xxx |zzz}}</h3></div>new Vue({//掛載容器el: "#app",data:{str:'abc123edf456'},// 過濾器 | 過濾不需要的字符filters:{xxx(value){// 去掉所有數(shù)字字符return value.replace(/\d/g,'')},yyy(value){// 去掉所有大小寫字母return value.replace(/[a-z]/ig,'')},zzz(value){// 字母轉(zhuǎn)大寫return value.toUpperCase();}}})

  // 計算屬性//計算屬性也可以通過filter進(jìn)行過濾，獲取信息computed: {addjinXing() {let data = this.arr.filter((item) => item.done == false);return data.length;},addwanCheng() {let data = this.arr.filter((item) => item.done == true);return data.length;},},