Cara menggantikan jQuery dengan vue

mengucapkan selamat tinggal kepada jQuery dan memeluk vue.js: Membina aplikasi web yang lebih mudah dan lebih cekap

Ingin belajar vue.js dari awal? Sertai SitePoint Premium Sekarang untuk mendapatkan koleksi lengkap buku Vue.js yang meliputi asas Vue.js, amalan projek, tip dan banyak lagi untuk hanya $ 14.99 sebulan! Ramai pemaju masih bergantung pada jQuery ketika membina aplikasi mudah. Walaupun kadang -kadang anda hanya perlu menambah sedikit interaktiviti ke halaman anda, menggunakan kerangka JavaScript nampaknya terlalu rumit - jumlah kod tambahan, kod boilerplate, membina alat dan pembungkus modul, dan banyak lagi. Memperkenalkan jQuery dari CDN kelihatan seperti angin untuk dipilih.

Artikel ini bertujuan untuk meyakinkan anda bahawa walaupun untuk projek yang agak mudah, menggunakan Vue.js (selepas ini dirujuk sebagai Vue) tidak memerlukan sebarang usaha, tetapi akan membantu anda menulis kod yang lebih baik. Kami akan mengambil contoh mudah sebagai contoh untuk mengekod menggunakan jQuery dan Vue masing -masing, dan secara beransur -ansur menunjukkan perbezaannya.

mata utama

Gantikan jQuery dengan vue.js untuk projek asas tidak sukar, dan ia boleh menulis lebih baik, kod lebih cepat.

vue.js membolehkan UI dipisahkan dengan jelas dari logik/data yang mendorongnya, menjadikan kod lebih mudah difahami dan diuji.
UI dalam vue.js adalah deklaratif, yang bermaksud pemaju hanya perlu memberi tumpuan kepada apa yang mereka mahu lihat, tanpa memberi perhatian kepada cara mengendalikan DOM untuk melaksanakannya.
vue.js dan jQuery adalah serupa dengan saiz, tetapi vue.js menyediakan pengalaman pembangunan yang lebih mudah dan kod yang boleh dibaca lebih mudah.
vue.js boleh membuat komponen UI yang boleh diguna semula modular yang boleh digabungkan ke dalam aplikasi front-end kompleks.
• apa yang akan kita bina

Artikel ini akan membina invois dalam talian yang mudah menggunakan template sumber terbuka yang disediakan oleh SparkSuite. Mudah-mudahan ini lebih inovatif daripada senarai tugasan yang lain dan cukup kompleks untuk menunjukkan kelebihan menggunakan Vue sambil mudah difahami.

Kami akan menjadikannya interaktif dengan menyediakan item, harga unit, dan input kuantiti dan secara automatik mengira semula lajur "Harga" apabila salah satu nilai berubah. Kami juga akan menambah butang untuk memasukkan baris kosong baru ke dalam invois, serta medan "Jumlah" yang akan dikemas kini secara automatik semasa kami mengedit data.

saya telah mengubahsuai templat supaya HTML untuk satu baris (kosong) kelihatan seperti ini:

pelaksanaan jQuery

Pertama, mari kita lihat bagaimana untuk melaksanakan fungsi ini menggunakan jQuery.

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

Kami melampirkan pendengar ke meja itu sendiri, dan apabila perubahan nilai "kos unit" atau "kuantiti", fungsi yang dikira akan dilaksanakan:

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Fungsi ini melihat semua baris item dalam jadual dan gelung melalui mereka, melewati setiap baris ke fungsi CalculateSubtotal, dan kemudian menambah hasilnya. Kemudian, masukkan jumlah ini ke lokasi invois yang berkaitan.

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

Dalam kod di atas, kami mendapat rujukan kepada semua elemen input dalam baris dan membiak yang kedua dan ketiga untuk mendapatkan subtotal. Kemudian, masukkan nilai ini ke dalam sel terakhir dalam baris.

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Kami juga mempunyai fungsi penolong untuk memastikan bahawa kedua -dua subtotal dan total diformat menjadi dua perpuluhan dan prefixed dengan simbol mata wang.

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

