Membuat langkah dari jQuery ke vue

Pemaju yang telah menggunakan jQuery untuk masa yang lama dan baru -baru ini beralih ke Vue mungkin berminat dengan proses penghijrahan kedua -duanya.

Pertama sekali, saya perlu jelas, saya tidak mengesyorkan bahawa anda menyerahkan jQuery. Walaupun pernyataan ini popular sekarang, saya menulis artikel yang sama saya beberapa tahun yang lalu ("Bagaimana saya (tidak) menggunakan jQuery"). Jika jQuery dapat memenuhi keperluan anda dan pengguna akhir anda boleh menggunakan laman web anda dengan lancar, maka teruskan menggunakannya.

Panduan ini terutamanya untuk pemaju yang mempunyai pengalaman bertahun -tahun menggunakan jQuery dan ingin belajar bagaimana untuk mencapai tugas yang sama di Vue. Jadi saya akan memberi tumpuan kepada apa yang saya fikir adalah kes "teras" menggunakan jQuery. Saya tidak akan merangkumi semua ciri yang mungkin, tetapi sebaliknya mengambil pendekatan "Saya sering melakukan [x] dengan jQuery", yang mungkin lebih resonan bagi mereka yang sedang mempertimbangkan untuk belajar Vue. .

Oleh itu, mari kita pertimbangkan beberapa tugas lanjutan yang mungkin kita beralih kepada jQuery:

• Cari Unsur di DOM (untuk beroperasi pada mereka kemudian)
• Tukar kandungan dalam DOM (contohnya, teks perenggan atau kelas butang)
• Baca dan tetapkan nilai borang
• Pengesahan Borang (sebenarnya hanya gabungan perkara di atas)
• Hasil panggilan dan pemprosesan Ajax
• Pengendalian acara (contohnya, lakukan tindakan apabila butang diklik)
• Mengukur atau mengubah gaya elemen

Sudah tentu, jQuery mempunyai lebih banyak daripada itu, tetapi kegunaan ini (sekurang -kurangnya pada pendapat saya) meliputi kes -kes penggunaan yang paling biasa. Juga ambil perhatian bahawa terdapat banyak korelasi dalam senarai di atas. Oleh itu, adakah kita mulakan dengan membandingkan setiap ciri satu demi satu? Tidak, jangan risau. Mari kita mula -mula memperkenalkan perbezaan utama aplikasi VUE.

Tentukan "Skop Tindakan" Vue

Apabila kami menambah jQuery ke halaman, kami sebenarnya menambah pisau Tentera Swiss ke kod JavaScript kami untuk mengendalikan tugas pembangunan web yang biasa. Kami boleh melaksanakan sebarang kes penggunaan dalam apa -apa perintah yang kami fikir sesuai. Sebagai contoh, pelanggan mungkin memerlukan pengesahan borang hari ini dan kemudian, dalam masa sebulan, minta menambah borang carian berasaskan AJAX ke tajuk laman web.

Vue mempunyai perbezaan yang signifikan dalam hal ini. Apabila memulakan projek Vue, kami mula -mula menentukan "rantau" yang kami mahu fokus di DOM. Oleh itu, mari kita pertimbangkan laman web prototaip mudah:

<header>
  Kandungan header mewah</header>
<div id="sidebar">
  Beberapa kandungan bar sisi</div>

<main>
  <p id="main-content">
    Kandungan laman web utama, kandungan yang sangat penting ...
  </p>
  <div id="loginForm">
    Sudah tentu terdapat juga borang log masuk</div>
</main>

Dalam aplikasi jQuery biasa, kami mungkin menulis kod untuk mengendalikan tajuk, sidebars, borang log masuk, dan lain -lain. Tidak ada masalah besar:

 $ (dokumen) .ready (fungsi () {

  $ ('header') // Lakukan sesuatu ...

  $ ('#sidebar') // Lakukan sesuatu ...

  $ ('#LoginForm') // Lakukan sesuatu ...

});

Dalam aplikasi VUE, kami mula -mula menentukan apa yang hendak diproses. Katakan pelanggan kami terlebih dahulu meminta untuk menambah pengesahan ke elemen LoginForm. Kod Vue kami akan menentukan ini:

 Vue baru ({
  EL: '#loginform',
  // Kod di sini ...
});

