Vue.js-计算属性和过滤器与监听属性/Vue.js组件

1、什么是计算属性
  
在Vue. js构造函数中定义数据使用data,该对象是对数据的代理,是一个键值对, 并且实时与页面的表现是一致的,但在这个对象中只能是简单的键值对,不能拥有业务逻辑。由于 “data”中的属性属于同-一个生命周期,所以如果需要某一个属性是依赖于另外一个属性时,在‘data”属性中是做不到的。为了解决这个问题,Vue提供计算属性来实现。

  在Vue.js构造函数的参数对象中有一个“computed",该对象就是用于定义计算属性的,该对象中的 “键”也就是计算属性。与“data” 不同的是,计算属性的键值是一个拥有 返回值的函数,该函数中可以访问dat中的所有属性。

  在一个计算属性中可以完成各种复杂的逻辑,包括逻辑运算、函数调用等,只要最终返回 一个结果即可。计算属性可以依赖多个Vue实例的数据,只要其中有一 个数据变化,计算属就会重新执行,视图也会更新。

  computed:{

     prices:function(){

      var prices=0;

      for(var i=0;i<this.package1.length;i++){

        prices+=this.package1[i].price * this.package1[i].count;

       }

       return prices;

      }
    }

2、计算属性与计算方法的区别

  computed:{

    areas:function(){

      let areas=0

      areas = this.length * this.width

      return areas

      }
    },

    methods:{

      add:function(){

      this.num=parseInt(this.length)+parseInt(this.width)

      },

    }

    在computed的方法中编写的逻辑运算,在调用时直接将areas视为一个变量值使用, 无须 进行函数调用。computed具有级存功能,在系统初始运行的时候调用一次, 当计算结果发生变化时会再次被调用。例在上面代码中computed中的方法就会被调用。computed是计算属性,调用时“areas"不需要括号。

    在methods的方法中编写的逻辑运算,在调用时一-定要加括号,例如add()。methods中可 以写多个方法,并且这些方法在页面初始加载时调用一次, 以后只有使用程序代码调用时才会 被执行。例在上面代码中单击按钮后,methods中的单击事件方法才被调用一次。

    其实调用methods中的方法也能实现和计算属性一样的效果,甚至有的方法还能接收参数,使用起来更加灵活。既然使用计算方法就可以实现。

    那为什么还需要计算属性呢?这是因为计算属性是基于依赖缓存的,计算属性依赖的数据发生变化时,才会重新取值,所以依赖的text只要不改变,计算属性就不更新。计算方法则不同,只要重新渲染就会被调用,因此函数也会被执行。

    使用计算属性还是计算方法取决于是否需要缓存,如果做遍历大数组和做大量计算时,应当使用计算属性。

3、计算属性的setter

  每一个计算属性都包含一个getter和setter。

    computed:{

      fullName:{
        get:function(){
          return this.firstName+ ‘ ‘ +this.lastName
          },
        set:function(){
          var name = newValue.split(‘ ‘);
          this.firstName=names[0];
          this.lastName=names[1];
          }
        }
      }

4、过滤器的定义

  过滤器( Filters)提供了- -种执行文本转换的方法,例如所有字母都转换成大写字母或者 做任何想做的事情。过滤器与计算属性( computed)、方法( methods )不同的是,过滤器不会修改数据,只是改变在网页上的显示形式。

过滤器可以用在两个地方:插值表达式{ }}和v-bind表达式,然后由管道操作符“|”进行指示,其语法格式如下:

{{ message| 过滤器名}}

<!--在v-bind中调用过滤器-->

<div v-bind:id="rawIdI 过滤器名"></div>

   (1)、本地过滤器     

      filters:{
        changeCapitalLetter(value){
          if(value){
            let str=value.toString();
            let newArr=str.split(" ").map(ele=>{
              return ele.charAt(0).toUpperCase()+ele.slice(1)
            });
            return newArr.join(" ")
          }
        }
      }

    (2)、全局过滤器     

      Vue.filter(‘number‘,function(value){
        return value <10?‘0‘+value:value
        })
        Vue.filter(‘numberFormat‘,function(value,n){
        return value.toFixed(n)
        })
          var app=new Vue({
                el:"#app",
                data:{
                  message:‘Hello Vue!‘
               },
              })

5、监听属性

  监听属性watch用来监听指定属性的变化,watch这 个对象中都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用。属性发生改变时就会触发watch函数,每个函数都会接收两个值,分别是新值和旧日值,可以在watch中根据新旧值的判断来减少虚拟DOM的渲染。

    watch:{

      监听的属性名(新值,旧值){

      }

    }

Vue.js组件的创建

  使用Vue.extend配合Vue.component方法

    var com1 = Vue.extend{

        template:"<h3>使用Vue.extend创建组件</h3>"

      })

例如:

    var com1=Vue.extend({

        template:"<h3>使用vue.extend创建组件</h3>"

    })

    Vue.component(‘mycom‘,com1)

    var vm = new Vue({

          el:"#app",

          data:{

          },
        });

 

Vue.js-计算属性和过滤器与监听属性/Vue.js组件

上一篇:zabbix脚本获取web status code,异常告警


下一篇:十进制数转化成二进制后包含一的数量(c++)