Vue学习笔记

Vue学习笔记（一）

---

计算属性(computed)

将页面中一些简单的计算逻辑放在计算属性中处理，计算属性可以简单的理解为复合属性，可以拆分的，由其他基础数据通过简单运算可得到的。

一个简单的例子

<!--html-->                                                                                         <div id="name">    <div>        <span style="color: #b73f3f;">firstName:</span>        <input type="text" v-model="firstName" />    </div>    <div>        <span style="color: #b73f3f;">lastName:</span>        <input type="text" v-model="lastName" />    </div>    <div>{{fullName}}</div></div>

//js                                                                                            var vm = new Vue({    el: '#name',    data: {        firstName: 'aa',        lastName: 'bb'    },    computed: {        fullName: function(){            return this.firstName + ' ' + this.lastName         }    }})

计算属性与方法

上述例子中fullName可以通过方法实现。

<div id="name">    <div>        <span style="color: #b73f3f;">firstName:</span>        <input type="text" v-model="firstName" />    </div>    <div>        <span style="color: #b73f3f;">lastName:</span>        <input type="text" v-model="lastName" />    </div>    <!--方法调用-->    <div>{{getFullName()}}</div> </div>

var vm = new Vue({    el: '#name',    data: {        firstName: '张',        lastName: '三'    },    methods: {        getFullName: function(){            return this.firstName + this.lastName        }    }})

上述两种实现方式的区别
  计算属性会根据其依赖进行缓存，当它依赖的数据未发生变化时，计算属性会迅速返回以前的计算结果。而方法则不会进行缓存，每一次方法的触发都会执行一次逻辑。