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 也会被对应更新。