vue数据

data

类型：Object | Function
限制：组件的定义只接受 function。
示例：

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

props

类型：Array | Object

示例：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
   
      }
    }
  }
})

computed

类型：{ [key: string]: Function | { get: Function, set: Function } }

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

methods

类型：{ [key: string]: Function }
详细：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

示例：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

生命周期钩子

beforeCreate
create
beforeMount
mounted
beforeUpdate
updated
activated

示例：










  {{msg}}

实例方法/数据

$watch

用法：

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

示例：










    {{a}}{{b}}

$set

参数：
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值：设置的值。
用法：

这是全局 Vue.set 的别名。

$delete

参数：
- {Object | Array} target
- {string | number} propertyName/index
用法：

这是全局 Vue.delete 的别名。

指令

v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-text
v-html
v-show

组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

img

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

props定义一个属性，可以通过该属性向子组件传值
this.$emit()自定义事件，第一个参数为事件的名称，可以通过第二个参数向父组件传递数据

局部注册

//先定义一个普通的对象
var ComponentA = { /* ... */ }


//然后在components选项中定义你想要使用的组件：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

vue.js整理