Ini bermakna jika pelanggan kemudian memutuskan untuk menambahkan sesuatu ke bar sisi, kami biasanya menambah aplikasi Vue kedua :

 Vue baru ({
  EL: '#loginform',
  // Kod di sini ...
});

Vue baru ({
  EL: '#SIDEBAR',
  // Kod di sini ...
});

Adakah ini perkara yang buruk? Tidak semestinya. Kami segera mendapat faedah pembungkusan. Sekiranya kita secara tidak sengaja menggunakan pembolehubah dengan nama biasa (kita semua lakukan), kita tidak perlu bimbang tentang bertentangan dengan bahagian lain kod. Apabila pelanggan kemudian menambah permintaan lain, memisahkan set kod VUE yang unik dan logik seperti ini, supaya kami dapat yakin bahawa mereka akan mengganggu satu sama lain.

Jadi, ini adalah perkara yang baik. Tetapi apabila saya mula menggunakan Vue, ia memberi saya jeda. Sekarang, mari kita lihat kes penggunaan kami.

Cari Unsur di Dom

Satu lagi aspek yang menarik atau menakutkan yang anda dapati ialah bagaimana "mencari unsur -unsur di DOM". Ini agak samar -samar, tetapi mari kita pertimbangkan contoh khusus. Kami mempunyai butang dan apabila diklik, kami membuat sesuatu berlaku. Berikut adalah contoh yang mudah:

 <button id="myButton">Klik saya!</button>

 $ (dokumen) .ready (fungsi () {

  $ ('#myButton'). Klik (fungsi () {
    amaran (1);
  });

});

Sekarang mari kita bandingkan dengan bagaimana Vue melaksanakan:

<div id="app">
  <button>Klik saya!</button>
</div>

const app = new Vue ({
  EL: '#app',
  Kaedah: {
    Dosomething: fungsi () {
      amaran (1);
    }
  }
});

Aplikasi VUE adalah verbose, tetapi sedar bagaimana untuk menyambungkan operasi secara langsung ("klik") antara tag dan fungsi yang akan dipanggil. Kod Vue tidak bersekutu dengan DOM (kecuali bahagian EL, di mana kita menentukan di mana ia perlu berfungsi). Ia mudah salah satu perkara yang meyakinkan saya tentang Vue - lebih mudah untuk memahami apa yang sedang berlaku. Juga, saya tidak perlu bimbang tentang nilai ID dan pemilih. Jika saya menukar kelas atau ID butang, saya tidak perlu kembali ke kod saya dan bimbang tentang mengemas kini pemilih.

Mari kita pertimbangkan contoh lain: mencari dan menukar teks di DOM. Bayangkan bahawa selepas mengklik butang, teks bahagian lain DOM kini akan diubah.

 <button id="myButton">Klik saya!</button>

$ (dokumen) .ready (fungsi () {

  $ ('#myButton'). Klik (fungsi () {
    $ ('#hasil'). Teks ('Anda mengklik saya, terima kasih!');
  });

});

Saya menambah rentang baru, dan sekarang apabila butang diklik, kami menggunakan pemilih lain untuk mencarinya dan menggunakan kaedah utiliti jQuery untuk menukar teks di dalamnya. Sekarang pertimbangkan versi Vue:

<div id="app">
  <button>Klik saya!</button>
  <span>{{resultText}}</span>
</div>

const app = new Vue ({
  EL: '#app',
  Data: {
    Hasilnya: ''
  },
  Kaedah: {
    Dosomething: fungsi () {
      this.resulttext = 'Anda mengklik saya, terima kasih! ';
    }
  }
});

Dalam contoh ini, kami menggunakan bahasa templat Vue (garis yang diserlahkan) untuk menentukan bahawa kami ingin menjadikan pembolehubah di dalam rentang, dalam kes ini hasilnya. Sekarang, apabila butang diklik, kita menukar nilai dan teks dalaman rentang akan berubah secara automatik.

Dengan cara ini, Vue menyokong singkatan atribut V-On, jadi butang dalam contoh boleh digantikan dengan @click = "dosomething".

Baca dan tulis pembolehubah borang

