Direktif
Meskipun tampaknya bahwa meskipun mirip dengan definisi dalam sudut, arahan adalah perluasan fungsi DOM, arahan Vue jauh lebih lemah. Karena komponen VUE sebenarnya berisi operasi pada DOM, sebagian besar waktu ketika kami menulis komponen umum, itu adalah komponen daripada arahan, dan dalam sudut, kami menulis komponen umum, biasanya merupakan arahan.
Jadi saya mengatakan bahwa arahan Vue jauh lebih lemah daripada sudut, atau bisa dikatakan lebih murni. Ini adalah perluasan fungsi DOM, bukan untuk merangkum logika yang terkait dengan DOM. Jika Anda tertarik, Anda dapat memahami dengan membandingkan dua perpustakaan UI ini:
• Vux https://github.com/airyland/vux
• Angular Bootstrap https://github.com/angular-ui/bootstrap
Sebagai perbandingan, kami akan menemukan bahwa di Vue, kami benar -benar merangkum komponen umum (pada kenyataannya, apakah itu umum atau tidak) adalah komponen, tetapi dalam sudut itu adalah arahan, karena pengontrol dalam sudut hanya dapat membuat ruang lingkup $ scope. Ini dapat dengan mudah dipikirkan di Vue Directive = Angular Directive + Controller. Seperti disebutkan sebelumnya, banyak desain Vue mirip dengan Angular2. Petunjuk di Vue pada dasarnya dapat setara dengan arahan di Angular2, tetapi jangan bingung dengan arahan dalam sudut.
Untuk menghindari menyesatkan, arahan sudut tidak akan lagi dibandingkan nanti.
siklus hidup
Siklus hidup dibagi menjadi tiga langkah:
• Bind memicu saat terikat pada elemen DOM untuk pertama kalinya
• Ikatan pembaruan akan dipicu segera setelah selesai, dan akan dipicu setiap kali parameter diperbarui di masa mendatang.
• Mengikat pemicu saat unbinding dan elemen DOM tidak ditutup
API sangat ringkas. . .
Di antara mereka, pembaruan adalah hal yang paling penting, yaitu, ketika Petunjuk menerima pembaruan nilai, kode yang sesuai akan dieksekusi. Parameter yang diterima oleh fungsi pembaruan adalah nilai yang dilewati oleh pengguna melalui ATTR.
Mari kita terapkan arahan sederhana di bawah ini, yang digunakan untuk memverifikasi input konten dengan daftar TODO (verifikasi bentuk). Struktur dasar arahan adalah sebagai berikut:
Vue.directive ("minlength", {bind: function () {}, update: function (value) {}, unbind: function () {}});Kemudian, kita perlu melakukan verifikasi ketika pengguna input. Di sini kami menerapkan verifikasi MinLength sederhana, kodenya adalah sebagai berikut:
Vue.directive ("MinLength", {bind: function () {var self = this; var el = this.el; el.addeventListener ("keyDown", function (e) {if (e.keycode === 13) {if (el.value.length <selfselelf.minlength) {e.preventDefent = el.parentnode.querySelector ("Tombol, [type = 'Submit']"); fungsi() { }});Logika dasar mengikat peristiwa selama tahap BIND, dan kemudian membuat penilaian berdasarkan nilai MinLength yang dilewati selama pembaruan.
Saat ini, Petunjuk harus mencapai fungsi yang sama, dan tentu saja masih ada banyak detail penggunaan, jadi saya tidak akan membahas detailnya. Petunjuk bukanlah bagian yang sangat penting dalam Vue. Orang biasanya menulis komponen saat menulis kode.
Filter dan mixin terlihat relatif sederhana, lewati.
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.