Vue.js adalah perpustakaan untuk membangun antarmuka web berbasis data. Tujuan Vue.js adalah untuk mengimplementasikan pengikatan data yang responsif dan komponen tampilan gabungan melalui API paling sederhana. (Ini adalah penjelasan resmi!)
Editor tidak pernah menggunakan AngularJS, juga tidak ada reaksi. Saya tidak bisa menjelaskan perbedaan dalam ketiganya secara rinci. Jika Anda ingin tahu, ada analisis resmi. Silakan klik di sini untuk melihatnya.
Editor telah terlibat dalam pengembangan front-end selama lebih dari setahun. Pada awalnya, ada terlalu banyak teknologi dalam pengembangan front-end. Editor tidak berdaya dan tidak dapat memperhitungkan. Setelah memahami, ia memilih untuk mempelajari jalur pembelajaran pembelajaran dari merger dan jQuery dasar JS. Editor menggunakan Vue.js karena kebutuhan bisnis. Mengapa Anda tidak memilih AngularJS? Faktanya, Anda tidak dapat meninggalkan jQuery pada saat yang sama. Vue.js dan jQuery bisa sangat kompatibel. Karena proyek ini, editor telah bekerja lembur untuk waktu yang lama dan terus belajar untuk menghindari peningkatan waktu pengembangan proyek. Tanpa basa -basi lagi, mari kita mulai beberapa ringkasan Vue Learning editor. Jika Anda tidak menulis dengan baik, jangan terbiasa dengan itu. Menulis artikel selalu menjadi kelemahan saya. . . .
Berikut adalah contoh vue, sebagai rantai induk
Komponen anak dapat diloloskan ini. Instance root dapat diakses menggunakan this.root. Orang tua memiliki array ini.Children, dan semua elemennya; Tentu saja, dalam proyek, komponen kami tidak dapat memiliki hanya satu atau dua. Ketika ada terlalu banyak komponen, sulit bagi kita untuk mengingat lokasi komponen pada anak -anak. Kami dapat menggunakan arahan V-REF untuk membuat kait untuk komponen kami. Kait ini adalah indeks ketika komponen kami yang lain mengakses komponen.
// Ini adalah salah satu komponen saya <msg v-ref: msgs> </sg> // saat ini, kami telah menetapkan indeks msg untuk komponen msg ini // kami dapat mengakses komponen var vm = vue baru ({}); var children = vm. $ refs.msgs // akses komponen anak kami dengan cara ini // v-ref adalah array atau objek, yang merupakan kumpulan komponen yang kami buat semua pengait ref.Di sini, saya akan menunjukkan gambar dan melihat konten yang berkaitan dengan orang tua, anak -anak, dan $ refs (tampaknya gambarnya agak buram dan itu tidak akan menjadi gambaran yang dinamis. Ini memalukan dan tidak dapat melihat dengan jelas. Anda dapat membuat demo dan mencetaknya!)
Meskipun kita dapat secara langsung mengakses komponen di seluruh contoh dengan cara ini, tidak disarankan untuk melakukannya, karena sangat buruk bagi anak -anak untuk secara langsung memodifikasi keadaan komponen induk, yang akan membuat komponen orang tua dan anak digabungkan dengan ketat. Idealnya, setiap komponen hanya dapat memodifikasi keadaannya sendiri karena ruang lingkup masing -masing komponen independen;
Dalam hal ini, Vue juga memberi kami acara khusus
Gunakan $ Dispatch () untuk mengirim acara, dan acara menggelembung di sepanjang rantai induk;
Gunakan $ siaran () untuk menyiarkan acara, dan acara ditransmisikan ke semua keturunan.
Ini terlihat agak abstrak, lebih mudah dipahami dengan contoh
// $ dispatch () Bubble Case <!-Contoh-> <div id = "app"> <!-Component Communication 1-> <section> <div> <label for = ""> data msg: </label> {{msg}} </div> <!-subkomponen-> <sgg> </msg> </bagian div> </div> </div> msg "</msg> </msg> </div> </div> phyp> msg" </msg> </msg> </bagian div> </div> msg "</msg> </msg> </bagian> </div> fix>" msg "</msg> </div> </div> phyp> msg" </msg> </bagian> </div> phyp> "msg" </msg> </bagian> </div> pict> V-Model = "msg"> <a href = "javascript :;" @click = "add_data"> Tambahkan </a> </div> </lemplate> <script> vue.component ('msg', {// gula sintaks digunakan untuk mendaftarkan komponen secara langsung, dan template yang sederhana dan shortcut:}} {}} {function {{msg: {{msg: '{msg' {function {msg '{msg' {msg '{msg' {msge. Event, metode $ dispatch () akan dipicu; add_msg adalah metode yang dibuat oleh komponen induk untuk mendengarkan komponen anak, yang berarti memberi tahu komponen induknya metode ini, saya telah memperbarui data, par_msg adalah data yang saya perbarui! ini. Parent.add (par_msg); // Metode ini adalah untuk secara langsung mengoperasikan komponen induk ini. $ Dispatch ('add_msg', par_msg); peristiwa yang mendengarkan subkomponen respons yang sesuai 'add_msg': function (msg) {// add_msg adalah metode yang digunakan untuk mendengarkan subkomponen.Setelah membaca kode ini, saya percaya semua orang tahu penggunaan $ dispatch (). Bahkan, ada dua parameter di dalamnya. Parameter pertama adalah bahwa komponen induk mendengarkan nama metode dalam objek acara komponen anak. Keduanya harus konsisten; Parameter kedua adalah data yang diperbarui oleh komponen anak, yang juga diteruskan ke data untuk diperbarui secara serempak ke komponen induk. Kemudian komponen induk menggunakan parameter ini untuk melakukan operasi yang sesuai.
// Penggunaan metode $ siaran () sama dengan $ dispatch (). Perbedaannya adalah bahwa objek peristiwa dibuat dalam komponen anak, dan fungsi yang dipicu pada komponen induk sebaliknya. Apa yang ingin kami katakan di sini adalah bahwa jika data komponen anak sepenuhnya tergantung pada data komponen induk, maka tidak perlu menggunakan metode pengiriman acara umum. Anda hanya perlu mendapatkan data komponen induk melalui alat peraga dan mengikatnya ke komponen anak.
<!-Komunikasi Komponen 2 $ Broadcast () Metode-> <section> <h3> Sumber data yang ditambahkan oleh komponen induk: </h3> <div> <label for = ""> id: </label> <ver> <input type = "Text" V-Model = "ID"> </Div> <Div> <Div> <Div> <Label For = "> Label: </ID"> </Div> </Div> <Div> <Div> <Label untuk = ""> Label: </ID "> </Div> </Div> <Div> <label for =" "> label: </id"> </Div> </Div> <Div> <label for = ""> label: </id "> </Div> </Div> <Div> <label for =" "> label: </ID"> </DIV> </DIV> <DIV> <Label for = ""> Label: V-Model = "Name"> </div> </div> <v div> <label for = ""> host: </label> <v div> <input type = "text" v-Model = "inst"> </div> </div> <Div> <label for = ""> host: </label> <Div> <input type = "Text" V-Model = " for = ""> </label> <verv> <a href = "javascript :;" @click = "add_table"> Tambahkan </a> </div> </div> <h3> Tabel berikut adalah Informasi Komponen Anak: </h3> <!-Bind data Table_Data komponen induk ke komponen anak-> <broadcase: data = "table_data"> </broadcase> </section> ID = "BroadCase"> <verv> <abl> <Table> <Tread> <tr> <th> id </th> <th> nama </th> <th> hobi </th> </tr> </tbody> <tr v-for = "daftar dalam data"> <td> {{list.id}} </td> <td> {{{{{{{{{td> <td> <td> <td> <td> <td> <td> <td> list.inst}} </td> </tr> </tbody> </boable> </div> </emplate> <script> vue.component ('broadcase', {// Ini adalah gula sintaksis yang digunakan untuk mendaftarkan komponen, dan proponik yang dapat digunakan ke PLAY: 'PARA -PARACEN:' DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/DATA,/[DATA '],/Data,/Data,/Data,/Data,/Data,/Data,/Data,/ data. Jika data perlu memiliki nilai default, Anda perlu mendefinisikan data dalam data: function () {return {msg: 'abc'}}, peristiwa: {// ini hanya contoh, komponen anak mendengarkan perubahan data dari {function: {{msg) {{{msg) {{{msg) {{msg) '#app', data: {table_data: [{{id: 1, name: 'gjei', inst: 'gjweir'}, {id: 2, name: 'jiuyer', inst: 'oiUyt'}]}, Metode: {add_table: function () {var set = {ini: ini. this.inst}; this.table_data.push (set); // this. $ broadcast ('test', set); // di sini, ini hanya contoh sintaksis ini.id = ''; this.name = ''; this.inst = '';Anda dapat mengklik di sini untuk menguji dua contoh yang disebutkan di atas. File tersebut telah diunggah ke Demo Komunikasi Komponen Orangtua Ruang Pribadi Vue
Ketika saya selesai menulis ini, saya melihat ke belakang dan melihat bahwa konten yang saya tulis sepertinya agak berantakan, yang benar -benar malu! Saya berpikir untuk menulis blog dan membangun perpustakaan catatan saya sendiri sejak lama, tetapi ketika saya mencoba menulisnya sebelumnya, saya benar -benar tidak bisa melakukannya. Baru -baru ini, saya telah memutuskan untuk bersikeras menulis tidak peduli bagaimana saya menulisnya. Bagaimana jika gaya tulisan saya tiba -tiba menjadi lebih baik suatu hari nanti!
Bahkan, aplikasi tidak terlalu sulit. Ini sebenarnya menyediakan pemantauan antarmuka API yang sesuai. Cara mengoperasikan dan mengubah aplikasi proyek yang sebenarnya masih perlu ditulis sendiri. Kuncinya adalah meningkatkan level JS kami. Lagi pula, ada lebih banyak aplikasi web yang lebih kompleks! Saya berharap bahwa siswa yang menyukai front-end dapat saling mendorong di jalan menuju JS.