Vue.js Tonton Properti

Vue.js adalah kerangka kerja Javascript yang sangat kuat dan reaktif, yang digunakan untuk membangun Uis (Antarmuka Pengguna) dan SPA (Aplikasi Satu Halaman). Itu dibangun dengan menggabungkan fitur-fitur terbaik dari Angular dan React Frameworks yang sudah ada. Pengembang juga suka membuat kode atau membangun aplikasi di dalamnya.

Vue.js menyediakan properti arloji untuk mengamati dan bereaksi terhadap variabel atau perubahan data. Kita dapat menggunakan properti watch untuk memanipulasi DOM ketika variabel yang diawasi diubah gets. Pada artikel ini, kita akan melihat bagaimana kita dapat menggunakan properti watch, dan melakukan tugas yang diinginkan pada perubahan variabel. Jadi, mari kita mulai.

Pengamat

SEBUAH pengintai di Vue.js bertindak seperti pendengar acara untuk variabel atau properti. Ini digunakan untuk menyelesaikan beberapa tugas pada perubahan beberapa properti tertentu. Ini sangat berguna saat melakukan tugas asinkron.

Mari kita tunjukkan dan pahami konsep pengamat dengan mempertimbangkan sebuah contoh.

Contoh:

Misalkan kita sedang membangun situs web e-niaga, di mana kita memiliki daftar item, dan kita sedang membangun komponen keranjang atau checkout. Dalam komponen itu, kita perlu menghitung jumlah elemen tunggal mengenai jumlah item.

Pertama, kami mengasumsikan beberapa properti dalam data.

data()
kembali
Nama barang: "Barang 1",
jumlah barang: null,
harga barang: 200,
totalHarga: 0

,

Di mana kita akan melihat properti "itemQuantity" dan menghitung total harga. Kami pertama-tama akan melakukan pengikatan data di template,

sebelum menulis kode untuk melihat variabel dan menghitung total harga.

Setelah menulis kode ini, kita akan memiliki halaman web kita seperti ini:

Sekarang, kami ingin mengubah harga total pada perubahan "itemQuantity" seperti setiap kali pengguna mengubah kuantitas menggunakan kolom input. Harga Total harus diubah. Untuk tujuan itu, kita harus melihat "itemQuantity" dan menghitung total harga setiap kali properti "itemQuantity" diubah.

Jadi, pengamat untuk "itemQuantity" akan seperti ini:

menonton:
jumlah barang()
ini.totalHarga = ini.barangJumlah * ini.harga barang;
menghibur.log (ini.jumlah barang);

Sekarang, setiap kali pengguna mengubah "itemQuantity", total harga akan berubah dalam sekejap. Kami tidak perlu khawatir tentang apa pun lagi. Properti arloji akan menangani perhitungan ini sekarang.

Mari kita lihat halaman webnya:

Dan, mari kita coba menambah atau mengubah kuantitas dan melihat beberapa hasilnya:

Jika kita mengubah kuantitas, katakanlah “4”, total harga akan menjadi “800”:

Demikian pula, jika kita mengubah kuantitas menjadi "7", harga totalnya menjadi "1400":

Jadi, beginilah cara kerja properti jam tangan dan membantu dalam pengembangan reaktif. Reaktivitas adalah semacam tanda tangan Vue.js. Selain itu, properti arloji berguna saat melakukan operasi asinkron.

Kesimpulan

Dalam artikel ini, kita telah mempelajari apa itu properti jam tangan dan bagaimana kita dapat menggunakannya di Vue.js. Kami juga telah mencoba contoh kehidupan nyata untuk memahami implementasinya yang sebenarnya. Ini sangat membantu dalam menghemat waktu dan mempercepat proses pengembangan. Kami harap Anda menemukan artikel ini bermanfaat dan terus mengunjungi linuxhint.com untuk pemahaman yang lebih baik.