Pengenalan kepada kaedah panggilan dan kaedah pemasangan kaedah global dalam dokumentasi Vue

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak kaedah dan sifat global yang membolehkan pembangun mengendalikan aplikasi Vue.js dengan mudah. Artikel ini akan memperkenalkan kaedah panggilan dan kaedah pemasangan global dalam dokumen Vue.js untuk membantu pembangun menggunakan rangka kerja ini dengan lebih baik.

Panggilan kaedah global

Dalam Vue.js, kaedah global merujuk kepada kaedah yang ditakrifkan pada fungsi pembina Vue. Kaedah ini boleh dipanggil dari mana-mana sahaja dalam aplikasi tanpa membuat seketika objek Vue. Kaedah global dibahagikan kepada dua jenis: dipasang dan tidak dipasang.

Kaedah global yang tidak dilekapkan

Vue.extend(options)

Kaedah Vue.extend() membenarkan mentakrifkan pembina subkomponen dan mengembalikan fungsi pembina ini. Objek pilihan yang diluluskan ialah pilihan komponen, termasuk data komponen, kaedah, pengiraan, jam tangan, fungsi kitaran hayat dan pilihan lain.

Gunakan kaedah Vue.extend() untuk mentakrifkan pembina komponen:

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

Vue.nextTick(panggilan balik)

Laksanakan fungsi panggil balik selepas Vue mengemas kini DOM. Fungsi panggil balik ini menunjuk ke objek contoh. Kaedah ini mengembalikan objek Promise.

Gunakan kaedah Vue.nextTick():

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

Vue.set(sasaran, kunci, nilai) dan Vue.delete(sasaran, kunci)

Vue.set ( ) kaedah akan secara reaktif menambah harta kepada objek sasaran. Kaedah Vue.delete() akan memadamkan sifat secara reaktif daripada objek sasaran.

Gunakan kaedah Vue.set() dan Vue.delete():

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

Vue.directive(id, [definisi])

Tentukan arahan global.

Gunakan kaedah Vue.directive():

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

Kaedah global terpasang

Kaedah global boleh dipasang pada Vue.prototype dengan memanggil beberapa kaedah objek Vue Atau pada Vue.

Vue.use(plugin)

Pasang pemalam Vue.js.

Gunakan kaedah Vue.use():

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

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

Vue.mixin(mixin)

Tentukan mixin global yang menggabungkan pilihan mixin ke dalam setiap tika Vue.

Gunakan kaedah Vue.mixin():

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

Vue.component(id, [definisi])

Tentukan komponen global.

Gunakan kaedah Vue.component():

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

Pemasangan kaedah global

Selain memasang kaedah global pada Vue.prototype atau Vue, anda juga boleh melekapkannya pada objek instance supaya kaedah global boleh digunakan dalam komponen.

Gunakan kaedah Vue.mixin() untuk memasang kaedah global kepada tika komponen, atau gunakan kaedah atau atribut yang dikira dalam pilihan komponen untuk memanggil kaedah global.

Vue.mixin melaksanakan pemasangan kaedah global

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

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

memanggil kaedah global dalam kaedah

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

panggilan pengiraan kaedah global

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

Ringkasan

Vue.js menyediakan banyak kaedah dan sifat global yang membolehkan pembangun mengendalikan aplikasi dengan mudah. Kaedah global dibahagikan kepada dua jenis: kaedah dipasang dan tidak dipasang boleh digunakan secara langsung dalam komponen. Melalui kaedah Vue.mixin(), kaedah global boleh dipasang pada objek contoh, atau kaedah global boleh dipanggil menggunakan kaedah dan atribut yang dikira dalam pilihan komponen. Menggunakan kaedah global boleh meningkatkan kecekapan pembangunan, tetapi anda mesti memberi perhatian kepada kebolehbacaan dan kebolehselenggaraan kod untuk mengelakkan penyalahgunaan kaedah global.

Atas ialah kandungan terperinci Pengenalan kepada kaedah panggilan dan kaedah pemasangan kaedah global dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!