Kerangka kerja front-end seperti AngularJs dapat membuatnya sangat nyaman bagi kami untuk mengembangkan aplikasi satu halaman yang kuat. Namun, kadang -kadang kerangka kerja besar seperti Angular terlalu besar untuk proyek kami dan banyak fungsi mungkin tidak digunakan. Saat ini, kita perlu mengevaluasi kebutuhan untuk menggunakannya. Jika kita hanya perlu menambahkan beberapa fungsi ke halaman web sederhana, maka menggunakan Angular akan terlalu merepotkan, dan instalasi yang diperlukan, konfigurasi, routing menulis, merancang pengontrol, dll. Akan tampak terlalu rumit.
Saat ini, kami membutuhkan solusi yang lebih ringan. Vue.js adalah pilihan yang baik. Vue.js adalah kerangka kerja yang berfokus pada model tampilan (ViewModal). Model tampilan adalah jembatan untuk komunikasi data antara UI dan model data, mewujudkan ikatan data dua arah antara UI dan model data. Ini bukan "kerangka kerja lengkap", tetapi kerangka kerja yang sederhana dan fleksibel yang berfokus pada lapisan tampilan.
Selanjutnya, kami akan menggunakan aplikasi memo sederhana untuk mempelajari tentang dasar -dasar Vue.js. Untuk membuat semua orang lebih memperhatikan vue.js sendiri, kami merancang aplikasi klien berdasarkan data lokal. Di akhir artikel ini, kami akan menyebutkan interaksi antara Vue.js dan backend.
Persiapan
Mari kita dapatkan vue.js dan bootstrap melalui NPM terlebih dahulu (tidak perlu, inilah untuk menerapkan perpustakaan gayanya), dan masukkan yang berikut di baris perintah:
NPM Instal Vue Bootstrap
Kemudian buat dua file:
Touch Index.html App.js
Tambahkan juga konten berikut ke index.html
<!-index.html-> <! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> vue </iteme> <!-css-> <tautan rel = "stylesheet" href = "node_modules/bootstrap/dist/csss/csss. Bar-> <av> <div> <a> <i> </i> vue memo </a> </div> </av> <!-bagian utama dari aplikasi-> <v id = "event">-tambahkan formulir-> <div> <h3> Tambahkan Acara </h3> </Div> <div> </Div> <h3> </div> </div> </div> <!-js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
Tag <div> dengan "acara" adalah bagian inti dari aplikasi ini. Setelah itu kami akan membuat instance Vue untuk bagian inti ini.
Buat instance vue
Pertama, mari kita buat instance vue dan atur atribut "el" dari contoh ini ke "#events". Dengan cara ini, instance akan terikat pada wadah dengan "acara" ID.
// app.jsnew vue ({// dan wadah mengikat el dengan id "event": '#events'});Pada titik ini, fungsi Vue akan berlaku di acara div#. Sebelum menambahkan konten lain, mari tambahkan beberapa properti yang diperlukan ke instance Vue yang dibuat:
// app.js vue baru ({// wadah mengikat el dengan id "peristiwa": '#events', // dalam atribut data, kami mendefinisikan data yang berinteraksi dengan data halaman web: {}, // ketika aplikasi dimuat, fungsi dalam atribut yang akan dijalankan. {}});Atribut data adalah objek yang menyatakan semua data dalam model tampilan aplikasi kami.
Atribut Ready adalah fungsi yang akan dieksekusi saat aplikasi dimuat. Biasanya, metode lain dipanggil di sini untuk menginisialisasi data yang diperlukan oleh aplikasi.
Metode metode mendefinisikan metode yang perlu digunakan dalam aplikasi ini
Tambahkan Konten ke Formulir
Kita perlu memasukkan detail memo dalam formulir. Kami menggunakan pemilih waktu asli HTML5 untuk mengatur waktu konten memo. (Perhatikan bahwa fungsi ini tidak berlaku di browser Firefox, disarankan untuk menggunakan chrome atau safari)
<Div> <input placeholder = "nama peristiwa" V-Model = "event.name"> </div> <veT> <textarea placeholder = "Deskripsi Acara" V-Model = "Event.Description"> </textarea> </div> <Div> <input type = "date" placeholder = "date" v event. "Event." Peristiwa. @click = "AddEvent"> Kirim </tutton> </div>
Kami menambahkan arahan "V-model" ke tag input dan tag TextArea. Mirip dengan "NG-model" Angular, nilai model-V ini menentukan data yang terikat pada tag ini dalam model tampilan. Data ini tidak hanya tersedia di sini, tetapi juga di tempat lain di dalam wadah.
Kami menambahkan instruksi "@click" ke tombol kirim. Instruksi ini disingkat dan nama lengkapnya harus "V-On: Klik". Fungsinya adalah untuk mengikat pendengar untuk mengklik acara ke tombol ini. Ketika acara klik dipicu, fungsi pendengar dalam instruksi @Click akan dieksekusi. Dalam contoh ini, kami mengikat fungsi addEvent ke tombol kirim. Kami juga dapat mengikat acara lain, dan aturan penulisannya adalah @Event name = "Fungsi Mendengarkan". Jika kita ingin mengikat fungsi pendengar F ke acara Keydown, kita dapat menulis ini: @keydown = "f" atau v-on: keydown = "f"
Pada titik ini, jika Anda mempratinjau halaman web, Anda akan melihat konten berikut:
Tambahkan data
Kami telah menyebutkan metode AddEvent sebelumnya, yang digunakan untuk menambahkan data memo baru.
Sekarang kami akan mendefinisikan metode ini dan menambahkan beberapa data yang diperlukan
// app.js ... data: {event: {name: '', description: '', tanggal: ''}, peristiwa: []}, // fungsi dalam atribut siap dijalankan ketika aplikasi dimuat siap: function () {// ketika aplikasi dimuat, kita perlu menginisialisasi data ini. Tentukan metode untuk mendapatkan data fetchevents: function () {var events = [{id: 1, nama: 'mengadakan rapat', deskripsi: '9 pagi di ruang konferensi lantai 21', tanggal: '2015-09-10'}, {ID: 2, nama: 'Belanja', deskripsi: 'beli power bank', tanggal: '2015-10-02' {'{3,' {{ID: 'Belanja', 'Beli Power Bank', Date: '2015-10-02' Vue ', tanggal:' 2016-03-11 '}]; // $ set adalah metode yang disediakan oleh VUE untuk memasukkan data ke dalam array. Tampilan akan disegarkan saat menjalankannya. $ Set ('Acara', Acara); }, // masukkan data ke dalam array peristiwa addEvent: function () {if (this.event.name) {this.events.push (this.event); this.event = {name: '', description: '', date: ''}; }}}Di properti data, kami mendefinisikan objek acara dan array acara, masing -masing mewakili acara dan array acara. Data ini akan dimuat saat aplikasi dimuat. Jika kami tidak melakukan objek peristiwa yang telah ditentukan, meskipun fungsi selanjutnya dapat diimplementasikan, browser akan melaporkan kesalahan ini:
Maksudnya bahwa jika data yang Anda gunakan dalam aplikasi Anda tidak dinyatakan dalam atribut data, kinerja aplikasi akan terpengaruh. Oleh karena itu, data yang kami gunakan dalam aplikasi kami paling baik dideklarasikan dalam atribut data.
Di properti Ready kami mendefinisikan metode fetchevents untuk mendapatkan data. Dalam metode ini kami menambahkan data ke tampilan melalui metode VM. $ Set. Fungsinya mirip dengan metode dorong array, dan juga menyegarkan tampilan. Parameter metode ini harus berupa tombol string, mewakili data yang masuk. Untuk penggunaan tertentu, silakan merujuk di sini.
Akhirnya, dalam properti Metode kami mendefinisikan metode AddEvents untuk memeriksa apakah nilai acara. Setelah itu, data dalam objek acara akan dibersihkan, dan formulir akan dibersihkan juga.
Tambahkan daftar item
Kami menggunakan daftar hal untuk mendaftar semua hal:
<Div> <a href = "#" v-for = "event in event"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {event.date}} </h5> <p./i> {{event.date {h5> </h5> </{{event.date {{{{{{{{{{{{{{{{{{{{{{h5> </h5> </{ }} </p> <tombol @click = "deleteEvent ($ index)"> delete </button> </a> </div>Kami menggunakan arahan V-for ke elemen render batch dengan struktur DOM yang sama dan konten tampilan yang berbeda. Dalam contoh ini, kami menambahkan arahan V-for ke tag, yang akan melintasi data dalam array peristiwa, dan kami mewakili setiap data traversal dengan peristiwa. Elemen dengan arahan V-for ditambahkan akan menerapkan hasil setiap traversal dalam elemen anak dan menampilkannya berulang kali. Teman -teman yang telah menggunakan mesin template, bereaksi atau sudut mungkin lebih akrab dengan penggunaan yang sama. Dalam contoh kami, isi tag H4, H5, P dan tombol akan ditampilkan berulang kali, dan jumlah loop adalah panjang array peristiwa. Anak-anak dengan elemen arahan V-for disebut templat, dan data dalam templat dibungkus dengan kawat gigi ganda. Dalam contoh ini, data adalah berbagai properti dari objek acara (nama, tanggal, dan deskripsi).
Anda akan melihat bahwa beberapa elemen templat telah menambahkan arahan V-IF. Instruksi ini bertindak sebagai rendering bersyarat. Nilai V-if adalah kondisi penilaian. Jika hasilnya benar, elemen akan diterjemahkan, jika tidak, itu tidak akan diberikan. Selain itu, kami menambahkan instruksi klik ke elemen tombol, dan memanggil metode DeleteEvent untuk menghapus masalah (definisi spesifik akan diberikan di bawah). Parameter $ indeks mewakili jumlah elemen yang saat ini dilalui dalam array.
Segarkan halaman dan kami akan menemukan bahwa semua item akan terdaftar di sisi kanan halaman. Setelah memasukkan konten di formulir di sebelah kiri dan mengklik tombol "Kirim", item baru akan secara otomatis ditambahkan ke daftar di sebelah kanan.
Mari kita tentukan metode DeleteEvent
deleteEvent: function (index) {if (konfirmasi ("Apakah Anda yakin ingin menghapus acara ini?")) {// $ Remove adalah metode kenyamanan VUE yang mirip dengan splice this.events. $ Remove (index); }}Dalam metode ini, pertama -tama kami bertanya kepada pengguna apakah ia pasti akan menghapus item tersebut. Jika Anda mengklik "OK", maka item akan dihapus dari DOM melalui metode VUE yang telah ditentukan sebelumnya.
Interaksi dengan backend
Seperti Angular, front-end dan back-end Vue dipisahkan, dan interaksi dengan back-end diselesaikan melalui permintaan HTTP. Ada banyak alat interaktif, Anda dapat menggunakan $. AJAX, Objek XMLHTTPREQuest asli atau perpustakaan pihak ketiga lainnya, atau mencoba Vue-Resource.
Berikut adalah pengantar singkat untuk sumber daya vue. Vue-Resource adalah plug-in yang dirancang khusus untuk VUE untuk mengirim permintaan HTTP. Ini mendukung janji dan templat URI, dan juga menyediakan alat seperti Interceptor. Mari kita lihat contoh kita di atas. Kami mengubah akuisisi masalah menjadi mendapatkannya dari server. Pada saat ini, kita perlu memodifikasi metode fetchevents: (Misalkan backend menyediakan layanan yang terkait dengan masalah melalui URL API/peristiwa, sama di bawah)
fetchevents: function () {this. $ http.get ('API/Events'). Kemudian (function (events) {this. $ set ('events', events);}). catch (function (error) {console.log (error);});}Jika akuisisi berhasil, maka pernyataan fungsi itu akan dieksekusi, dan metode $ set masih dipanggil, tetapi peristiwa parameter input diambil dari server.
Jika kami memodifikasi addEvent, kami perlu mengirim permintaan posting:
addEvent: function () {this. $ http.post ('API/Events', this.event) .then (function (response) {this.events.push (this.event); console.log ("event ditambahkan!");}) .catch (function (error) {console.log (error);});Demikian pula, metode penghapusan masalah dapat dimodifikasi sebagai berikut:
deleteEvent: function (index) {this. $ http.delete ('API/Events/' + Event.id) .then (function (respons) {this.events. $ ramping (index);}) .catch (function (error) {console.log (error);});}Di sini kami meneruskan ID masalah ke server untuk memberi tahu server untuk menghapus ID masalah untuk memfasilitasi server untuk menentukan masalah mana yang akan dihapus.
Kesimpulan
Teman -teman yang telah menggunakan Angular dan React akan menemukan bahwa Vue dan semuanya serupa: instruksi yang mirip dengan pemrosesan modular sudut, mirip dengan React. Namun, Vue jelas berbeda dari mereka. Ini lebih ringan dan mudah digunakan. Anda tidak perlu membuat konfigurasi yang rumit seperti Angular, Anda juga tidak perlu mempelajari konsep -konsep baru seperti DOM virtual baru, JSX, dll. Seperti React. Oleh karena itu, jika aplikasi Anda tidak terlalu besar, Anda mungkin juga mempertimbangkan untuk menggunakan Vue sebagai kerangka aplikasi Anda.
Di atas adalah tutorial pengantar cepat untuk vue.js yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!