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