Vue API 概览

API

全局配置

Vue.config.silent = true
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}
Vue.config.devtools = true
Vue.config.errorHandler = function (err, vm, info) {}
Vue.config.warnHandler = function (msg, vm, trace) {}
Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component'
]
Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  "media-play-pause": 179,
  up: [38, 87]
}
Vue.config.performance = true
Vue.config.productionTip = false

全局 API

var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
Vue.nextTick().then(function () {})
Vue.set(target, propertyName/index, value)
Vue.delete(target, propertyName/index)
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
Vue.directive('my-directive', function () {})
Vue.filter('my-filter', function (value) {})
Vue.component('my-component', { /* ... */ })
Vue.use(plugin)
Vue.mixin(mixin)
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
const state = Vue.observable({ count: 0 })
var version = Number(Vue.version.split('.')[0])

选项 / 数据

var vm = new Vue({data: { a: 1 }})
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})
var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})
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
      }
    }
  }
})
var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})

选项 / DOM

vm.$el
template
render
renderError

选项 / 生命周期钩子

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

选项 / 资源

directives
filters
components

选项 / 组合

parent
mixins
extends
provide / inject

选项 / 其它

name
delimiters
functional
model
inheritAttrs
comments

实例属性

vm.$data
vm.$props
vm.$el
vm.$options
vm.$parent
vm.$root
vm.$children
vm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listeners

实例方法 / 数据

vm.$watch( expOrFn, callback, [options] )
vm.$set( target, propertyName/index, value )
vm.$delete( target, propertyName/index )

实例方法 / 事件

vm.$on(event, callback)
vm.$once(event, callback)
vm.$off([event, callback])
vm.$emit(eventName, […args])

实例方法 / 生命周期

vm.$mount([elementOrSelector])
vm.$forceUpdate()
vm.$nextTick([callback])
vm.$destroy()

指令

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

特殊特性

key
ref
is

内置的组件

component
transition
transition-group
keep-alive
slot

VNode 接口

端渲染