前端小白学习Vue框架（二）

一.属性计算、属性监听、属性过滤

1.认识MVVM

V （用户视图界面）通过VM (应用程序)  向Model(数据模型)  取值与赋值的过程！

                          数据双向绑定   视图改变更新数据，数据改变更新视图

 2.属性计算

//在vue实例中通过computed去计算
   new Vue({
        //挂载容器
        el: "#app",
        // 设置数据
        data: {
            firstName: "",// 姓
            lastName: "",//名
            num: 0
        },
      computed:{
//在这个对象中写方法，这个方法名称就可以作为属性，retrun的值就是计算的结果
     fullName(){
        return this.firstName+this.lastName
}

}
)}

2.属性监听

通过属性侦听，观察数据的变化，数据发生变化，就执行相关的回调函数，data、路由等数据发生改变，就可以执行对应的回调，往往用于处理一些异步的操作

用途：根据城市名称查询天气信息，根据歌曲id获取歌曲信息

 new Vue({
        //挂载容器
        el: "#app",
        data: {
            city: "广州",
            music_id: "",
            user: {
                age: 20
            }
       },
       watch:{
       city(nValue,oValue){
        console.log('数据变化') 
        }

          }
        )}

3.属性过滤

vue中的filter是输送介质管道不可缺少的一种装置，意思就是把一些不必要的东西过滤掉，

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数

//用法
 <div class="container mt-3">
        <h3>{{str}}</h3>
        <h3>{{str | xxx}}</h3>
        <h3>{{str | yyy}}</h3>
        <!-- 可以多次使用过滤器  先去除字母再转大写 -->
        <h3>{{str | xxx |zzz}}</h3>
      </div>

 new Vue({
    //挂载容器
    el: "#app",
    data:{
      str:'abc123edf456'
    },
    // 过滤器 | 过滤不需要的字符
    filters:{
      xxx(value){
        // 去掉所有数字字符
        return value.replace(/\d/g,'')
      },
      yyy(value){
        // 去掉所有大小写字母
       return value.replace(/[a-z]/ig,'')
      },
      zzz(value){
        // 字母转大写
        return value.toUpperCase();
      }
    }


    })

  // 计算属性
    //计算属性也可以通过filter进行过滤，获取信息
        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;
          },
        },