Akhirnya, kami mempunyai pengendali klik untuk butang "Tambah Baris". Apa yang kita lakukan di sini ialah pilih baris projek terakhir dan buat salinan. Input ke baris klon ditetapkan ke nilai lalai dan masukkannya sebagai baris terakhir yang baru. Kami juga boleh memudahkan pengguna dan menetapkan fokus kepada input pertama supaya mereka boleh mula menaip.

Berikut adalah demonstrasi jQuery yang lengkap: pautan codepen

Kekurangan jQuery

Jadi, apa yang salah dengan kod ini? Atau, di mana kita boleh memperbaikinya?

Anda mungkin pernah mendengar beberapa perpustakaan yang lebih baru seperti Vue dan React yang mendakwa sebagai deklaratif dan bukannya penting. Sudah tentu, melihat kod jQuery ini, kebanyakan kod adalah senarai arahan mengenai cara mengendalikan DOM. Tujuan setiap bahagian Kod- "apa" - sering sukar untuk dibezakan melalui butiran "bagaimana untuk melakukannya". Sudah tentu, kita dapat menjelaskan niat kod dengan memecahkannya ke dalam fungsi yang dinamakan dengan baik, tetapi kod ini masih memerlukan sedikit usaha untuk memahami semula selepas beberapa ketika.

Satu lagi masalah dengan kod jenis ini ialah kita menyimpan keadaan permohonan di DOM itu sendiri. Maklumat mengenai projek pesanan hanya wujud sebagai sebahagian daripada HTML yang membentuk UI. Ini tidak kelihatan seperti masalah besar apabila kita memaparkan maklumat di hanya satu lokasi, tetapi apabila kita mula perlu memaparkan data yang sama di pelbagai lokasi dalam aplikasi, pastikan setiap bahagian tetap disegerakkan menjadi semakin kompleks. Tiada sumber fakta.

Walaupun tiada apa yang dapat menghalang kita daripada tidak menyelamatkan keadaan di luar DOM dan mengelakkan masalah ini, perpustakaan seperti Vue menyediakan fungsi dan struktur yang memudahkan penciptaan seni bina yang baik dan menulis lebih bersih, kod modular.

Tukar ke Vue

Jadi, bagaimana kita menggunakan Vue untuk menghasilkan semula ciri ini?

Seperti yang saya sebutkan tadi, Vue tidak memerlukan kita menggunakan pembungkus modul, penterjemah, atau pilih satu komponen fail (.vue fail) untuk bermula. Seperti jQuery, kita hanya boleh memasukkan perpustakaan dari CDN. Mari mulakan dengan menggantikan tag skrip:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

Seterusnya, kita perlu membuat contoh Vue baru:

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

di sini kita hanya perlu menyediakan pilihan EL, yang merupakan pemilih (sama seperti kita lakukan dengan jQuery) untuk mengenal pasti bahagian mana yang kita mahu Vue dikendalikan.

kita boleh mempunyai Vue menjaga apa -apa yang bermula dari keseluruhan halaman (contohnya, untuk satu aplikasi halaman) atau satu

. Untuk contoh invois kami, kami akan membiarkan VUE mengawal jadual HTML.

data

mari juga tambahkan data yang relevan dari tiga baris contoh kepada contoh Vue kami:

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

atribut data adalah di mana kami menyimpan keadaan aplikasi. Ini termasuk bukan sahaja sebarang data yang kami mahu aplikasi digunakan, tetapi juga maklumat mengenai status UI (mis., Bahagian aktif kumpulan tab, atau sama ada akordion diperluaskan atau runtuh).

Vue menggalakkan kita untuk memisahkan keadaan permohonan dari perwakilannya (iaitu, DOM) dan menumpukan perhatian di satu tempat-satu sumber fakta.

Ubah suai template

Sekarang mari kita tetapkan templat kami untuk memaparkan item dari objek data kami. Oleh kerana kami telah memberitahu Vue bahawa kami mahu ia mengawal jadual, kami boleh menggunakan sintaks templatnya di HTML untuk memberitahu Vue bagaimana untuk menjadikan dan memanipulasinya.

