Vue 문서의 전역 메서드 호출 및 마운트 방법 소개

Vue.js는 개발자가 Vue.js 애플리케이션을 쉽게 작동할 수 있도록 다양한 전역 메서드와 속성을 제공하는 인기 있는 JavaScript 프레임워크입니다. 이 기사에서는 개발자가 이 프레임워크를 더 잘 사용할 수 있도록 Vue.js 문서의 전역 메서드 호출 및 마운트 메서드를 소개합니다.

전역 메서드 호출

Vue.js에서 전역 메서드는 Vue 생성자 함수에 정의된 메서드를 참조합니다. 이러한 메소드는 Vue 객체를 인스턴스화하지 않고도 애플리케이션 어디에서나 호출할 수 있습니다. 전역 메소드는 마운트된 방식과 마운트 해제된 방식의 두 가지 유형으로 나뉩니다.

마운트되지 않은 전역 메서드

Vue.extend(options)

Vue.extend() 메서드를 사용하면 하위 구성 요소 생성자를 정의하고 이 생성자 함수를 반환할 수 있습니다. 전달된 옵션 개체는 구성 요소의 데이터, 메서드, 계산, 감시, 수명 주기 기능 및 기타 옵션을 포함한 구성 요소 옵션입니다.

Vue.extend() 메서드를 사용하여 구성 요소 생성자를 정의합니다.

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

Vue.nextTick(callback)

Vue가 DOM을 업데이트한 후 콜백 함수를 실행합니다. 콜백 함수의 this는 인스턴스 객체를 가리킵니다. 이 메소드는 Promise 객체를 반환합니다.

Vue.nextTick() 메소드 사용:

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

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

Vue.set() 메소드는 응답적으로 대상 객체 중간에 속성을 추가합니다. . Vue.delete() 메소드는 대상 객체에서 속성을 반응적으로 삭제합니다.

Vue.set() 및 Vue.delete() 메서드 사용:

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

Vue.directive(id, [definition])

전역 지시문을 정의합니다.

Vue.directive() 메소드 사용:

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

마운트된 전역 메소드

Vue 객체의 일부 메소드를 호출하여 Vue.prototype 또는 Vue에 전역 메소드를 마운트할 수 있습니다.

Vue.use(플러그인)

Vue.js 플러그인을 설치하세요.

Vue.use() 메서드 사용:

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

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

Vue.mixin(mixin)

mixin의 옵션을 각 Vue 인스턴스에 병합하는 전역 mixin을 정의합니다.

Vue.mixin() 메서드 사용:

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

Vue.comComponent(id, [definition])

전역 구성 요소를 정의합니다.

Vue.comComponent() 메소드 사용:

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

전역 메소드 마운트

Vue.prototype 또는 Vue에 전역 메소드를 마운트하는 것 외에도 인스턴스 객체에 마운트할 수도 있으므로 전역 메소드를 사용할 수 있습니다. 컴포넌트 메소드 내의 메소드.

Vue.mixin() 메서드를 사용하여 전역 메서드를 구성 요소 인스턴스에 마운트하거나 구성 요소 옵션의 메서드 또는 계산된 속성을 사용하여 전역 메서드를 호출합니다.

Vue.mixin은

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

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

computed

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

Summary

Vue.js에서 전역 메소드 마운팅

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

메서드를 구현하고 전역 메소드를 호출합니다. Vue.js는 개발자가 앱을 편리하게 운영할 수 있는 다양한 전역 메소드와 속성을 제공합니다. 전역 방법은 마운트된 전역 방법과 마운트되지 않은 방법의 두 가지 유형으로 구분됩니다. 마운트된 전역 방법은 구성 요소에서 직접 사용할 수 있습니다. Vue.mixin() 메소드를 통해 전역 메소드를 인스턴스 객체에 마운트하거나, 컴포넌트 옵션의 메소드 및 계산 속성을 사용하여 전역 메소드를 호출할 수 있습니다. 전역 방법을 사용하면 개발 효율성이 향상될 수 있지만, 전역 방법 남용을 방지하려면 코드의 가독성과 유지 관리성에 주의를 기울여야 합니다.

위 내용은 Vue 문서의 전역 메서드 호출 및 마운트 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!