Borang pemprosesan mungkin salah satu perkara yang paling biasa dan berguna yang boleh kita lakukan dengan JavaScript. Malah sebelum JavaScript, kebanyakan "pembangunan web" awal saya menulis skrip perl untuk mengendalikan penyerahan bentuk. Sebagai cara utama untuk menerima input pengguna, borang telah menjadi kritikal ke web dan mungkin masih berlaku untuk beberapa waktu. Mari kita pertimbangkan contoh jQuery mudah yang membaca beberapa bidang bentuk dan menetapkan bidang lain:

= Minta Jumlah

$ (dokumen) .ready (fungsi () {
  biarkan $ first = $ ('#pertama');
  biarkan $ kedua = $ ('#kedua');
  biarkan $ sum = $ ('#sum');
  biarkan $ butang = $ ('#sumbutton');

  $ butang.on ('klik', fungsi (e) {
    E.PreventDefault ();
    Let total = parseInt ($ first.val (), 10) parseInt ($ second.val (), 10);
    $ sum.val (total);
  });
});

Kod ini menunjukkan bagaimana jQuery membaca dan menulis melalui kaedah Val (). Kami akhirnya mengambil empat item (ketiga -tiga medan dan butang bentuk) dari DOM dan menggunakan operasi matematik mudah untuk menghasilkan hasilnya. Sekarang pertimbangkan versi Vue:

= Minta Jumlah

Vue baru ({
  EL: '#myform',
  Data: {
    Pertama: 0,
    Kedua: 0,
    Jumlah: 0
  },
  Kaedah: {
    dosum: fungsi () {
      this.sum = this.first this.second;
    }
  }
})

Ini memperkenalkan beberapa pintasan Vue yang menarik. Pertama, model V adalah bagaimana VUE mencipta data bidirectional yang mengikat antara nilai dalam DOM dan JavaScript. Pembolehubah blok data akan disegerakkan secara automatik dengan medan borang. Tukar data dan borang akan dikemas kini. Tukar borang dan data akan dikemas kini. .Number adalah bendera yang mengarahkan VUE untuk merawat nilai rentetan yang diwarisi medan borang sebagai nombor. Jika kita menghilangkannya dan melakukan operasi tambahan, kita akan melihat penambahan rentetan dan bukannya operasi aritmetik. Saya telah menggunakan JavaScript selama hampir satu abad dan masih mengacaukan ini.

Satu lagi "kemahiran" yang bijak ialah @click.prevent. Pertama, @Click mentakrifkan pengendali klik butang, dan kemudian .prevent sebahagiannya menghalang penyemak imbas daripada mengemukakan tingkah laku lalai borang (bersamaan dengan event.PreventDefault ()).

Titik terakhir ialah penambahan kaedah dosum yang terikat pada butang. Perhatikan bahawa ia hanya menggunakan pembolehubah data (VUE disediakan dalam skop ini).

Walaupun ini kebanyakannya perasaan peribadi saya, saya sangat menyukai kekurangan pemilih pertanyaan dalam skrip apabila ditulis dalam VUE dan bagaimana HTML dapat membuatnya lebih jelas apa yang dilakukannya.

Akhirnya, kita juga boleh menyingkirkan butang sepenuhnya:

=

Vue baru ({
  EL: '#myform',
  Data: {
    Pertama: 0,
    Kedua: 0
  },
  dikira: {
    jumlah: fungsi () {
      kembali this.first this.second;
    }
  }
})

Ciri sejuk VUE adalah sifat yang dikira. Mereka adalah dummies yang mengenal pasti apabila nilai yang diperolehnya dikemas kini. Dalam kod di atas, SUM akan dikemas kini sebaik sahaja mana -mana medan dua bentuk berubah. Ini berfungsi di luar bidang bentuk. Kita boleh membuat jumlah seperti ini:

 Jumlahnya ialah {{sum}}.

Menggunakan Ajax

Betapa mudahnya menggunakan Ajax, yang boleh dipuji. Malah, saya boleh mengatakan bahawa saya telah menggunakan Ajax dalam cara "asli" mungkin hanya sekali dalam jumlah. . Satu lagi perkara yang JQuery baik adalah cara ia mengendalikan permintaan JSONP. Walaupun kebanyakan JSONP tidak diperlukan sekarang menggunakan CORS, JSONP adalah cara untuk mengendalikan permintaan kepada API pada domain yang berbeza.

Jadi, apa yang telah dilakukan oleh Vue untuk membuat Ajax lebih mudah? Tiada apa -apa!

