1. Pengantar Vue.js
1. Fitur utama VUE: (1) Ringkas (2) Ringan (3) Cepat (4) Data Driver (5) Modul Friendly (6) Komponenisasi
(1) Ringkas
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.
(2) 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 acara klik dari Bubbled-> <a @click.stop = "dosomething"> </a> <!-acara hanya dipicu ketika tombol enter ditekan-> <input @keyup.enter = "kirim">
4) Karakteristik parameter praktis
<!-Debounce Tetapkan penundaan minimum-> <input v-Model = "Catatan" debounc = "500"> <!-Perbarui data dalam "ubah" alih-alih peristiwa "input"-> <input v-model = "msg" lazy>
Bagaimana dengan itu, apakah rasanya begitu elegan?
(3) Kiat 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?
(4) 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 alamat tautan untuk detailnya:
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 tertentu pada halaman ke dalam file .vue untuk manajemen, pemeliharaan kode dapat sangat ditingkatkan.
Misalnya:
// app.vue <emplate> <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)}}})}2. Pengantar komponen bootpage
Sebenarnya, ini bukan komponen kelas atas. Sebaliknya, ini benar -benar hanya komponen paging meja sederhana. Ini terutama karena saya membutuhkan komponen paging tabel dalam proyek terbaru saya. Komponen pagination perpustakaan komponen resmi VUE terlalu kuat atau tidak cocok untuk saya, jadi saya menulis sendiri untuk melakukannya sendiri. Mungkin seseorang seperti saya membutuhkan komponen paging sederhana untuk menerapkan fungsi paging sederhana. Saya akan membagikannya di sini, dan semua orang akan mengisi lubang.
Jika Anda memerlukan komponen kelas atas, Anda dapat pindah ke Perpustakaan Komponen Vue Resmi
(1) Cara menggunakan
Dalam file .vue komponen, kami menulis templat seperti ini, yaitu kode html:
<able> <Thead> <tr> <th> id </t> <th> nama </t th> <th> konten </t th> <th> komentar </th> </tr> </thead> <tbody> <ttr v-for = "data di tablel"> <td v-text = "data.num.num"> </td> <td vext = "data v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <v> <boot-page: async = "false": data = "Daftar": lens = "lenarr": page-len = "false": Data = "Daftar": lens = "lenarr": page-len = "false": Data = "list": lens = "lenarr": page-len = "false": Data = "list": lens = "lenarr": page-len = "Pale": Data = "list": lens = "lenarr" page-len = "page" </td> </tr> </tfoot> </able>
Dalam tag <toot-page> async mengacu pada apakah akan mendapatkan data dari sisi server, false tidak; Data adalah array data tabel statis; Lensa adalah array baris yang ditampilkan per halaman; Len halaman adalah jumlah halaman yang dapat ditampilkan;
Kode JavaScript yang menggunakan data statis, yaitu konten dalam tag skrip adalah sebagai berikut:
<script> Impor bootpage dari './components/bootpage.vue' Ekspor default {data () {return {lenarr: [10, 50, 100], // Panjang tampilan per pagelen: 5, // Jumlah halaman yang dapat ditampilkan: [{num: 1, penulis: 'luozh', contents: '12' 12, {{num: 1, penulis: 'luozh', contents: '12 'luozh', konten: '123', komentar: 'bootpage'}, {num: 1, penulis: 'luozh', konten: '123', komentar: 'bootpage'}, {num: 1, penulis: 'luozh', konten: '123', komentar: 'bootpage'}, '},'}, '},'}, '},'}, '},'}, '},'}, '{' {'Luozh', '123', '123, Komentar: 'BootPage'}], // Tabel data mentah, tidak perlu menggunakan TableList saat menggunakan data server: [] // data post-paging dikembalikan oleh komponen pagination}}, komponen: {bootpage}, events: {// data tabel dikembalikan oleh pagination component 'data' (data) {data ini.Secara umum, kami jarang menggunakan data tabel statis, dan sebagian besar data aplikasi diperoleh dari sisi server, jadi di sini ada metode untuk mendapatkan data pagination server:
Komponen HTML yang menggunakan data server adalah sebagai berikut:
<boot-halaman: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
di mana URL adalah alamat permintaan server; Param adalah objek parameter yang perlu dikirim ke server;
Kode menggunakan JavaScript data server adalah sebagai berikut:
<script> Impor bootpage dari './components/bootpage.vue' Ekspor default {data () {return {lenarr: [10, 50, 100, 100], // Panjang tampilan per pagelen: 5, // Jumlah halaman yang dapat ditampilkan URL: '/bootpage/',//Param Param Permintaan: {{{{{{{{{{{{{{/{{{/{{/{{/{/ Komponen pagination}}, metode: {refresh () {this. $ broadcast ('refresh') // fungsi refresh tabel disediakan di sini}}, komponen: {bootpage}, peristiwa: {// data tabel yang dikembalikan oleh pagination (berikut adalah data yang dikembalikan oleh server) {{data '{Data' {Data '{Data' {Data '{Data' (Data '(Data' (Data) {Data) {Data) {Data) {Data) {Data) {Data) {Data) {Data) {Data) {Data) (Catatan: Selain konten array yang diteruskan ke tabel komponen, server juga membutuhkan nama kunci dari jumlah total halaman, bernama page_num
(2) Kode Sumber Komponen
Adapun implementasi pagination, kode sumber di sini tidak akan ditampilkan. Saya mengunggah semua kode sumber ke github saya, alamat saya
Izinkan saya mengingatkan Anda sebelumnya: karena saya membutuhkan beberapa jam untuk mengusir komponen ini, saya pasti tidak memadai dalam format menulis dan spesifikasi komponen VUE dan belum sepenuhnya mandiri, jadi saya secara sadar mengisi lubang. Saya hanya akan membagikannya di sini.
Tentu saja, Anda juga dapat memodifikasi kode komponen sesuka hati sesuai dengan penggunaan proyek Anda. Bagaimanapun, cukup rumit untuk menerapkan komponen paging besar dan lengkap.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.