前端小白学习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;},},