Terdapat begitu banyak kerangka kerja JavaScript yang ada sekarang, sukar untuk melacak semuanya, dan tentunya tidak ada orang yang menguasainya secara keseluruhan. Apa maksudnya bagi kebanyakan kita ialah kita harus selektif mengenai kerangka pembangunan mana yang akan kita luangkan masa untuk belajar.
Dalam artikel ini, kami akan melihat Vue.js dengan cepat, jadi anda boleh menentukan sendiri apakah projek itu sesuai dengan jenis projek yang cenderung anda jalankan, dan adakah ia sesuai untuk anda.
Apa itu Vue.js?
Walaupun secara konvensional tidak menggunakan huruf besar, "Vue" sebenarnya merupakan singkatan dari Visual Understanding Environment. Tujuan utamanya adalah untuk mempermudah pengembangan aplikasi web dengan mengurangkan kerumitan kod. Ini mempunyai banyak persamaan dengan React.js, tetapi versi semasa Vue membuat lebih cepat daripada React, dan nampaknya lebih efisien.
Adakah Vue sukar dipelajari?
Sekiranya anda sudah menjadi pengekod yang berpengalaman, anda seharusnya tidak menghadapi banyak kesukaran untuk memulakan dengan Vue, tetapi tidak tepat untuk menggambarkannya sebagai bahasa pemula. Anda perlu mempunyai pengalaman dengan HTML, CSS, dan JavaScript untuk membina sesuatu yang praktikal dengannya.
Keluk pembelajaran dengan Vue agak kurang curam daripada dengan React, dan jauh lebih curam daripada dengan Angular. Oleh itu, apa yang dapat dinyatakan dengan tepat ialah Vue agak mudah dipelajari berbanding dengan kerangka pembangunan popular yang lain.
Bagaimana Vue membantu mencapai objektif?
Ini sedikit berbeza bergantung pada objektif anda sebenarnya, tetapi secara umum, anda mengikat blok kod ke pembahagi HTML. Metodologi ini menjadikannya lebih mudah untuk memperkenalkan interaktiviti dan kandungan dinamik daripada dengan HTML, CSS dan JavaScript biasa.
Sebaliknya, anda tidak boleh melakukan lebih banyak perkara di Vue daripada yang anda boleh dengan menggunakan cara yang lebih konvensional. Menggunakan Vue adalah perkara yang memudahkan anda dalam fasa pengembangan, tetapi ia tidak banyak mempengaruhi hasil akhirnya, selain daripada kesan prestasi kecil kerana memuatkan kod rangka kerja.
Kelebihan lain dari Vue ialah menyediakan modulariti, yang bermaksud anda dapat menggunakan kembali komponen yang anda kembangkan dalam beberapa projek.
Adakah Vue mempunyai trik keren di lengan bajunya?
Sudah tentu, dan yang terbaik daripada ini ialah kesan peralihan terbina dalam, yang membolehkan anda mengawal perkara lain yang akanwise menjadi struktur CSS dan JavaScript yang sangat intensif kod menggunakan hanya satu atau dua baris kod. Ini menjimatkan masa dan usaha anda semasa membuat aplikasi anda.
Fungsi lain yang berguna adalah rendering asli untuk jenis peranti tertentu seperti Android dan iOS, jadi anda boleh menyesuaikan aplikasi anda untuk peranti yang mereka jalankan tanpa banyak kerja tambahan.
Bermula
Seperti yang dinyatakan sebelumnya, Vue mudah dipelajari, tetapi bukan bahasa pemula. Anda masih perlu mengetahui jalan masuk di dalam blok kod.
Masalahnya ialah seperti kebanyakan rangka kerja, dokumentasi adalah sangat malas, dan terutamanya didedikasikan untuk meyakinkan anda untuk menggunakannya. Kurang perhatian diberikan dalam dokumentasi untuk menerangkan cara semuanya berfungsi atau sebab anda melakukan sesuatu dengan cara tertentu. Hampir setiap contoh rangka kerja rasmi yang pernah dibuat meninggalkan perkara yang pentingformation yang anda perlu cari selama berjam-jam untuk ditemui. Itulah kelemahan yang dikongsi oleh dokumentasi dan contoh Vue juga.
Untuk lebih mudah memahami apa yang sebenarnya perlu anda lakukan untuk membuat semula projek ini, ini adalah langkah-langkah yang diperlukan:
1. Tambahkan skrip yang merujuk vue.js
Untuk pengoptimuman kelajuan, yang terbaik adalah memasukkan ini setelah semua kandungan halaman anda, tetapi tepat sebelum tag badan penutup di sumber HTML. Anda mungkin juga memuatkan sumber halaman lain di bahagian ini, dan urutan keutamaan memuat menentukan urutan mana yang harus anda masukkan setiap sumber.
Berikut adalah contoh memasukkan vue.js dari CDN:
Dan berikut adalah contoh memasukkan vue.js dari direktori di pelayan anda sendiri:
Tanpa rujukan ini kepada vue.js, tidak ada yang berkaitan dengan Vue yang boleh berlaku.
2. Tambahkan komponen Vue ke dalam badan HTML anda
Itulah yang berlaku dengan kod ini:
Buat masa ini tidak masuk akal, tetapi bagian Vue adalah elemen "demo-grid" kosong, ditambah penambahan "v-direktif" pada input pertanyaan (dalam hal ini adalah "model-v ", Yang digunakan untuk mengikat kod Vue untuk membentuk input).
3. Sekiranya projek memerlukan templat komponen, tambahkan ini ke badan HTML
Bahagian kod ini tidak biasa kerana kelihatan seperti HTML biasa di dalam tag skrip, yang akan mengelirukan kebanyakan perisian penyuntingan HTML (perhatikan warna penunjuk salah di beberapa tempat).
4. Tambahkan contoh Vue
Ini harus menjadi salah satu perkara terakhir yang muncul di halaman, kerana menjalankan tugas rendering dinamik. Ini memberikan beberapa faedah pengoptimuman daripada menambahkannya lebih awal di halaman.
- Baris 46 menentukan bahawa penyemak imbas harus mencari komponen di halaman yang disebut "demo-grid", dan baris 47 menentukan bahawa "# grid-template" harus digunakan sebagai templat untuk komponen (ini adalah kod templat yang ditambahkan pada langkah 3 dari baris 9 hingga baris 30).
- Satu blok dari garis 48 hingga garis 52 mentakrifkan sifat komponen.
- Garis 53 hingga 62 menentukan fungsi untuk menyusun data dalam jadual.
- Garis 63 hingga 85 menentukan fungsi untuk menyaring data (dari hasil dalam pertanyaan carian).
- Garis 86 hingga 90 menentukan fungsi untuk menggunakan huruf besar dalam kumpulan data.
- Garis 91 hingga 97 menentukan kaedah untuk menyusun data.
5. Masukkan kod pelancaran sebelum tag skrip penutup
Sekiranya anda menyelesaikan langkah 1 hingga 4 dan membuka fail di penyemak imbas, semua yang anda akan lihat ialah kotak carian dan tidak lebih dari itu. Itu kerana semua yang diperlukan untuk membina jadual telah ditentukan tetapi tidak dibuat. Jadi pada langkah 5, kami menambahkan kod yang sebenarnya membuat jadual yang ditentukan oleh semua langkah sebelumnya.
- Baris 100 membuat objek Vue baru.
- Baris 101 menentukan elemen untuk mengikat tindakan.
- Garis 102 hingga 111 memberikan data objek yang akan terikat pada elemen.
Ujian
Setelah menentukan dan membuat objek yang diperlukan, anda kini sudah bersedia untuk menguji hasilnya. Bersiaplah untuk merasa kurang senang, kerana inilah yang harus anda lihat di penyemak imbas:
Apa yang sedang berlaku? Mengapa begitu membosankan? Ini kerana tidak ada gaya yang diterapkan. Sekiranya kita menggunakan gaya lalai dari contoh JSFiddle, jadual akan kelihatan seperti ini:
Menaip apa sahaja di kotak carian (tidak peka huruf besar kecil) akan menapis hasilnya dengan sewajarnya:
Mengklik pada tajuk lajur akan membolehkan anda mengubah susunan paparan. Sebagai contoh, mengklik pada tajuk lajur "Kuasa" akan mengubah hasil yang akan ditampilkan mengikut urutan tahap kuasa.
Memperbaiki dan menyesuaikan diri
Isu lain dengan contoh rangka kerja ialah mereka biasanya tidak memasukkan banyak perkaraformation untuk membantu seseorang yang tidak biasa dengan pangkalan kod untuk memikirkan cara menggunakan dalam medan apa yang mereka lihat dalam contoh. Vue melakukan kerja yang hebat berbanding Bootstrap (yang terkenal kurang masukformative), tetapi masih meninggalkan banyak soalan yang belum dijawab.
Berikut adalah beberapa perubahan yang mungkin kami buat pada aplikasi ini untuk mengubah tampilannya dan apa yang dilakukannya:
- Gayakan jadual sebagai Bootstrap striped jadual
- Tukar bilangan lajur
- Ubah data menjadi sesuatu yang sama sekali berbeza
1. Menambah Bootstrap
2. Membungkus elemen dalam jadual Bootstrap
3. Melaraskan elemen akar untuk menggunakan model susun atur Bootstrap
4. Menyusun semula anak panah
5. Mengubah data
6. Menguji
- Tidak disaring & tidak disusun
- Disusun mengikut Arahan (menaik)
- Disusun mengikut Digunakan Untuk (menaik)
- Disaring untuk "bersyarat"
- Disaring untuk "bersyarat" & disusun berdasarkan Arahan (menaik)
Akhir fikiran
Mudah-mudahan apa yang dapat dilihat dari contoh-contoh ini ialah kami membina dua aplikasi dengan rupa dan kandungan yang sangat berbeza dari sepotong kod yang sama. Dengan Vue sangat mudah untuk menggunakan semula kod anda di beberapa projek, dan berpotensi menikmati penjimatan masa yang besar.
gambar header milik Aleksandar Savic
Komen-komen Responses 0