Menggunakan harta V-untuk, kita boleh membuat sekeping HTML untuk setiap item dalam array item:

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Vue akan mengulangi tag ini untuk setiap elemen yang kita lalui ke array (atau objek) yang dibina oleh V -untuk, yang membolehkan kita merujuk setiap elemen dalam gelung - dalam item kes ini. Oleh kerana Vue mengamati semua sifat objek data, ia akan secara dinamik akan membuat semula markup sebagai perubahan kandungan item. Kami hanya perlu menambah atau memadam item ke status aplikasi dan VUE akan bertanggungjawab untuk mengemas kini UI.

kita juga perlu menambah kotak input supaya pengguna dapat mengisi keterangan item, harga unit dan kuantiti:

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

Di sini, kami menggunakan harta V-Model untuk menetapkan pengikatan dua hala antara input dan sifat pada model projek. Ini bermakna apa -apa perubahan kepada input akan mengemas kini sifat yang sepadan pada model projek dan sebaliknya.

Di sel terakhir, kami menggunakan pendakap berganda {{}} untuk mengeluarkan beberapa teks. Kami boleh menggunakan mana -mana ungkapan JavaScript yang sah di dalam pendakap, jadi kami membiak dua sifat projek dan mengeluarkan hasilnya. Begitu juga, kerana VUE memerhatikan model data kami, perubahan kepada sama ada harta akan menyebabkan ungkapan itu dikira semula secara automatik.

peristiwa dan kaedah

Sekarang kami telah menyediakan templat untuk menjadikan koleksi item kami, tetapi bagaimana kami menambah baris baru? Oleh kerana Vue akan membuat apa -apa dalam item, untuk menjadikan garis kosong, kita hanya perlu menolak objek dengan apa -apa nilai lalai yang kita mahu ke dalam array item.

Untuk membuat fungsi yang boleh diakses dalam templat, kita perlu menyampaikannya kepada contoh Vue kita sebagai sifat objek kaedah:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

mari kita tentukan kaedah addrow yang boleh kita hubungi untuk menambah item baru ke array item kami:

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

Perhatikan bahawa mana -mana kaedah yang kami buat akan secara automatik terikat kepada contoh VUE itu sendiri, jadi kami boleh mengakses sifat dan kaedah lain dalam objek data sebagai sifat ini.

Jadi, sekarang kita mempunyai kaedah, bagaimana kita memanggilnya ketika mengklik butang "Tambah Baris"? Sintaks untuk menambah pendengar acara ke unsur-unsur dalam templat adalah v-on: nama acara:

<code class="language-javascript">const app = new Vue({
  el: 'table'
});</code>

Vue juga memberikan kita jalan pintas supaya kita boleh menggunakan @ bukan V-ON:, seperti yang saya lakukan dalam kod di atas. Bagi pengendali, kita boleh menentukan sebarang kaedah dalam contoh VUE.

Properties Pengkomputeran

Sekarang kita hanya perlu memaparkan jumlah di bahagian bawah invois. Kita mungkin boleh melakukan ini dalam templat itu sendiri: seperti yang saya nyatakan sebelum ini, Vue membolehkan kita meletakkan sebarang pernyataan JavaScript antara pendakap keriting. Walau bagaimanapun, adalah lebih baik untuk menyimpan apa -apa di luar logik yang sangat asas di luar templat;

kita boleh menggunakan kaedah lain untuk ini, tetapi saya fikir sifat -sifat yang dikira lebih sesuai. Sama seperti kaedah penciptaan, kami lulus objek yang dikira yang mengandungi fungsi untuk contoh VUE kami, dan kami mahu hasil fungsi -fungsi ini digunakan dalam templat:

<code class="language-html"><tr> class="item">
  <td><input type="text" v-model="item.description"></td>
  <td><input type="number" v-model="item.price"></td>
  <td><input type="number" v-model="item.quantity"></td>
  <td>
<pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</code>

.00

Sekarang kita boleh merujuk harta yang dikira ini dalam templat:

<code class="language-javascript">function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</code>

