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.
Selanjutnya, saya akan memperkenalkan kepada Anda pengetahuan dasar tentang pengikatan satu arah, ikatan dua arah, daftar rendering, dan fungsi respons. Detail spesifiknya adalah sebagai berikut:
(I) Ikatan satu arah
<Div id = "app"> {{message}} </div> <script> vue baru ({el: '#app', data: {pesan: 'hello vue.js!'}}) </script>①e harus berarti mengikat, mengikat id = tag aplikasi
Itu juga dapat diubah menjadi berikut:
<div> {{pesan}} </div>EL: '.App',
Sama efektifnya.
Tetapi jika ada beberapa, itu hanya akan berfungsi untuk yang pertama:
<verv> {{message}} </div> <div> {{message}} </div> halo vue.js! {{pesan}}② Variabel pesan dalam data mewakili nilai {{pesan}
(2) Ikatan dua arah
<Div id = "app"> {{message}} <br/> <input v-model = "pesan"/> </div> <script> vue baru ({el: '#app', data: {pesan: 'halo vue.js!'}}) </script>Efeknya adalah:
Nilai Nilai awal ada di kotak input input, dan nilai adalah nilai atribut pesan dalam data;
② Memodifikasi nilai kotak input dapat mempengaruhi nilai luar;
(Iii) Fungsi nilai pengembalian
<Div id = "app"> {{message ()}} <br/> <input v-model = "message ()"/> </div> <script> vue baru ({el: '#app', data: {message: function () {return 'hello vue.js!';}}}) </script>Memengaruhi:
① Nilai output juga merupakan nilai pengembalian pesan;
② Kekurangan: Kehilangan ikatan dua arah!
(Iv) daftar rendering
<Div id = "app"> <ul> <li v-for = "Daftar di todos"> {{list.text}} </li> </ul> </div> <script> vue baru ({el: '#app', {{{{{{{{{{{{{{{{"{{{{{{{{{{{{{{{{{{", {{{{{{{{{{{1.Daftar di v-for mirip dengan i in in
Sendiri,
① Daftar di Todos dapat dipahami sebagai daftar di Todos
② Kemudian pahami daftar.
Lalu di mana tag V-for ini, disalin beberapa kali di dalamnya.
(V) memproses input pengguna
<Div id = "app"> <input v-Model = "pesan"> <input type = "tombol" value = "value +1" v-on: click = "add"/> <input type = "Tombol" value = "value-1" v-on: click = "minus"/> <input type = "value" value = "reset"/v-on: click = "reset"/reset/{value "value" value = "reset"/> v-on: click = "{{vo value" value/{vo. data: {pesan: 1}, Metode: {add: function () {this.message ++;Memengaruhi:
① Untuk nilai kotak input, klik tombol Tambah sekali, dan nilainya akan +1;
② Jika tidak dapat ditambahkan, hasilnya akan dikembalikan seperti jika ekspresi normal ditambahkan secara tidak benar, seperti NAN;
Nilai Nilai pesan dalam data adalah nilai awal;
Metode -metode ini adalah kumpulan fungsi, dipisahkan oleh koma;
⑤ Saat memperoleh nilai, tambahkan ini, misalnya, ini .message mendapatkan nilai pesan.
(Vi) multifungsi
<Div id = "app"> <input v-Model = "val" v-on: keypress.enter = "addTolist"> <ul> <li v-for = "val in values"> {{val.val}} <input type = "value =" hapus "v-on: click =" removelist ($ index) " 'penpen ', {val: "1", nilai: []}, metode: {addTolist: function () {var val = parseInt (this.val.trim ()); String (Val + 1);Memengaruhi:
① Nilai dalam kotak input awal adalah 1;
② Tekan ENTER di dalam kotak Input untuk mengonversi konten kotak input menjadi nomor dan menambahkannya ke daftar. Angka yang dikonversi dan tombol Hapus dalam daftar, dan nilai di kotak input akan diubah ke nilai yang dikonversi menjadi angka dan menambahkan satu.
Seperti yang ditunjukkan pada gambar:
③ Penambahannya menggunakan pengikatan dua arah, dorong nilai input ke array nilai dalam data, dan kemudian menggunakan efek dari daftar rendering untuk mengeluarkan beberapa baris nilai.
④dari tag tombol, nama parameter fungsi diberikan parameter, yang merupakan indeks baris, dan nama parameter adalah $ index
⑤ Dalam tag, nama fungsi fungsi yang dipicu dapat ditambahkan dengan kurung atau tanpa tanda kurung. Pengukuran aktual tampaknya tidak berpengaruh.
(7) Tag dan Ringkasan API (1)
① {{nama variabel}}
Mewakili variabel terikat, ini. Nama variabel diperlukan saat menelepon
② V-Model = "Variabel"
Gunakan pengikatan dua arah. Jika tidak ada tipe yang ditambahkan ke input, itu adalah teks. Jika tipe ditambahkan, itu adalah tipe, misalnya:
<input v-model = "date" type = "date"/> <li> {{date}} </li>Nilai kotak input tipe tanggal akan diikat bersama dengan konten yang ditampilkan oleh tag LI.
③ V-on: klik = "Nama Fungsi"
Fungsi ini dipicu saat diklik, salah satu () dapat ditambahkan atau tidak. $ indeks digunakan sebagai parameter untuk mewakili indeks, dan nilai indeks dimulai dari 0.
④ V-for
Setelah konten array diperbarui, ikatan dua arah akan diperbarui secara real time, seperti halnya model-V;
Mirip dengan dalam pernyataan, ini digunakan berkali -kali
⑤ V-On: Acara
Yaitu, acara yang dipicu, ada klik (klik), keypress (klik)
Peristiwa dapat diikuti oleh hal -hal yang lebih spesifik, seperti KeyPress.Enter adalah pengembalian carriage, keypress.space adalah ruang, dll.
Lebih banyak kebutuhan untuk dilihat
⑥ Vue baru
Dengan baru, instance vue, kemudian berikan objek sebagai parameter untuk contoh ini;
di dalam:
El berarti templat terikat (hanya akan cocok dengan terikat pertama)
Data mewakili data, yang dapat digunakan secara langsung, misalnya dalam V-Model atau {{variable name}}
metode
⑦ Variabel panggilan di dalam fungsi
Dengan nama ini. Misalnya, misalnya:
Data: {val: "1", nilai: []}, metode: {addTolist: function () {console.log (this.val);This.val di sini adalah data.val di atas, yang juga {{val}} dalam html, dan juga v-Model = "val", tetapi tidak
<li v-for = "val in values"> {{val.val}} <input type = "tombol" value = "delete" v-on: click = "removelist ($ index)"/> </li>Adapun alasannya, saya pribadi berpikir bahwa Val di sini berada dalam lingkup V-For, sehingga Val in Val in Values memiliki prioritas yang lebih tinggi dalam rantai ruang lingkup.
Di atas adalah penjelasan terperinci tentang tutorial pengantar pertama Vuejs yang diperkenalkan kepada Anda oleh editor (pengikatan satu arah, pengikatan dua arah, rendering daftar, fungsi respons). Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!