Penjelasan terperinci tentang fungsi kaedah yang biasa digunakan semasa menginstant objek Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular dalam beberapa tahun kebelakangan ini Ia menyediakan kaedah pengaturcaraan responsif yang membolehkan pembangun membina aplikasi satu halaman yang kompleks dengan lebih mudah. Dalam Vue, kami menggunakan fungsi kaedah untuk menentukan logik untuk mengendalikan interaksi pengguna. Butiran lanjut dibincangkan di bawah.

1. Apakah fungsi kaedah

Kaedah ialah kaedah ditakrifkan pada kejadian Vue. Kaedah ini tersedia pada contoh Vue dan boleh terikat dengan peristiwa dalam templat Vue. Sebagai contoh, kita boleh mentakrifkan kaedah dalam kaedah untuk mengendalikan peristiwa klik:

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
})

Ia boleh digunakan dalam templat seperti ini:

<div id="app">
  <button v-on:click="showMessage">Click me</button>
</div>

2. Beberapa cara untuk menentukan fungsi kaedah

1. Takrifan langsung

Kita boleh menggunakan literal objek untuk mentakrifkan terus fungsi kaedah:

new Vue({
  methods: {
    showMessage() {
      alert('Hello, Vue!')
    }
  }
})

2. Gunakan fungsi anak panah sintaks es6

Fungsi anak panah digunakan dengan lebih ringkas dan tidak perlu menulis kata kunci fungsi:

new Vue({
  methods: {
    showMessage: () => {
      alert('Hello, Vue!')
    }
  }
})

3. Gunakan kaedah bind untuk mengikat ini

Kaedah bind boleh mengikat fungsi Mengikat kepada nilai ini yang ditentukan. Dalam Vue, kami biasanya mengikat ini pada tika Vue supaya kami boleh mengakses data dan kaedah pada tika Vue:

new Vue({
  methods: {
    showMessage: function() {
      alert(this.message)
    }
  }
}).$mount('#app')

// 模板中的绑定事件
<button @click="showMessage.bind(this)">Show message</button>

4. Gunakan async/tunggu

Jika anda gunakan async/wait, anda juga boleh menggunakannya dalam kaedah untuk mengendalikan operasi tak segerak:

new Vue({
  methods: {
    async fetchData() {
      const response = await fetch('/api/data')
      const data = await response.json()
      console.log(data)
    }
  }
})

3 Petua untuk menggunakan fungsi kaedah

1. Pass parameter

<div id="app">
  <button v-on:click="showMessage('Hello world')">Click me</button>
</div>

// Vue实例中定义方法
new Vue({
  methods: {
    showMessage(msg) {
      alert(msg)
    }
  }
})

Akses sifat contoh Vue

new Vue({
  data() {
    return {
      message: 'Hello World!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    showMessage() {
      alert(this.message + ' ' + this.reversedMessage)
    }
  }
})

Gunakan semula fungsi kaedah

// 定义全局方法
Vue.prototype.$showMessage = function(msg) {
  alert(msg)
}

// 在Vue实例中使用
new Vue({
  methods: {
    showMessage() {
      this.$showMessage('Hello world!')
    }
  }
})

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi kaedah yang biasa digunakan semasa menginstant objek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!