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:只调用一次,指令与元素解绑时调用。
    钩子函数的参数 有( elbindingvnodeoldVnode)。
    组件内局部添加:
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 {

    }
  }    
}
//使用
<template>
  <div id="app">
    {{msg | formatString}}
    {{student.name | formatString}}
    <ChildComponent v-bind:message="msg | formatString"></ChildComponent>
  </div>
</template>

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 返回的对象,而不是传入源对象。


推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 6,503评论 0 25
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,609评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 1,578评论 0 6
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,501评论 1 4
  • 很多人都听说过腰椎滑脱这个名词,但是很多人容易和间盘突出混淆。虽然二者都有腰疼的症状,但是形成原因却完全不同。 腰...
    82年的板蓝根阅读 387评论 0 0
  • 收拾旧日的生活痕迹,那些旧时候的旧心情在翻开一片片清晰鲜活的文字的时候,在眼前一字排开。那些挣扎与忍耐,那些愁苦与...
    鱼晓月阅读 116评论 0 4
  • 这是暑假第一次外出,虽然不是那么有趣,胜在有河中帮相伴。我们大人还是聊得很开心的,小朋友基本有手机做伴,也...
    洪霞_27cd阅读 191评论 0 2
  • 由于我的才疏学浅,近来无东西可写就写写日记吧,好久没写日记了,还有点迷恋呢。 早晨是伴随着夜班同事的吵闹声...
    行者五六一阅读 48评论 0 0