Seperti yang anda perhatikan, sifat yang dikira boleh dirawat seperti data; Tetapi terdapat satu lagi manfaat untuk menggunakan sifat -sifat yang dikira: Vue cukup pintar untuk cache nilai pulangan dan akan mengira semula fungsi hanya jika salah satu sifat data ia bergantung kepada perubahan.

Jika kita menggunakan kaedah untuk mengira jumlahnya, pengiraan akan dilakukan setiap kali templat yang diberikan semula. Kerana kita menggunakan sifat yang dikira, jumlahnya akan dikira semula hanya jika medan kuantiti atau harga berubah item.

penapis

Anda mungkin telah melihat kesilapan kecil dalam pelaksanaan kami. Walaupun kos unit adalah integer, jumlah dan subtotal kami tidak dipaparkan apabila ia dipaparkan. Apa yang kita mahukan adalah sentiasa memaparkan nombor ini sebagai dua tempat perpuluhan.

daripada mengubahsuai kod yang mengira subtotal dan mengira jumlah, Vue memberikan kita cara yang baik untuk mengendalikan tugas pemformatan yang sama seperti ini: penapis.

Seperti yang anda mungkin dapati, untuk membuat penapis, kami hanya lulus objek dengan kunci itu kepada contoh Vue kami:

<code class="language-javascript">function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</code>

di sini kita membuat penapis yang sangat mudah yang dipanggil mata wang yang memanggil nilai.tofixed (2) dan mengembalikan hasilnya. Kita boleh memohon kepada mana -mana output dalam templat seperti berikut:

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

Berikut adalah demo Vue penuh: pautan codepen

Ringkasan

Bandingkan dua versi kod bersebelahan, dan beberapa aspek aplikasi VUE menonjol:

• Pemisahan jelas antara UI dan logik/data yang memacunya: Kod lebih mudah difahami dan lebih mudah untuk diuji.
• UI adalah deklaratif: Anda hanya perlu mengambil berat tentang apa yang anda mahu lihat, tanpa memberi perhatian kepada cara mengendalikan DOM untuk melaksanakannya.

saiz (dalam kb) dari dua perpustakaan hampir sama. Sudah tentu, anda boleh menyelaraskan jQuery dengan membina tersuai, tetapi walaupun untuk projek yang agak mudah seperti contoh invois kami, saya fikir kemudahan pembangunan dan kebolehbacaan kod itu membenarkan perbezaan ini.

Vue boleh melakukan banyak perkara yang belum kami diperkenalkan di sini. Kelebihannya ialah ia membolehkan anda membuat komponen UI yang boleh diguna semula modular yang boleh digabungkan ke dalam aplikasi frontend yang kompleks. Jika anda berminat untuk mengenali Vue secara mendalam, saya cadangkan anda menyemak bangun dan berjalan dengan rangka kerja Vue.js 2.0.

Soalan Lazim Mengenai Mengganti JQuery Dengan Vue

Apakah perbezaan utama antara jQuery dan vue.js?

JQuery adalah perpustakaan JavaScript yang cepat, padat dan kaya. Ia menjadikan dokumen HTML traversal dan manipulasi, pemprosesan acara, dan animasi lebih mudah, dan API yang mudah digunakan dapat berjalan dalam pelbagai pelayar. Vue.js, sebaliknya, adalah rangka kerja JavaScript yang progresif untuk membina antara muka pengguna. Tidak seperti kerangka keseluruhan yang lain, reka bentuk Vue mempunyai kebolehpasaran tambahan dari awal lagi. Perpustakaan teras hanya memberi tumpuan kepada lapisan paparan, mudah dimulakan dan disatukan dengan perpustakaan lain atau projek sedia ada.

Kenapa saya harus mempertimbangkan untuk menggantikan jQuery dengan vue.js?

Walaupun JQuery telah menjadi alat yang boleh dipercayai selama bertahun -tahun, Vue.js menyediakan cara yang lebih moden dan komprehensif untuk membina aplikasi web. Vue.js adalah berasaskan komponen, yang menggalakkan kebolehgunaan dan kebolehkerjaan. Ia juga mempunyai ekosistem yang lebih kuat dengan alat seperti pengurusan negeri, penghalaan, dll. Di samping itu, Vue.js mempunyai DOM maya yang dapat meningkatkan prestasi dalam beberapa kes.

