vue学习——vue数据

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面是创建了一个vue实例，创建vue实例时，数据的定义方式是以对象的形式在实例中给出，在创建实例时，也会定义方法，同样以对象的形式。这里的实例与app绑定，所以可以在div中直接使用这个数据。
2.自定义组件
自定义组建中的data和vue实例中的data常常混淆。
自定义组件是可复用的实例，

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

自定义组件时，需要的数据也会被定义，但是data是一个函数。返回的变量数据，在组件中自己使用，data部分还可以像简写成以下形式

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

如果组件里想用的数据在父组件里，就要用props，声明
pros:[]