Sebagai pengguna vue.js yang setia, saya pikir perlu menulis beberapa artikel untuk memuji bahasa yang indah ini. Evaluasi keseluruhan saya tentang itu adalah "sederhana namun elegan, kecil tetapi tidak kurang pada orang berbakat". Berikut ini akan memperkenalkan vue.js kepada Anda di sekitar kalimat ini, berharap untuk merangsang minat Anda pada vue.js.
Pengantar Vue.js
Penulis Vue.js adalah Evan You (You Yuxi), yang bekerja di Google Creative Lab. Meskipun Vue adalah proyek pribadi, saya pribadi percaya bahwa itu tidak lebih rendah dari AngularJs Google dalam hal prospek pengembangan. Saya akan membuat beberapa perbandingan sederhana dengan VUE (versi 1.0+ Angular).
Fitur utama VUE seperti yang diperkenalkan di situs web resminya (http://cn.vuejs.org/):
(1) Ringkas (2) Ringan (3) Cepat (4) Data Driver (5) Modul-Friendly (6) Komponenisasi
Sederhana
Berikut adalah sepotong kode Angular untuk mengimplementasikan ikatan dua arah
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <input type = "text" ng-model = "note"> </div> </body ', jsvar mymodule = angular.module (' module.module. []); mymodule.controller ('myctrl', ['$ scopp', function ($ scope) {$ scope.note = '';]);Kemudian lihat Kode Vue
// html <body> <v id = "app"> <p> {{note}} </p> <input type = "text" v-Model = "note"> </div> </body> // jsvar vm = vue baru ({el: '#app', data: {note: ''})Sebagai perbandingan, saya pribadi berpikir bahwa gaya penulisan kode Vue lebih ringkas dan mudah dimengerti.
Bukan tanpa keanggunan
Meskipun Vue adalah kerangka kerja yang relatif ringan, itu sederhana dan ringan dan sangat ramah pengguna. API yang disediakan juga sangat mudah dimengerti, dan juga memberikan beberapa instruksi dan atribut yang sangat nyaman.
Misalnya:
(1) Bind Klik Event
<a v-on: click = "dosomething"> </a>
Itu bisa disingkat sebagai:
<a @click = "dosomething"> </a>
(2) mengikat atribut dinamis
<a v-bind: href = "url"> </a>
Itu bisa disingkat sebagai:
<a: href = "url"> </a>
(3) Pengubah yang nyaman
<!-Cegah klik peristiwa dari gelembung->
<a @click.stop = "dosomething"> </a>
<!-Acara dipicu hanya ketika tombol Enter ditekan->
<input @keyup.enter = "Kirim">
(4) Karakteristik parameter praktis
<!-Debounce menetapkan penundaan minimum->
<Input V-Model = "Catatan" Debounce = "500">
<!-Perbarui data di "Ubah" bukannya "input" acara->
<Input V-Model = "msg" malas>
Bagaimana dengan itu, apakah rasanya begitu elegan?
Kecil
Berbicara tentang kecil, pertama -tama kita harus memperhatikan ukuran kode sumber Vue. Kode sumber versi produksi Vue (mis. Versi min) hanya 72.9kb. Situs web resmi mengatakan bahwa GZIP hanya 25.11kb setelah kompresi, yang setengah lebih kecil dari 144kb Angular.
Salah satu keuntungan dari kekompakan adalah memungkinkan pengguna untuk memilih solusi yang sesuai secara lebih bebas, dan memberi pengguna lebih banyak ruang dalam hal mencocokkan perpustakaan lain.
Misalnya, inti dari Vue tidak termasuk fungsi perutean dan AJAX secara default, tetapi jika Anda memerlukan perutean dan AJAX dalam proyek Anda, Anda dapat secara langsung menggunakan pustaka resmi Vue-Router dan plug-in pihak ketiga Vue-Resource yang disediakan oleh VUE. Pada saat yang sama, Anda juga dapat menggunakan pustaka atau plug-in lain yang ingin Anda gunakan, seperti JQuery's Ajax, dll.
Bukankah rasanya sangat fleksibel?
Ada banyak tuan hebat
Meskipun Vue kecil, "Sparrow kecil dan memiliki semua organ internal", dan juga mudah untuk membangun aplikasi skala besar.
(1) modular
Dikombinasikan dengan beberapa alat pembangunan modul pihak ketiga, seperti CommonJs, NeedJs atau Seajs, modularitas kode dapat dengan mudah dicapai.
Namun, di sini saya tidak merekomendasikan menggunakan alat konstruksi yang disebutkan di atas. Saat ini merupakan solusi paling populer untuk secara langsung menggunakan fungsi modular ES6 dan kemudian mengemasnya sesuai dengan Webpack.
Jika Anda tidak memahami fungsi modul ES6, silakan merujuk ke: http://es6.ruanyifeng.com/#docs/module
Dalam artikel mendatang, saya juga akan memperkenalkannya, termasuk konfigurasi webpack.
(2) Komponen
Fungsi komponen Vue adalah sorotannya. Dengan memasukkan kode HTML, CSS, dan JS dari komponen pada halaman ke dalam file .vue untuk manajemen, pemeliharaan kode dapat sangat ditingkatkan.
Misalnya:
// app.vue<lemplate> <v div v-text = "note"> </div> </lemplate> <script> ekspor default {data () {return {note: 'Ini adalah template html komponen! '}}} </script> <style scoped> .box {color: #000;} </style>
Kami juga dapat menulis beberapa bahasa preprocessing dalam komponen:
// app.vue <template lang = 'jade'> div (class = "box" v-text = "text") </emplate> <script> Ekspor default {data () {return {note: 'Ini adalah template html komponen! '}}} </script> <style lang = "styles">. Box Color: #000 </tyle>Tentu saja, kita perlu mengemasnya melalui webpack. Disarankan untuk menggunakan Webpack + Vue-Loader, dan menggunakan Sintaks ES6 secara bersamaan. Babel perlu dipasang untuk konversi. Karena artikel ini merupakan diskusi singkat tentang Vue.js, saya tidak akan memberikan pengantar mendalam di sini.
(3) Routing
Seperti Angular, Vue memiliki kemampuan peruteannya. Melalui fungsi routing, kita dapat mewujudkan pemuatan sesuai permintaan dari setiap komponen dan dengan mudah membangun aplikasi satu halaman. Berikut adalah file konfigurasi routing sederhana:
// router.js'use function default strict'Export (router) {router.map ({'/': {component: function (resolve) {membutuhkan (['./ komponen/foo.vue'], resolve)}}, '/foo': {komponen: foo.vue '] {' {'. }}, '/bar': {component: function (resolve) {membutuhkan (['./ komponen/bar.vue'], resolve)}}})}Untuk melihat konfigurasi dan penggunaan perutean spesifik, silakan kunjungi dokumentasi resmi yang disediakan oleh: http://vuej.github.io/vue-router/zh-cn/index.html
Meringkaskan
Saya pribadi percaya bahwa beberapa teknologi front-end terintegrasi. Mempelajari bahasa atau kerangka kerja itu sendiri bukanlah untuk mempelajari teknologinya. Yang paling penting adalah mempelajari pemikirannya. Hanya tingkat pemikiran yang diperpanjang, dan Anda akan merasa mudah untuk mempelajari teknologi lain. Apa yang dibawa Vue adalah pemikiran baru di front-end untuk menyelesaikan masalah.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.