Pada dasarnya, kami memilah semua pedoman di situs web resmi: http://vuej.org/guide/index.html di sini kami mengambil aplikasi daftar TODO sebagai contoh untuk merangkai semua yang relevan saja. Semua kode dalam artikel ini ada di github https://github.com/lihongxun945/vue-todolist
Vue instance
Aplikasi Vue dimulai oleh boot instance root vue, dan vue instance dibuat seperti ini:
var vm = vue baru ({// options})Contoh sebenarnya adalah VM di MVVM. Semua atribut dalam data dalam objek konfigurasi yang masuk akan dipasang ke instance. Untuk menghindari konflik penamaan, metode Vue built-in akan dipasang pada contoh dengan properti yang dimulai dengan $.
Contohnya akan melalui siklus hidup berikut dari penciptaan hingga kehancuran:
Selama inisialisasi, kira -kira tiga langkah:
• Mengikat pemantauan data, yaitu pemantauan data
• Menyusun templat
• Masukkan dokumen atau ganti DOM yang sesuai
# Vue sintaks dasar
Ikatan Data
Vue menggunakan sintaks mastache. Sintaks pengikat yang umum digunakan dibagi menjadi beberapa kategori:
• Sintaks mastache, seperti {{data}} {{data | menyaring}}
• Properti pengikat V-bind, seperti v-bind: href, v-bind: kelas
• Acara pengikat V-On, seperti V-On: Klik, V-On: Kirim
Di antara mereka, V-* adalah arahan
contoh:
<Div v-bind: class = "[classa, isb? classb: '']">
Perhitungan atribut
Vue mendukung sintaks perhitungan atribut yang sangat menarik. Anda dapat menentukan bahwa atribut dihitung dengan atribut lain, jadi Anda tidak perlu menggunakan $ watch untuk mengimplementasikannya:
var vm = vue baru ({el: '#example', data: {a: 1}, dihitung: {// a getter b: function () {// `poin ini ke instance vm mengembalikan this.a + 1}}})## Sintaks yang terkait dengan kontrol proses dan daftar termasuk `v-if`,` v-show`, `v-else`,` v-for`
Membentuk
Ikatan data dua arah:
<input type = "Text" V-Model = "Pesan" Placeholder = "Edit Me">
<input type = "centang kotak" id = "jack" value = "jack" v-Model = "checkednames">
## Metode implementasi animasi sama dengan yang bersudut dan bereaksi, dan diimplementasikan dengan menambahkan dan menghapus kelas. # Komponen
Penggunaan dasar komponen
Definisi komponen mencakup dua bagian:
1 Buat Kelas Komponen:
var profile = vue.extend ({template: "<div> lily </div>"});2 Daftar Tagname:
Vue.component ("Me-profile", profil);
Dengan cara ini, kita dapat menggunakan komponen ini melalui tagname:
<Div ID = "TODO"> <My-Profile> </my-profile> <form v-on: kirim = "tambahkan" v-on: kirim.prevent> <input type = "text" v-Model = "input"/> <input type = "kirim" value = 'add'/> </bentuk> ... </div>
Vue.component ("Me-profile", profil); adalah pendaftaran global. Jika hanya digunakan di halaman tertentu, itu dapat didaftarkan secara lokal:
var vm = vue baru ({el: "#todo", komponen: {"my-profile": profile}, ...}Karena instance Vue kami terikat pada elemen TODO, tidak valid jika profil saya ditempatkan di luar elemen ini. Hanya dengan menempatkannya di dalamnya akan diinisialisasi dengan contoh vue ini.
Catatan:
Parameter yang dapat dilewati oleh konstruktor VUE pada dasarnya dapat digunakan pada vue.Extend, tetapi Anda perlu memperhatikan dua parameter EL dan data. Untuk menghindari berbagi objek yang sama antara berbagai contoh, lebih dapat diandalkan untuk selalu mengembalikan objek baru melalui fungsi:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Karena parameternya sama, mereka sebenarnya adalah hal yang sama, tetapi satu adalah komponen dan yang lainnya digunakan untuk memandu Vue untuk memulai.
Catatan tentang template
Karena Vue adalah DOM asli, beberapa tag khusus mungkin tidak memenuhi standar DOM. Misalnya, jika Anda ingin menyesuaikan TR dalam tabel, jika memasukkan komponen saya secara langsung tidak memenuhi spesifikasi, Anda harus menulisnya seperti ini:
<able> <tr is = "my-komponen"> </tr> </ablept>
Alat peraga lewat data
Di VUE, setiap komponen independen dan tidak dapat dan tidak boleh secara langsung mengakses data kelas induk. Jadi, apakah sangat mirip dengan metode React untuk meneruskan data ke subkomponen melalui alat peraga?
Tidak seperti React, subkomponen di Vue perlu menyatakan alat peraga mereka sendiri terlebih dahulu:
var profile = vue.extend ({props: ["name"], template: `<h2> {{name}} daftar todo </h2> <h4> {{name}} adalah gadis yang baik </h4>`});Kemudian kita dapat melewati parameter seperti ini saat menggunakan profil:
<my my-profile name = 'lily'> </my-profile>
Ini untuk melewati parameter melalui literal, sehingga nilai yang ditularkan harus berupa string. Cara lain adalah dengan meneruskan parameter secara dinamis, dan melewati parameter melalui V-bind. Anda dapat mengikat data dalam parameter dua arah atau lulus non-string:
<my my-profile v-bind: name = 'input'> </profile>
Jika v-bind adalah string, itu adalah bidang yang sesuai dalam data komponen induk, misalnya, di atas adalah nilai input yang terikat di kedua arah. Jika itu adalah angka, itu terikat ke angka.
Vue juga dapat secara eksplisit menentukan ikatan data satu arah atau dua arah:
<!-Default, One-Way-Down Binding-> <Child: msg = "ParentMSg"> </dn child> <!-Eksplisit dua arah mengikat-> <child: msg.sync = "parentMsg"> </child> <!-eksplisit satu kali pengikatan-> <msg.once = "parentMsg"> <///ikat satu kali eksplisit-> <msg.once = "parentmsg"> <///ikat satu kali eksplisit-> <msg.once = "parentmsg"> <//childing> eksplisit satu kali mengikat-> <msg.once = "ParentMSG"> <//Childing>
Verifikasi alat peraga
Komponen yang baik harus selalu memverifikasi bahwa parameternya benar terlebih dahulu, dan mungkin juga perlu mengatur nilai default dari beberapa parameter:
var profile = vue.extend ({input: {type: string}});Komunikasi komponen orangtua-anak
Alat peraga yang disebutkan di atas sebenarnya merupakan cara bagi komponen induk untuk menyampaikan pesan ke komponen anak.
Dalam komponen anak ada orang ini. $ Parent dan ini. $ Root yang dapat digunakan untuk metode komponen induk dan instance root. Namun, sekarang kita harus menghindari melakukannya. Karena komponen itu sendiri adalah merangkum logika independen, jika Anda secara langsung mengakses data komponen induk, itu akan menghancurkan enkapsulasi komponen.
Jadi kita masih harus berkomunikasi melalui komponen induk yang melewati alat peraga ke komponen anak.
Tentu saja, alat peraga hanya dapat melakukan panggilan balik. Masalah ini telah dibahas dalam React. Metode React adalah menggunakan alat peraga untuk melewati fungsi panggilan balik ke komponen anak. Sebenarnya, saya tidak terlalu suka cara melewati fungsi panggilan balik ini, saya lebih suka cara acara. Vue Neutronics dapat berkomunikasi dengan komponen induk melalui acara. Mengirim pesan ke komponen induk adalah melalui ini. $ Dispatch, dan mengirim pesan ke komponen anak adalah melalui ini. $ Boardcast. Di sini, pesan dikirim ke semua orang tua dan anak -anak, tetapi begitu panggilan balik dieksekusi, itu akan berhenti kecuali fungsi panggilan balik secara eksplisit mengembalikan true.
Kami membagi daftar TODO sebelumnya menjadi komponen yang berbeda untuk mengimplementasikannya, sehingga kami dapat mengalami cara berkomunikasi dengan komponen dalam dua arah. Kami membagi dua komponen, yaitu daftar dan formulir.
Formulir bertanggung jawab untuk memproses input pengguna dan mengirim pesan Tambah ke komponen induk saat mengirimkan formulir. Kodenya adalah sebagai berikut:
var form = vue.extend ({props: {username: {type: string, default: "tidak disebutkan namanya"}}, data: function () {return {input: "",};}, template: `<h1> {{username} vo-on list toDo} {v-{v-on" v-on. type = "Text" V-Model = "Input"/> <input type = "Submit" value = 'add'/> </form> `, Metode: {add: function () {this. $ dispatch (" add ", this.input);Daftar hanya bertanggung jawab untuk menampilkan daftar dan menangani operasi pemeriksaan pengguna. Setelah menerima pesan Tambah, itu akan menambahkan entri sendiri:
var List = Vue.extend({ template: ` <ul> <li v-for='todo in list'> <label v-bind:class="{ done : todo.done }" > <input type="checkbox" v-model="todo.done"/> {{todo.title}} </label> </li> </ul>`, props: { initList: { Jenis: Array}}, data: function () {return {list: []}}, peristiwa: {add: function (input) {if (! input) return false;Kemudian, karena ini adalah dua komponen, tentu saja, instance vue diperlukan untuk bootstrap startup, instance kami adalah sebagai berikut:
var vm = vue baru ({el: "#todo", komponen: {"TODO-FORM": Form, "TODO-LIST": List}, Events: {add: function (input) {this. $ broadcast ("add", input);}}});Perhatikan bahwa pada kenyataannya, bentuk dan daftar adalah komponen paralel secara logis, sehingga mereka tidak memiliki hubungan ayah-anak, dan mereka semua adalah anak-anak VM. Di sini, VM akan meneruskannya ke daftar setelah menerima pesan formulir.
Kode HTML lebih sederhana:
<Div id = "TODO"> <TODO-FORMUS USERNAME = 'Lily'> </to-form> <todo-list> </todo-list> </div>
Slot
Slot dapat digunakan untuk memasukkan HTML yang diberikan dari komponen induk ke dalam komponen anak. Tidak jelas kapan ini akan dibutuhkan, dan ini terlalu invasif untuk komponen anak.
Komponen sakelar dinamis
Fungsi ini terasa agak berlebihan. Dalam banyak kasus, kita harus beralih melalui kode logis daripada melalui komponen dinamis built-in vue. Namun, sangat nyaman untuk mengimplementasikan fungsi yang mirip dengan switching tab.
Di sini kami menambahkan daftar tentang halaman ke TODO. Jadi pertama -tama kita perlu mengubah VM menjadi komponen, yang disebut TODO, yang merupakan seluruh halaman TODO:
var TODO = VUE.EXTEND ({Templat: `<Div id =" TODO "> <TODO-FORM USERNAME = 'lily'> </to-form> <todo-list> </todo-list> <slot> tidak menunjukkan </slot> </div>`, komponen: {"ToDo-Form": form, "form," {list "{list" {{{{{{{{{{list list ": ini. $ broadcast ("add", input);}}});Faktanya, garis perubahan pertama adalah baris pertama.
Maka kita perlu membuat komponen tentang:
var tentang = vue.extend ({template: `<div id =" tentang "> <p> Tentang daftar todo v0.1.0 </p> <p> Konten di sini </p> </div>`});Berikutnya adalah poin kunci. Kami ingin membuat instance VM, yang bertanggung jawab untuk beralih dua halaman ini:
var vm = vue baru ({el: "body", data: {currentView: "todo"}, komponen: {"TODO": TODO, "TENTANG": TENTANG}});Di sini kami mendefinisikan bidang CurrentView, yang tentu saja dapat menjadi nama apa pun, dan kemudian menggunakan tag komponen khusus untuk beralih komponen:
<Component: is = "currentView"> </component> <ul> <li> <label> <input type = "Radio" name = 'page' value = 'TODO' V-Model = 'CurrentView'> home </label> </li> <li> <label> <input type = "Radio" nama = 'halaman' value = 'tentang Value' view = 'value' value 'value' value 'value' value 'value' value 'value' value 'value' value 'value' value 'value' value 'value'
Ada dua hal yang perlu diperhatikan dalam kode di atas:
• Gunakan komponen tag khusus, dan kemudian gunakan: adalah properti untuk mengganti komponen.
• Radio memodifikasi bidang SurrentView melalui pengikatan dua arah, sehingga Anda dapat beralih setelah mengklik.
Prinsip Implementasi Ikatan Data
Vue menyebut reaktif ikatan dua arah, yang dapat diterjemahkan sebagai pengikatan data yang responsif. Ini diimplementasikan secara internal melalui metode Getter dan Setter yang ditentukan oleh ES5, sehingga tidak mendukung IE8 dan browser berikut. Ada dua hal mudah untuk membuat kesalahan dalam implementasi ini:
• Jika Anda secara langsung menambahkan dan menghapus atribut pada data, tidak mungkin untuk dideteksi. Secara umum, penghapusan tidak akan mungkin, tetapi dapat ditambahkan secara dinamis. Pada saat ini, itu harus ditambahkan melalui VM. $ Set ("name", nilai).
• Perubahan di dalam objek tidak dapat dideteksi, yaitu, mereka hanya dapat mendeteksi perubahan dalam properti data. Jika data.a adalah objek, maka data.AB = 1 Perubahan ini tidak dapat dideteksi. Dalam hal ini, Anda harus membuat objek baru dan menetapkannya ke data.
Mekanisme Pembaruan Asinkron
Pembaruan Vue ke DOM asinkron! Asynchronous ini dilakukan dalam antrian asinkron, tetapi antrian asinkron ini akan dieksekusi dalam loop acara saat ini. Oleh karena itu, jika Anda memodifikasi data, adalah salah untuk segera pergi ke DOM untuk melakukan operasi kueri. Pada saat ini, DOM belum diperbarui. Cara yang benar adalah melakukan ini:
vm.msg = 'pesan baru' // ubah datavm. $ el.textcontent === 'pesan baru' // falsevue.nexttick (function () {vm. $ el.textcontent === 'pesan baru' // true})Atau ini:
vm. $ nextTick (function () {this. $ el.textContent === 'Pesan baru' // true})Butuh waktu lama untuk membaca komponen. Inilah poin lain: Petunjuk
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
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.