Bagaimana untuk menukar kod jQuery ke vue.js?

Menukar kod jQuery ke vue.js memerlukan pemahaman tentang kaedah dan sifat -sifat vue.js bersamaan fungsi jQuery. Sebagai contoh, anda akan menggunakan cangkuk kitaran hayat Vue yang dipasang () bukannya $ (dokumen) JQuery. Ready (). Begitu juga, anda akan menggunakan Axios Vue atau mengambil bukannya JQuery's $ .ajax () untuk permintaan HTTP.

Bolehkah saya menggunakan jQuery dan vue.js dalam satu projek?

Walaupun secara teknikal boleh menggunakan kedua -dua jQuery dan vue.js, ini biasanya tidak disyorkan. Mencampurkan kedua -duanya boleh membawa kepada kekeliruan kod dan konflik yang berpotensi, kerana kedua -dua perpustakaan cuba menguruskan DOM dengan syarat mereka sendiri. Lebih baik menggunakan salah satu daripada mereka sepenuhnya.

Bagaimana menangani peristiwa di vue.js, berbanding dengan jQuery?

Dalam jQuery, anda biasanya melampirkan pendengar acara ke elemen menggunakan kaedah seperti .click (), .on (), atau .bind (). Dalam vue.js, anda menggunakan Arahan V-On (atau singkatannya @) untuk mendengar peristiwa DOM dan menjalankan beberapa JavaScript apabila dicetuskan.

Bagaimanakah data mengikat dalam kerja vue.js berbanding dengan jQuery?

JQuery tidak mempunyai pengikatan data terbina dalam. Anda secara manual memilih elemen dan mengemas kini kandungannya. Sebaliknya, Vue.js mempunyai sistem pengikat data yang kuat. Anda boleh menggunakan Arahan V-Model untuk membuat pengikatan data dua hala pada input borang, Textarea, dan elemen pilih.

Bagaimana untuk menghidupkan unsur -unsur dalam vue.js, berbanding dengan jQuery?

jQuery mempunyai kaedah animasi terbina dalam, seperti .fadein (), .slideup (), dll. Vue.js, sebaliknya, menyediakan komponen penukaran yang membolehkan fleksibiliti yang lebih besar apabila menghidupkan unsur -unsur masuk dan keluar dari DOM.

Bagaimana membuat permintaan HTTP di vue.js, berbanding dengan jQuery?

Dalam jQuery, anda biasanya menggunakan kaedah $ .ajax () untuk membuat permintaan HTTP. Vue.js tidak mempunyai kaedah ini dibina, tetapi anda boleh menggunakan perpustakaan seperti API moden (seperti mengambil) atau axios untuk membuat permintaan HTTP.

Bagaimanakah Vue.js mengendalikan tindak balas, berbanding dengan jQuery?

JQuery tidak mempunyai sistem reaktif terbina dalam. Apabila data anda berubah, anda secara manual mengemas kini DOM. Vue.js, sebaliknya, mempunyai sistem data reaktif. Pandangan dikemas kini secara automatik apabila anda menukar data.

Bagaimana untuk menggantikan plugin jQuery dengan komponen vue.js?

Banyak plugin jQuery boleh digantikan dengan komponen Vue.js. Vue.js mempunyai ekosistem yang kaya yang menyediakan beribu -ribu komponen sumber terbuka yang tersedia. Anda juga boleh membuat komponen tersuai anda sendiri. Ini meningkatkan kebolehgunaan semula dan mengekalkan kod.

Sila ambil perhatian bahawa saya telah menulis semula output mengikut keperluan anda dan mengekalkan format asal dan lokasi semua gambar. Oleh kerana saya tidak mempunyai akses ke CodePen, saya tidak dapat memberikan pautan Codepen sebenar, sila buat dan gantikan sendiri "[Codepen Link]" placeholder sendiri.

Atas ialah kandungan terperinci Cara menggantikan jQuery dengan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!