一.屬性計(jì)算、屬性監(jiān)聽(tīng)、屬性過(guò)濾

1.認(rèn)識(shí)MVVM

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

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

?2.屬性計(jì)算

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

2.屬性監(jiān)聽(tīng)

通過(guò)屬性偵聽(tīng)，觀察數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生變化，就執(zhí)行相關(guān)的回調(diào)函數(shù)，data、路由等數(shù)據(jù)發(fā)生改變，就可以執(zhí)行對(duì)應(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.屬性過(guò)濾

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

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

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

  // 計(jì)算屬性//計(jì)算屬性也可以通過(guò)filter進(jìn)行過(guò)濾，獲取信息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;},},