Apa itu komponen: Komponen adalah salah satu fitur paling kuat dari Vue.Js. Komponen dapat memperluas elemen HTML dan merangkum kode yang dapat digunakan kembali. Pada tingkat yang lebih tinggi, komponen adalah elemen khusus, dan kompiler Vue.js menambahkan fitur khusus. Dalam beberapa kasus, komponen juga dapat dalam bentuk elemen HTML asli, diperluas dengan fitur IS.
Bagaimana cara mendaftarkan komponen?
Anda perlu membuat komponen menggunakan metode VUE.EXTEND, dan kemudian mendaftarkan komponen menggunakan metode VUE.Component. Format metode VUE.Extend adalah sebagai berikut:
var myComponent = vue.extend ({// options ... Saya akan memperkenalkannya nanti})Jika Anda ingin menggunakan komponen yang dibuat ini di tempat lain, Anda harus menamainya:
Vue.component ('my-component', myComponent)
Setelah penamaan, Anda dapat menggunakan nama komponen ini di tag HTML, seperti menggunakan elemen DOM. Mari kita lihat contoh lengkap pendaftaran dan penggunaan komponen.
Kode HTML:
<Div ID = "Contoh"> <my-komponen> </my-komponen> </div>
Kode JS:
// Tentukan var myComponent = vue.extend ({template: '<verv> Komponen khusus! </div>'}) // daftarkan vue.component ('my-component', mycomponent) // Buat instance root baru vue ({el: '#example'})Hasil output:
<div id = "example"> <div> Komponen khusus! </Div> </div
Komponen bersarang
Komponen itu sendiri juga dapat berisi komponen. Komponen induk berikut berisi komponen bernama komponen anak, tetapi komponen ini hanya dapat digunakan oleh komponen induk:
var child = vue.extend ({template: '<div> Komponen khusus! </div>'}); var parent = vue.extend ({template: '<verv> Parent Component: <scomponent child-component> </child-component> </div>, komponen: {' component component ': child}};Proses definisi di atas cukup rumit, dan Anda tidak perlu memanggil vue.
// Perpanjang dan daftarkan vue.component ('my-component', {template: '<div> Komponen khusus! </div>'}) // Ini juga dimungkinkan dengan pendaftaran lokal var parent = vue.extend ({components: {'my-component': {template: '<Div> Komponen khusus! </Div>Komponen Dinamis
Beberapa komponen dapat menggunakan titik pemasangan yang sama dan kemudian secara dinamis beralih di antara mereka. Gunakan elemen <Component> yang dicadangkan untuk mengikat secara dinamis ke properti ITS. Kolom di bawah ini memiliki tiga komponen rumah, posting, dan arsip yang diinstal di bawah instance Vue yang sama, dan secara dinamis beralih tampilan komponen melalui fitur CurrentView.
Kode HTML:
<Div ID = "Dynamic"> <tombol id = "home"> home </button> <tombol id = "post"> Posting </button> <tombol id = "arsip"> arsip </button> <br> <komponen: is = "currentView"> </component> </div>
Kode JS:
var vue = vue baru ({el: "#dynamic", data: {currentView: "home"}, komponen: {home: {template: "home"}, postingan: {template: "post document", {{home -funche "(archive" (archive "(function {vieve. "home";}; document.geteLementById ("post"). onclick = function () {vue.currentView = "post";}; document.geteLementById ("arsip"). onclick = function () {vue.currentView = "arsip";};Komponen dan v-for
<my component v-for = "item in item"> </spomponent>
Data tidak dapat diteruskan ke komponen karena ruang lingkup komponen independen. Untuk meneruskan data ke komponen, alat peraga harus digunakan:
<komponen saya
v-for = "item dalam item"
: item = "item"
: index = "$ index">
</spomponent>
Alasan mengapa item tidak secara otomatis disuntikkan ke dalam komponen adalah karena ini menyebabkan komponen ditambah dengan rapat ke V-for saat ini. Secara eksplisit menyatakan dari mana data berasal dan dapat digunakan kembali di tempat lain untuk komponen.
Prinsip responsif yang mendalam
Ketika sebuah komponen mengikat data, bagaimana pengikatan dapat efektif dan dapat secara dinamis memodifikasi dan menambahkan atribut? Lihatlah prinsip -prinsip berikut PENDAHULUAN.
Cara Melacak Perubahan: Lewati objek yang berbeda ke instance VUE sebagai opsi untuk data, Vue.js akan melintasi propertinya dan mengonversinya menjadi Getter/Setter dengan objek.Defineproperty. Ini adalah fitur ES5, dan semua vue.js tidak mendukung IE8 atau lebih rendah.
Setiap instruksi/pengikatan data dalam templat memiliki objek pengamat yang sesuai, yang mencatat atribut sebagai dependensi selama proses perhitungan. Setelah itu, ketika setter dependen dipanggil, penghitung ulang pengamat akan dipicu. Prosesnya adalah sebagai berikut:
Ubah masalah deteksi: vue.js tidak dapat mendeteksi penambahan atau penghapusan sifat objek. Properti harus menggunakan data untuk memungkinkan vue.js untuk mengubahnya menjadi mode getter/setter agar responsif. Misalnya:
var data = {a: 1}; var vm = vue baru ({data: data}); // `vm.a` dan` data.a` sekarang responsif vm.b = 2 // `vm.b` tidak responsif data.b = 2 //` data.b` tidak responsifNamun, ada cara untuk menambahkan atribut setelah pembuatan instance dan membuatnya sesuai. Anda dapat menggunakan metode instance set (tombol, nilai):
vm. set ('b', 2)
// `vm.b` dan` data.b` sekarang responsif
Untuk objek normal, Anda dapat menggunakan metode global: vue.set (objek, kunci, nilai):
Vue.set (data, 'c', 3)
// `vm.c` dan` data.c` sekarang responsif
Inisialisasi Data: Meskipun Vue.js memberikan penambahan dinamis dari properti yang sesuai, disarankan untuk mendeklarasikan semua properti yang sesuai pada objek data.
Jangan lakukan ini:
var vm = new vue ({template: '<verv> {{msg}} </div>'}) // Kemudian tambahkan `msg`vm. $ set ('msg', 'halo!')Ini harus dilakukan:
var vm = vue baru ({data: {// mendeklarasikan `msg` msg: ''}, template: '<verv> {{msg}} </div>'}) // lalu atur` msg`vm.msg = 'hello!'Komponen case lengkap
Contoh -contoh yang diperkenalkan di bawah ini mengimplementasikan fungsi jendela modal dan kode relatif sederhana.
Kode HTML:
<!-Menerapkan skrip untuk mendefinisikan templat-> <script type = "x/template" id = "modal-template"> <!-apakah template ditampilkan diatur melalui v-show = "show", transisi menetapkan efek animasi-> <div v-show = "show" transition = "modal"> <Div> <v> <! name="header"> default header </slot> </div> <div> <!--slot is equivalent to body placeholder--> <slot name="body"> default body </slot> </div> <div> <!--slot is equivalent to footer placeholder--> <slot name="footer"> default footer </slot> <button @click="show = false">OK</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <div id = "app"> <!-Atur atribut vue instance saat mengklik tombol. Nilai showmodal benar-> <tombol id = "show-modal" @click = "showmodal = true"> Tampilkan modal </button> <!-Modal adalah plug-in khusus. Fitur plug-in menunjukkan mengikat fitur showmodal dari vue instance-> <modal: show.sync = "showmodal"> <!-ganti konten slot di plugin modal dan kemudian menjadi header-> <h3 slot = "header"> custom header </h3> </modal> </div>
Kode JS:
// Tentukan plug-in dengan nama modalvue.component ("Modal", {// Templat plug-in terikat pada konten elemen DOM dengan ID dari Templat Modal-Template: "#Modal-Template", Props: {// Jenis Boolean Tampilkan: {Tipe: Boolean, Diperlukan, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, True, {TYPE: BOOLEAN, BERLINGGI // Instantiate vue, ruang lingkup berada di bawah ID elemen aplikasi, vue baru ({el: "#app", data: {// nilai defaultnya false showmodal: false}});Kode CSS:
.modal-mask {position: diperbaiki; z-index: 9998; TOP: 0; Kiri: 0; Lebar: 100%; Tinggi: 100%; latar belakang-warna: rgba (0, 0, 0, .5); Tampilan: Tabel; transisi: opacity .3s kemudahan;}. Modal-wrapper {display: Table-sel; Vertical-Align: Middle;}. Modal-Container {width: 300px; margin: 0px auto; padding: 20px 30px; Latar Belakang-Color: #FFF; Border-Radius: 2px; Kotak-Shadow: 0 2px 8px RGBA (0, 0, 0, .33); Transisi: Semua .3 Kemudahan; Font-Family: Helvetica, Arial, sans-serif;}. Modal-header h3 {margin-top: 0; Warna: #42B983;}. Modal-Body {margin: 20px 0;}. Modal-default-tombol {float: right;}/** Gaya berikut ini diterapkan secara otomatis dengan elemen dengan* v-transisi = "Modal" ketika visibilitas mereka ditransokkan* oleh vue.js. Styles.*/. Modal-enter, .modal-leave {opacity: 0;}. Modal-enter .modal-container, .modal-leave .modal-container {-webkit-transform: skala (1.1); Transform: Skala (1.1);}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.
Karena saya belum menggunakan fungsi komponen secara mendalam dalam proyek, saya tidak memiliki pemahaman yang mendalam tentang komponen, dan pengantar relatif dangkal. Terima kasih atas bacaan Anda.