vue全局API和使用方法

Vue.use(plugins) 注册一个插件

例子：

import Vue from 'vue'
import Router from 'vue-router'

// 不要忘了调用此方法
Vue.use(VueRouter)

Vue.directive()创建或者获取自定义指令

// 注册(指令函数)
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数有( el、binding、vnode 和 oldVnode)。
组件内局部添加：

export default {
  name: 'FilterDemo',
  /* 局部指令 */
  directives:{
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  data () {
    return {

    }
  }    
}

Vue.filter() 注册或者获取全局的过滤器

用在v-bind或者{{}}插入值之后，用 |隔开
参数：
{string} id
{Function} [definition]
定义过滤器有两种方式，
(1) 全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。
(2)组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。
例子：

//全局过滤器
import Vue from 'vue';
Vue.filter('formatString', function (value) {
  var msg = value.length > 10 ? value.slice(0,3): value;
  return msg;
});

//局部过滤器
export default {
  name: 'FilterDemo',
  /* 局部过滤器 */
  filters:{
    formatString: function(value){
      var msg = value.length > 10 ? value.slice(0,3): value;
      return msg;
    }
  },
  data () {
    return {

    }
  }    
}

//使用

Vue.nextTick([callback,context]) 在DOM更新之后调用回调函数

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
参数：
{Function} [callback]
{Object} [context]
例子：

//全局
Vue.nextTick(function () {
  // DOM 更新了
})；

//组件内部
export default {
  name: 'App',
  data(){
    return {
      msg: "启动测试页面啦啦啦",
      student: {
        name: 1,
        age: 2,
      }
    } 
  },
  mounted(){
    this.msg="已经更新完毕";
    //也可以在methods方法里面添加
    this.$nextTick(function(){
      console.log("nextTick操作")
    })
  }

Vue.set(target, propertyName/index, value) 或者 this.$set(target, propertyName/index, value)

向响应式数据添加一个属性，并且保证该属性也是响应式的，且能够触发视图的更新。

export default {
  name: 'App',
  data(){
    return {
      msg: "启动测试页面啦啦啦",
      student: {
        name: 1,
        age: 2,
      }
    } 
  },
  mounted(){
    this.$set(this.student, "sex","女");
  }
}

Vue.delete( target, propertyName/index )

删除一个对象的属性，如果属性是响应式的，确保删除属性并且更新视图

Vue.mixin()

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

Vue.compile(template)

参数： template {string}
在 render 函数中编译模板字符串。只在独立构建时有效

Vue.observable( object )

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 改变，所以如这里展示的，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行修改仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。