后端程序员的前端必备【Vue】 - 04 Vue监听属性、计算属性、过滤器（全局过滤器和局部过滤器）

1 监听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：监听属性

• watch
• 在vm对象中使用其他属性、方法的时候要加this

<div id="app">

    属性1：<input type="text" v-model="msg1">
    属性2：<input type="text" v-model="msg2">
    属性3：{{msg3}}

</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{          
            msg1:'',
            msg2:'',
            msg3:''
        },
        methods:{           
        },
        watch:{  
            //只要msg1的属性发生变化一定会进入方法
            //侦听msg1属性变化
            msg1:function(){
                this.msg3 = this.msg1 + this.msg2;
            },
            //侦听msg2属性变化
            msg2:function(){
                this.msg3 = this.msg1 + this.msg2;
            }
        }
    })
</script>

2 计算属性

计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；

computed定义计算属性

<div id="app">
    属性1：<input type="text" v-model="msg1">
    属性2：<input type="text" v-model="msg2">
    属性3：{{msg3}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{            
            msg1:'',
            msg2:''
        },
        methods:{           
        },
        computed:{           
            msg3:function(){
                return this.msg1 + this.msg2;
            }
        }
    })
</script>

3 计算属性 vs 方法

<div id="app">
    使用方法获取系统当前时间：{{curTime1()}}
    使用计算属性获取系统当前时间：{{curTime2}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            curTime1:function(){
                return new Date().getTime();
            }
        },
        computed:{
            curTime2:function(){
                return new Date().getTime();
            }
        }
    })
</script>

通过多次调用curTime1函数和curTime2，发现curTime1每次获取到的数据都不一致，而curTime2是一致的。

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

注意：methods 和 computed 里不能重名

4 计算属性VS侦听属性

侦听属性中的代码是命令式且重复的，很显然使用计算属性效果更好

5 练习

需求1：属性1表示商品价格，属性2表示数量，属性3表示总价，通过属性1和属性2计算得到

定义+和-按钮，动态的计算商品总价格

6 过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

6.1 全局过滤器

使用过滤器将显示的价格前面加上￥

<div id ="app">
    <!-- 2、使用过滤器    | 管道符。表示使用的过滤器名称 -->
    {{price | toRMB}}
</div>
<script>
    // 1、定义全局过滤器。   参数1：过滤器名称  参数2：过滤器回调函数  
    Vue.filter('toRMB', function(value){
        return '￥' + value;
    })
    new Vue({
        el: '#app',
        data:{
            price: 345.45         
        },
        methods: {}
    });
</script>

6.2 局部过滤器

使用过滤器将超出指定字符串的长度的内容使用指定的符号表示

<div id ="app">
    <!-- 2、使用过滤器    | 管道符。表示使用的过滤器名称 -->
    {{content | showContent(20,"...")}}
</div>
<script>

    new Vue({
        el: '#app',
        data:{
            content: "Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。"         
        },
        methods: {},
        //定义局部过滤器
        filters:{
            showContent(content,len,suffix){
                return content.substring(0,len) + suffix;
            }     
        }
    });
</script>

当全局过滤器和局部过滤器重名时，会采用局部过滤器