vuejs-知识点2

知识点1： 模板：使用{{}}两个大括号 这里会出现一些因为计算的表达式从而导致模板变得非常难看 这里可以使用computed属性来解决 《--------------------------》 html代码： <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> js代码： var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) 《--------------------------》 通过coputed属性就能很好的解决html上的数据混乱的情况，将其写在js里面 这里其实还可以使用method的函数方法来实现，不过使用函数与computed属性 这种方法不同的是，函数每次都会执行，但是这个属性只要message没有改变 的话就不会再执行函数，而是直接返回上次获得的结果。具有速度快的优点。 知识点2： $watch的方法和计算属性相比，在一个对象数据会因另外一个而改变的时候使 用计算属性可能更佳。 《--------------------------》 html代码： <div id="demo">{{ fullName }}</div> js代码： watch： var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) 计算属性： var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 《--------------------------》 很明显可以看出watch的方法写出来后出现了重复代码的问题，而使用计算 属性的话就不会出现这种情况 知识点3： 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： 《--------------------------》 // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... 《--------------------------》 现在在运行 vm.fullName = 'John Doe' 时， setter 会被调用，  vm.firstName 和 vm.lastName 也会被对应更新。