Ok, ini kedengarannya mengerikan, tetapi tidak. Terdapat banyak pilihan yang tersedia untuk mengendalikan permintaan HTTP, dan Vue.js mengambil pendekatan yang lebih agnostik yang membolehkan kita pemaju memutuskan sendiri bagaimana untuk mengendalikannya. Jadi ya, ini bermakna lebih banyak kerja, tetapi kami mempunyai beberapa pilihan yang hebat.

Perkara pertama yang perlu dipertimbangkan ialah Axios, perpustakaan berasaskan janji yang sangat popular di komuniti Vue. Berikut adalah contoh mudah dalam tindakan (diambil dari readme):

 axios.get ('/user? id = 12345')
  .tua (fungsi (respons) {
    // console.log (respons);
  })
  .catch (fungsi (ralat) {
    // Mengendalikan ralat console.log (ralat);
  })
  .the (fungsi () {
    // selalu melaksanakan});

Axios pasti menyokong permintaan pos dan membolehkan menentukan tajuk serta banyak pilihan lain.

Walaupun Axios sangat popular di kalangan pemaju Vue, saya tidak menyukainya. (Sekurang -kurangnya belum.) Sebaliknya, saya lebih suka mengambil. Ambil bukan perpustakaan luaran, tetapi cara web standard untuk melaksanakan permintaan HTTP. Ambil disokong dengan baik dalam kira -kira 90% penyemak imbas, tetapi itu bermakna ia tidak sepenuhnya selamat, tetapi kami sentiasa boleh menggunakan polyfill jika diperlukan.

Walaupun ini benar -benar di luar skop apa yang kita sedang berbincang di sini, Kingsley Silas telah menulis panduan yang sangat baik untuk menggunakan Axios dan mengambil dengan React.

Seperti Axios, Fetch juga berdasarkan janji dan mempunyai API yang mesra:

 Ambil ('http://example.com/movies.json')
  .tua (fungsi (respons) {
    RETURN Response.json ();
  })
  .the (fungsi (myjson) {
    Console.log (json.stringify (myjson));
  });

Kedua -dua AXIOS dan Ambil Meliputi semua jenis permintaan HTTP, jadi sama ada yang sesuai untuk sebarang keperluan. Mari kita lihat perbandingan mudah. Ini adalah demonstrasi jQuery yang mudah menggunakan API Star Wars.

<h1 id="Filem-Star-Wars"> Filem Star Wars</h1>

$ (dokumen) .ready (fungsi () {
  $ .get ('https://swapi.com/api/films', fungsi (res) {
    biarkan senarai = '';
    result.results.foreach (fungsi (r) {
      Senarai = `

$ {r.title}

`; }); $ ('#filem'). html (senarai); }); });

Dalam contoh di atas, saya menggunakan $ .get untuk mengakses API dan kembali ke senarai filem. Saya kemudian menggunakan data itu untuk menghasilkan senarai tajuk sebagai elemen tag li dan memasukkannya ke dalam blok UL.

Sekarang, mari kita pertimbangkan contoh menggunakan Vue:

<div id="app">
  <h1 id="Filem-Star-Wars">Filem Star Wars</h1>
  <ul><li v-for="film in films">{{film.title}}</li></ul>
</div>

const app = new Vue ({
  EL: '#app',
  Data: {
    Filem: []
  },
  dicipta () {
    Ambil ('https://swapi.com/api/films')
      .THEN (res => res.json ())
      .THEN (res => {
        this.films = result.results;
      });
  }
})

Bahagian terbaik ini mungkin penggunaan templat V-untuk. Perhatikan bahawa Vue tidak peduli dengan susun atur (sekurang -kurangnya JavaScript). Data diambil dari API. Ia diberikan pembolehubah. Susun atur bertanggungjawab untuk memaparkannya. Saya selalu membenci menggunakan HTML di JavaScript saya, dan sementara JQuery mempunyai penyelesaian untuk masalah ini, membakarnya ke Vue menjadikannya pilihan semula jadi.

Contoh yang lengkap (walaupun sedikit remeh)

Untuk pemahaman yang lebih mendalam, mari kita pertimbangkan contoh yang lebih realistik. Pelanggan kami meminta kami untuk membina antara muka carian front-end peringkat tinggi, AJAX untuk API Produk. Senarai fungsi termasuk:

• Menyokong penapisan mengikut nama dan kategori produk
• Pengesahan Borang, Memerlukan Kami Memberi Terma atau Kategori Carian
• Semasa API mengakses, paparkan mesej kepada pengguna dan matikan butang hantar
• Setelah selesai, laporan pemprosesan tidak menunjukkan sebarang produk atau perlawanan yang disenaraikan

Mari kita mulakan dengan versi jQuery. Pertama ialah HTML:

cari kategori semua makanan permainan cari

Terdapat satu bentuk dengan dua penapis kami dan dua div. Satu digunakan sebagai keadaan sementara ketika mencari atau melaporkan kesilapan, dan yang lain digunakan untuk memberikan hasilnya. Sekarang, periksa kodnya.

 // ... (kodnya terlalu panjang, ditinggalkan di sini) ...

Kod ini mula -mula mencipta satu set pembolehubah untuk setiap projek DOM yang kami mahu menggunakan bidang, butang, dan Div bentuk. Inti logik terletak di pengendali klik butang. Kami mengesahkan dan jika semuanya berfungsi, maka pasang permintaan ke API. Apabila ia kembali, jika tidak ada perlawanan, kami sama ada membuat keputusan atau memaparkan mesej tersebut.

Sekarang mari kita pertimbangkan versi VUE. Sekali lagi, mari kita mulakan dengan susun atur:

<div id="app">
  <form>
    <p>
      <label for="search">cari</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">kategori</label>
      <select v-model="category" id="category">
        <option value="">semua</option>
        <option value="Food">makanan</option>
        <option value="Games">permainan</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">cari</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{result.name}}</li></ul>
</div>

Bermula dari bahagian atas, perubahan termasuk:

• Balut susun atur di Div supaya Vue tahu di mana hendak bekerja.
• Gunakan V-Model untuk medan borang untuk memproses data dengan mudah.
• Gunakan @Click.Prevent untuk mengendalikan operasi carian utama.
• Gunakan: Dilumpuhkan untuk mengikat keadaan kurang upaya butang ke nilai dalam aplikasi VUE (kita akan melihat apa yang dilakukannya kemudian).
• Nilai status sedikit berbeza dari contoh sebelumnya. Walaupun jQuery mempunyai kaedah khusus untuk menetapkan teks dalam projek DOM dan kaedah lain untuk HTML, VUE perlu menggunakan V-HTML apabila memberikan HTML kepada nilai yang akan diberikan. Jika kita cuba menggunakan {{status}} dengan HTML, tag akan melarikan diri.
• Akhirnya, lelaran diproses menggunakan V-jika kondisinya diberikan dengan V-untuk.

Sekarang mari kita lihat kodnya.

 // ... (kodnya terlalu panjang, ditinggalkan di sini) ...

Blok kod pertama yang patut disebutkan adalah satu set medan data. Sesetengah peta untuk membentuk medan, sementara yang lain peta kepada hasil, mesej status, dan lain -lain. Kaedah Carian Products mengendalikan kebanyakan perkara yang sama seperti dalam versi jQuery, tetapi secara umum, terdapat lebih sedikit kod yang terikat pada DOM. Sebagai contoh, walaupun kita tahu hasilnya disenaraikan dalam senarai yang tidak teratur, kod itu sendiri tidak peduli dengan ini. Ia hanya memberikan nilai, dan tag bertanggungjawab untuk memberikannya. Secara keseluruhannya, kod JavaScript memberi tumpuan lebih kepada logik daripada kod jQuery, yang "merasakan" pemisahan kebimbangan yang lebih baik.

JQuery hilang, Vue kekal selama -lamanya!

Ok, itu agak dibesar -besarkan. Seperti yang saya katakan pada mulanya, jika anda suka menggunakan jQuery dan ia berfungsi untuk anda, saya benar -benar tidak fikir anda perlu mengubah apa -apa.

Walau bagaimanapun, saya boleh mengatakan bahawa Vue terasa seperti "langkah seterusnya" yang baik untuk orang yang digunakan untuk menggunakan jQuery. Vue menyokong aplikasi yang kompleks dan mempunyai alat baris arahan yang kuat untuk projek perancah dan bangunan. Tetapi untuk tugas-tugas yang lebih mudah, Vue telah menjadi alat pembangunan saya sebagai alternatif "jquery moden" yang baik!

Atas ialah kandungan terperinci Membuat langkah dari jQuery ke vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!