初学Vue——part3

计算属性和侦听器

计算属性

内置缓存，即计算所依赖的值未发生改变则不会重新计算
而使用method方法没有computed计算属性高效，因为计算属性有缓存
基础例子：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

声明了计算属性reversedMessage。提供的函数将用作属性vm.reversedMessage的getter函数。
计算属性的setter和getter：
计算属性默认有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]
    }
  }
}

侦听器

vue通过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
    }
  }
})

class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们。

绑定HTML Class

对象语法
我们可以传给v-bind:class一个对象，以动态的切换class：

这条语法表示active这个class存在与否将取决于数据属性isActive的truthness。

数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

用在组件上
当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，你声明了组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

添加class：

<my-component class="baz boo"></my-component>

HTML将被渲染为：

<p class="foo bar baz boo">Hi</p>

绑定内联式

对象语法
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

对象语法常常结合返回对象的计算属性使用。

数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上
自动添加前缀
当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。