Vue 基础知识点

data

Vue 实例的数据对象，组件的定义只接受 function

new Vue({
   data: function () {
     return {
       count: 0
     }
   }
})

props

props 可以是数组或对象，用于接收来自父组件的数据

new Vue({
  props: {
    stringProp: String,
    numberProp: Number,
    booleanProp: Boolean
    ...// or any other constructor
})

computed

计算属性将被混入到 Vue 实例中

new Vue({
  data: { a: 1 },
  computed: {
    read: function () { // 仅读取
      return this.a * 2
    },
    all: {
      get: function () { // 读取
        return this.a + 1
      },
      set: function (v) { // 设置
        this.a = v - 1
      }
    }
  }
})

methods

methods 将被混入到 Vue 实例中

new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})

watch

一个对象，键是需要观察的表达式，值是对应回调函数

new Vue({
  data: { a: 1 },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
})