Vue secara langsung melaksanakan kaedah

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web. Ia menyediakan pelbagai alat dan ciri yang membolehkan pembangun mencipta antara muka pengguna berkualiti tinggi dan aplikasi interaktif dengan mudah. Dalam aplikasi Vue, terdapat pelbagai cara untuk melaksanakan kaedah. Artikel ini menerangkan cara melaksanakan kaedah secara langsung dalam aplikasi Vue dan menyediakan beberapa petua praktikal dan contoh kod.

Mengapa anda perlu melaksanakan kaedah secara terus?

Pelaksanaan kaedah terus ialah teknik yang sangat biasa dalam aplikasi Vue. Ia membolehkan pembangun memanggil kaedah yang telah dibuat dengan mudah tanpa perlu memulakan pendengar acara pada templat. Kaedah pelaksanaan langsung biasanya digunakan untuk mengendalikan acara pada satu elemen, atau untuk beroperasi dalam komponen. Dengan melaksanakan kaedah secara langsung, anda boleh meningkatkan kelajuan dan prestasi aplikasi anda sambil memudahkan logik kod anda.

Cara melaksanakan kaedah terus

Vue menyediakan beberapa kaedah untuk melaksanakan kaedah secara langsung. Artikel ini akan menumpukan pada tiga daripadanya: kaedah memanggil secara langsung, menggunakan arahan dan menggunakan sifat yang dikira.

Kaedah panggilan terus

Dalam aplikasi Vue, kami boleh memanggil kaedah secara terus. Kami boleh menggunakan pilihan kaedah dalam mana-mana contoh Vue untuk menambah satu atau lebih kaedah. Apabila memanggil kaedah ini, hanya gunakan nama kaedah. Contohnya:

<template>
  <div>
    <button v-on:click="increment">Add 1</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data: {
    count: 0
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

Dalam kod di atas, kami mempunyai kaedah yang dipanggil kenaikan, yang tujuannya adalah untuk meningkatkan nilai pembilang semasa sebanyak 1. Apabila pengguna mengklik butang Tambah 1, Vue melaksanakan kaedah kenaikan untuk meningkatkan nilai pembilang sebanyak 1.

Menggunakan Arahan

Arahan Vue ialah ciri hebat yang membolehkan kami menentukan secara langsung cara elemen tertentu berinteraksi. Terdapat banyak arahan yang tersedia, salah satunya ialah: v-on. Arahan ini membolehkan kami mengikat pendengar acara supaya kami boleh memanggil kaedah apabila peristiwa berlaku. Ini sangat serupa dengan memanggil kaedah secara langsung, tetapi dengan lebih fleksibiliti.

<template>
  <div>
    <button v-on:click="increment">Add 1</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data: {
    count: 0
  },
  methods: {
    increment () {
      this.count++
    }
  }
}
</script>

Dalam kod di atas, kami mempunyai kaedah yang dipanggil kenaikan, yang tujuannya adalah untuk meningkatkan nilai pembilang semasa sebanyak 1. Tetapi apabila kami menggunakan arahan v-on:click, Vue secara automatik akan menambah pendengar acara pada elemen dan melaksanakan kaedah kenaikan apabila elemen diklik.

Sifat Berkomputer

Sifat berkomputer ialah satu lagi pilihan hebat dalam Vue yang membolehkan kami mengira sifat pasif berdasarkan nilai keadaan aplikasi atau prop. Sifat yang dikira juga boleh direka bentuk sebagai penetap, yang boleh menerima nilai baharu dan mengubah suai keadaan. Dalam aplikasi Vue, sifat yang dikira sering digunakan untuk transformasi data. Kita boleh menukar nilai daripada satu sumber data asal kepada nilai lain yang lebih sesuai untuk aplikasi.

<template>
  <div>
    <input v-model="message">
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'MessageReverser',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Dalam contoh di atas, kami mempunyai sifat pengiraan yang dipanggil reversedMessage yang mengembalikan rentetan mesej terbalik. Setiap kali kami mengemas kini mesej, Vue akan mengira semula reversedMessage secara automatik, jadi kami tidak perlu memanggil kaedah membalikkan rentetan secara manual.

Kesimpulan

Melaksanakan kaedah secara langsung dalam Vue ialah teknologi yang sangat mudah, yang membolehkan kami memanipulasi keadaan aplikasi dan mengendalikan pelbagai acara dengan mudah. Artikel ini menerangkan cara untuk melaksanakan kaedah secara langsung dalam aplikasi Vue dan cara menggunakan arahan dan sifat yang dikira untuk menyelesaikan tugas ini. Mana-mana kaedah yang anda pilih, kami doakan anda berjaya dalam tugas pengaturcaraan anda dalam aplikasi Vue!

Atas ialah kandungan terperinci Vue secara langsung melaksanakan kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!