Analisis ringkas kaedah pelaksanaan kaedah awam Vue

Vue ialah rangka kerja JavaScript popular yang boleh digunakan oleh pembangun untuk membina antara muka pengguna dengan cepat. Dalam Vue, kaedah awam adalah bahagian yang sangat penting. Artikel ini akan memperkenalkan kaedah awam Vue.

Dalam Vue, kaedah awam boleh menjadi kaedah global atau kaedah contoh. Kaedah global ialah kaedah yang dipasang pada objek Vue dan boleh dipanggil dalam mana-mana contoh Vue. Kaedah contoh ialah kaedah yang dipasang pada tika Vue dan hanya boleh dipanggil dalam tika semasa.

Cara paling mudah untuk menentukan kaedah global dalam Vue ialah menggunakan prototaip objek Vue. Objek prototaip ini boleh ditambah sebelum atau selepas pemulaan Vue, seperti ini:

// 在Vue初始化之前添加原型方法
Vue.prototype.sayHello = function() {
  console.log('Hello, Vue!');
}

// 在Vue初始化之后添加原型方法
var vm = new Vue({
  el: '#app',
  mounted: function() {
    Vue.prototype.sayHello();
  }
});

// 输出结果：Hello, Vue!

Dalam contoh ini, kami menambah kaedah bernama sayHello pada prototaip Vue, dan kemudian kami memanggilnya, output A greeting .

Selain menggunakan prototaip Vue untuk menambah kaedah global, kami juga boleh menggunakan Vue.mixin() untuk menambah satu set kaedah sebagai kaedah global. Ini boleh dilakukan dengan berkongsi set kaedah merentas berbilang komponen Vue, seperti ini:

// 定义一个名为myMixin的对象
var myMixin = {
  methods: {
    sayHello: function() {
      console.log('Hello, Vue!');
    }
  }
}

// 使用Vue.mixin()添加myMixin对象为全局方法
Vue.mixin(myMixin);

// 在Vue实例中调用sayHello方法
var vm = new Vue({
  el: '#app',
  mounted: function() {
    this.sayHello();
  }
});

// 输出结果：Hello, Vue!

Dalam contoh ini, kami mentakrifkan objek JavaScript bernama myMixin yang mengandungi objek bernama sayHello kaedah. Kami kemudian menambah objek ini sebagai kaedah global menggunakan Vue.mixin(). Akhir sekali, kami memanggil kaedah sayHello dalam contoh Vue untuk mengeluarkan ucapan.

Selain kaedah global, Vue juga menyokong kaedah contoh. Kaedah ini boleh ditambahkan pada tika Vue dan hanya boleh dipanggil dalam tika ini. Kita boleh menggunakan kaedah Vue.extend() untuk mencipta subkelas dengan kaedah tersuai dan kemudian membuat instantiat dalam contoh Vue.

Berikut ialah contoh menggunakan kaedah Vue.extend() untuk mencipta kaedah contoh:

// 定义一个名为myMixin的子类
var myMixin = Vue.extend({
  methods: {
    sayHello: function() {
      console.log('Hello, Vue!');
    }
  }
});

// 在Vue实例中实例化myMixin
var vm = new myMixin({
  el: '#app',
  mounted: function() {
    this.sayHello();
  }
});

// 输出结果：Hello, Vue!

Dalam contoh ini, kami mentakrifkan subkelas bernama myMixin, mengandungi A kaedah bernama sayHello. Kemudian, kami membuat instantiate myMixin dalam contoh Vue dan memanggil kaedah mounted dalam sayHello cangkuk kitar hayat.

Parameter kaedah awam Vue boleh berupa sebarang jenis parameter yang disokong oleh fungsi JavaScript, seperti rentetan, nombor, objek dan fungsi. Jika anda baru dalam pembangunan Vue, pastikan anda mempunyai pemahaman tertentu tentang sintaks dan parameter penulisan kaedah awam Vue Ini akan membantu anda menguasai asas rangka kerja Vue dengan lebih baik.

Atas ialah kandungan terperinci Analisis ringkas kaedah pelaksanaan kaedah awam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!