memperkenalkan
vue.js adalah perpustakaan yang digunakan untuk membangun antarmuka aplikasi web
Secara teknis, Vue.js berfokus pada lapisan ViewModel dari mode MVVM, yang menghubungkan tampilan dan model pengikatan data dalam dua cara. Operasi DOM aktual dan format output diabstraksi menjadi instruksi (arahan) dan filter (filter)
Di bidang filsafat, cobalah untuk membuat API pengikat data MVVM sesederhana mungkin. Modularitas dan komposabilitas juga merupakan pertimbangan desain yang penting. Vue bukan kerangka kerja yang komprehensif, dirancang untuk menjadi sederhana dan fleksibel. Anda dapat menggunakannya untuk dengan cepat membuat prototipe, atau mencampur dan mencocokkan dengan pustaka lain untuk menentukan tumpukan front-end.
Vue. JS API mengacu pada AngularJS, KnockoutJs Ractive.js Rivets.js. Terlepas dari kesamaan, saya percaya Vue.js memberikan cara yang berharga untuk mendapatkan nilai Anda dalam beberapa kerangka kerja yang ada sekarang
Bahkan jika Anda sudah terbiasa dengan beberapa istilah ini, disarankan agar Anda melewati ikhtisar konsep berikut, karena konsep -konsep istilah ini mungkin berbeda di bawah vue.js
Tinjauan Konsep
ViewModel
Objek, menyinkronkan model dan tampilan. Di vue.js, viewmodels adalah konstruktor vue instantiated atau subclass
var vm = vue baru ({ / * option * /})Ini adalah objek utama yang akan Anda berinteraksi sebagai pengembang yang menggunakan Vue.js. Untuk detail lebih lanjut, lihat Kelas: Vue.
Melihat
HTML/DOM yang sebenarnya dilihat oleh pengguna
vm. $ el // tampilan
Saat menggunakan vue.js, Anda hampir tidak akan menyentuh operasi DOM kecuali untuk instruksi khusus Anda sendiri. Ketika data diperbarui, pembaruan tampilan akan dipicu secara otomatis. Pembaruan tampilan dapat dicapai secara akurat ke setiap node TestNode. Mereka juga batched dan dieksekusi secara tidak sinkron untuk memberikan kinerja yang lebih baik.
Model
Ini adalah objek JavaScript yang sedikit dimodifikasi
VM. $ Data // Model
Di vue.js, model ini hanyalah objek JavaScript sederhana, objek data, Anda dapat memanipulasi properti mereka dan melihat model, mengamati mereka, dan kemudian mendapatkan pemberitahuan untuk diubah. Vue.js menggunakan Getter/Setter ES5 untuk mengonversi properti dalam objek data HU, yang memungkinkan operasi langsung tanpa pemeriksaan kotor.
Objek data akan memiliki mutasi pada waktu yang tepat, sehingga memodifikasi itu sama dengan memodifikasi VM. $ Data dengan referensi. Ini juga memfasilitasi beberapa contoh ViewModel untuk mengamati bagian data yang sama.
Untuk detail teknis, silakan merujuk ke Opsi Instantiasi: Data.
Arahan
Atribut HTML pribadi memberitahu vue.js untuk melakukan beberapa pemrosesan tentang DOM
<Div v-text = "message"> </div>
Elemen Div di sini memiliki instruksi v-text, dan nilainya adalah pesan. Itu berarti memberi tahu vue.js untuk menjaga konten simpul div ini disinkronkan dengan atribut pesan di viewmode
Instruksi dapat merangkum operasi DOM apa pun. Misalnya, V-ATTR beroperasi pada elemen atribut, V-Repeat mengkloning elemen berdasarkan array, V-on tambahan mendengarkan acara, kami akan membahasnya nanti.
Binding kumis
Anda juga dapat menggunakan binding gaya kumis, dalam teks dan properti. Mereka diterjemahkan ke dalam arahan V-Text V-ATTR. Misalnya:
<Div id = "Person-{{id}}"> halo {{name}}! </Div>Meskipun nyaman, ada beberapa hal yang perlu Anda perhatikan:
Jika atribut SRC gambar diatur, permintaan HTTP akan dikirim, jadi ketika templat parsing untuk pertama kalinya, lebih baik menggunakan V-ATTR
Saat parsing HTML, Internet Explorer akan menghapus atribut gaya internal yang tidak valid, jadi jika kami ingin mendukung IE inline inline CSS, saya selalu menggunakan V-style
Di dalam V-HTML, Anda dapat menggunakan tiga kawat gigi untuk menangani HTML yang tidak dibahas, tetapi ini akan menyebabkan serangan XSS potensial dan dapat membuka jendela. Oleh karena itu, disarankan untuk melakukan ini hanya ketika data benar -benar aman, atau membersihkan HTML yang tidak dipercaya melalui filter pipa khusus
Filter
Data mentah ini dapat diproses menggunakan fungsi sebelum memperbarui tampilan. Mereka menggunakan arahan "pipa" atau mengikat:
<verv> {{pesan | Capitize}} </Div>Sekarang sebelum konten teks div diperbarui, nilai pesan ini akan diproses melalui fungsi kapitalisasi. Untuk detailnya, silakan lihat filter secara mendalam.
Komponen
Di vue.js, komponen adalah konstruktor model tampilan sederhana yang terdaftar dengan vue.component (id, konstruktor). Dengan ID terkait, arahan komponen V untuk templat model tampilan lain dapat bersarang. Mekanisme sederhana ini membuat model tampilan yang dinyatakan digunakan kembali dan dikombinasikan dengan cara yang mirip dengan komponen web tanpa perlu browser terbaru atau polyfill berat. Dengan memecah aplikasi menjadi komponen yang lebih kecil, hasilnya adalah basis kode yang sangat terpisah dan dapat dipelihara. Untuk detail lebih lanjut, lihat Menyusun ViewModels.
Contoh cepat
<div id = "demo"> <h1> {{title | Uppercase}} </h1> <ul> <Li V-Repeat = "Todos" V-On = "Klik: Done =! Done"> {{Content}} </li> </ul> </div> var demo = vue baru ({el: '#demo', data: {title: 'todos', todos: [{done: true, content: 'pelajari javascript'}, {selesai: false, konten: 'pelajari vue.js'}]}}))Terjemahan kasar, tolong tunjukkan kesalahan apa pun