Vue2学习（2）

按键修饰符

还能够自定义按键修饰符别名，经过全局 config.keyCodes 对象设置：

// 能够使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

data 必须是一个函数

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 严格来看 data 是一个函数，
  // 所以 Vue 不会警告，可是咱们为每一个组件实例
  // 返回同一个对象的引用
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

因为三个组件实例共享的是同一个对象，所以增长一个计数器，就会增长所有！嗯。让咱们经过改成返回一个全新的数据对象，来解决下这个问题：

data: function () {
  return {
    counter: 0
  }
}

在 Vue 中，父子组件之间的关系能够概述为：props 向下，events 向上。父组件经过 props 向下传递数据给子组件，子组件经过 events 发送消息给父组件。