Introduction to global method calling and mounting methods in Vue documentation

Vue.js is a popular JavaScript framework that provides many global methods and properties that allow developers to easily operate Vue.js applications. This article will introduce the global method calling and mounting methods in the Vue.js document to help developers better use this framework.

Global method call

In Vue.js, global methods refer to methods defined on the Vue constructor function. These methods can be called from anywhere in the application without instantiating a Vue object. Global methods are divided into two types: mounted and unmounted.

Unmounted global methods

Vue.extend(options)

The Vue.extend() method allows you to define a subcomponent constructor and return this constructor function . The options object passed in is the component options, including the component's data, methods, computed, watch, life cycle function and other options.

Use the Vue.extend() method to define the component constructor:

var MyComponent = Vue.extend({
  template: '<div>这是一个组件</div>'
})

Vue.nextTick(callback)

Execute the callback function after Vue updates the DOM. The this of the callback function points to the instance object. This method returns a Promise object.

Use Vue.nextTick() method:

Vue.nextTick(function () {
  // 操作 DOM
})

Vue.set(target, key, value) and Vue.delete(target, key)

Vue.set( ) method will reactively add a property to the target object. The Vue.delete() method will reactively delete a property from the target object.

Use Vue.set() and Vue.delete() methods:

Vue.set(vm.someObject, 'b', 2)
Vue.delete(vm.someObject, 'a')

Vue.directive(id, [definition])

Define global directives.

Use Vue.directive() method:

Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
    // 操作 DOM
  }
})

Mounted global method

By calling some methods of the Vue object, you can mount the global method to Vue.prototype Or on Vue.

Vue.use(plugin)

Install the Vue.js plug-in.

Use the Vue.use() method:

// 引入插件
import myPlugin from './my-plugin'

// 安装插件
Vue.use(myPlugin)

Vue.mixin(mixin)

Define a global mixin to merge the mixed options into each Vue instance.

Use Vue.mixin() method:

Vue.mixin({
  created: function () {
    console.log('全局混入')
  }
})

Vue.component(id, [definition])

Define global components.

Use the Vue.component() method:

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})

Global method mounting

In addition to mounting the global method to Vue.prototype or Vue, you can also mount it to the instance object so that global methods can be used within the component.

Use the Vue.mixin() method to mount global methods to component instances, or use methods or computed attributes in component options to call global methods.

Vue.mixin implements global method mounting

var myGlobalMethod = function () {
  // 全局方法
}

Vue.mixin({
  created: function () {
    this.myGlobalMethod = myGlobalMethod
  }
})

Calling global methods in methods

methods: {
  doSomething() {
    this.myGlobalMethod()
  }
}

Calling global methods in computed

computed: {
  computedProperty() {
    return this.myGlobalMethod()
  }
}

Summary

Vue.js provides many global methods and properties that allow developers to easily operate applications. Global methods are divided into two types: mounted and unmounted. Mounted global methods can be used directly in components. Through the Vue.mixin() method, global methods can be mounted on the instance object, or global methods can be called using the methods and computed attributes in the component options. Using global methods can improve development efficiency, but you must pay attention to the readability and maintainability of the code to avoid abusing global methods.

The above is the detailed content of Introduction to global method calling and mounting methods in Vue documentation. For more information, please follow other related articles on the PHP Chinese website!