Template Vue.js diimplementasikan berdasarkan DOM. Ini berarti bahwa semua template Vue.js parsable dan valid HTML, dan ditingkatkan oleh beberapa fitur khusus. Oleh karena itu, templat VUE secara fundamental berbeda dari templat berbasis string, ingatlah ini.
Interpolasi
teks
Bentuk paling dasar dari pengikatan data adalah interpolasi teks, menggunakan sintaks "kumis" (kawat gigi ganda):
<span> pesan: {{msg}} </span>
Tag kumis digantikan oleh nilai atribut MSG dari objek data yang sesuai. Ini juga akan diperbarui setiap kali properti ini berubah.
Anda juga hanya dapat memproses satu interpolasi, dan perubahan data di masa depan tidak akan lagi menyebabkan pembaruan interpolasi:
<span> Ini tidak akan pernah mengubah: {{* msg}} </span>
HTML asli
Tag kumis ganda mem -parsing data menjadi teks biasa alih -alih HTML. Untuk mengeluarkan string HTML nyata, Anda perlu menggunakan tiga tag kumis:
<verv> {{{raw_html}}} </div>
Isi dimasukkan sebagai string HTML - pengikatan data akan diabaikan. Jika Anda perlu menggunakan kembali fragmen template, sebagian harus digunakan.
Sangat berbahaya untuk secara dinamis membuat HTML sewenang-wenang di situs web karena rentan terhadap [serangan XSS] (https://en.wikipedia.org/wiki/cross-site_scripting). Ingatlah untuk menggunakan interpolasi HTML hanya untuk konten tepercaya dan tidak pernah untuk konten yang diajukan pengguna.
Fitur HTML
Tag kumis juga dapat digunakan dalam atribut HTML:
<Div id = "item-{{id}}"> </div>
Perhatikan bahwa interpolasi tidak dapat digunakan dalam arahan vue.js dan fitur khusus. Jangan khawatir, jika tag kumis digunakan di tempat yang salah, vue.js akan memberikan peringatan.
Bind Ekspresi
Teks yang ditempatkan di tag kumis disebut ekspresi pengikatan. Di vue.js, ekspresi terikat terdiri dari ekspresi JavaScript sederhana dan opsional satu atau lebih filter.
Ekspresi JavaScript
Sejauh ini, templat kami hanya terikat pada kunci atribut sederhana. Namun, pada kenyataannya, Vue.js mendukung ekspresi javascript berfitur lengkap dalam pengikatan data:
{{number + 1}}
{{ Oke ? 'Ya': 'tidak'}}
{{message.split (''). Reverse (). gabungkan ('')}}
Ekspresi ini dievaluasi dalam lingkup instance vue tempat mereka berada. Salah satu batasannya adalah bahwa setiap pengikatan hanya dapat berisi satu ekspresi, sehingga pernyataan berikut tidak valid:
<!-Ini adalah pernyataan, bukan ekspresi:->
{{var a = 1}}
<!-Kontrol proses juga tidak dimungkinkan, Anda dapat menggunakan ekspresi terner sebagai gantinya->
{{if (ok) {return pesan}}}
Menyaring
Vue.js memungkinkan penambahan "filter" opsional setelah ekspresi, menunjukkan dengan "karakter pipa":
{{pesan | Kapitalisasi}}
Di sini kita akan menggunakan nilai pesan ekspresi "pipa" ke filter kapitalisasi bawaan. Filter ini sebenarnya hanya fungsi JavaScript yang mengembalikan nilai yang dikapitalisasi. Vue.js menyediakan beberapa filter bawaan, dan kami akan berbicara tentang cara mengembangkan filter kami sendiri nanti.
Perhatikan bahwa sintaks pipa bukan sintaks JavaScript, sehingga filter tidak dapat digunakan dalam ekspresi dan hanya dapat ditambahkan ke renungan ekspresi.
Filter dapat dihubungkan secara seri:
{{pesan | filtera | filterb}}
Filter juga dapat menerima parameter:
{{pesan | filtera 'arg1' arg2}}
Fungsi filter selalu mengambil nilai ekspresi sebagai parameter pertama. Argumen yang dikutip diperlakukan sebagai string, sedangkan argumen yang tidak dikutip dihitung sebagai ekspresi. Di sini, string 'arg1' diteruskan ke filter sebagai parameter kedua, dan nilai ekspresi arg2 dihitung sebagai parameter ketiga.
petunjuk
Arahan adalah fitur khusus dengan awalan v-. Nilai arahan terbatas pada ekspresi pengikatan, sehingga ekspresi JavaScript dan aturan filter yang disebutkan di atas juga berlaku di sini. Tanggung jawab instruksi adalah menerapkan perilaku khusus tertentu pada DOM ketika nilai ekspresinya berubah. Mari kita melihat bolak -balik pada contoh dalam "Ikhtisar":
<p v-if = "ucapan"> halo! </p>
Di sini arahan V-if akan menghapus/memasukkan elemen <p> sesuai dengan keaslian nilai ucapan ekspresi.
parameter
Beberapa instruksi dapat dipisahkan dengan "argumen" setelah namanya dan usus besar di tengah. Misalnya, arahan V-bind digunakan untuk memperbarui fitur HTML secara bertanggung jawab:
<a v-bind: href = "url"> </a>
Di sini HREF adalah parameter, yang memberi tahu arahan V-bind untuk mengikat atribut HREF dari elemen dengan nilai URL ekspresi. Mungkin Anda telah memperhatikan bahwa Anda dapat menggunakan interpolasi fitur { % raw %} href = "{{url}}" { % endraw %} untuk mendapatkan hasil yang sama: ini benar, dan pada kenyataannya, interpolasi fitur internal akan dikonversi ke pengikatan V-bind.
Contoh lain adalah V-On Directive, yang digunakan untuk mendengarkan acara DOM:
<a v-on: click = "dosomething">
Parameter ini adalah nama acara yang didengarkan. Kami juga akan menjelaskan ikatan acara secara rinci.
Pengubah
Pengubah adalah sufiks khusus yang dimulai dengan periode setengah lebar. Mereka digunakan untuk menunjukkan bahwa instruksi harus diikat dengan cara khusus. Misalnya, pengubah .literal memberi tahu arahan untuk menguraikan nilainya menjadi string literal alih -alih ekspresi:
<a v-bind: href.literal = "/a/b/c"> </a>
Tentu saja, ini tampaknya tidak masuk akal, karena kita hanya perlu menggunakan href = "/a/b/c" tanpa harus menggunakan satu instruksi tunggal. Contoh ini hanya untuk menunjukkan sintaks. Nanti kita akan melihat penggunaan pengubah yang lebih praktis.
singkatan
V-Prefix adalah petunjuk visual yang mengidentifikasi fitur VUE spesifik dalam templat. Awalan ini dapat menjadi perbedaan yang baik ketika Anda perlu menambahkan perilaku dinamis ke beberapa kode HTML yang ada. Tetapi ketika Anda menggunakan beberapa instruksi umum, Anda akan merasa bahwa itu selalu sangat realistis dan bertele -tele. Dan saat membangun aplikasi satu halaman (SPA), Vue.js akan mengelola semua templat, dan awalan v-tidak begitu penting saat ini. Oleh karena itu vue.js menyediakan singkatan khusus untuk dua arahan V-Bind dan V-on yang paling umum digunakan:
Singkatan V-Bind
<!-Sintaks Lengkap-> <a v-bind: href = "url"> </a> <!-singkatan-> <a: href = "url"> </a> <!-sintaks lengkap-> <tombol v-bind: dinonaktifkan = "somedynamiccondition"> tombol </butt> <!-abbrreviation-somedynamiccondition "> Button </Button> <!-Abbrreviation-somedynamiccondition"> Button </Button> <! : dinonaktifkan = "somedynamiccondition"> tombol </button>
Singkatan V-on
<!-Sintaks lengkap-> <a v-on: click = "dosomething"> </a> <!-singkatan-> <a @click = "dosomething"> </a>
Mereka terlihat sedikit berbeda dari html "legal", tetapi mereka diuraikan dengan benar di semua browser yang diaktifkan Vue.js dan tidak muncul dalam tag final yang diberikan. Tata bahasa singkatan benar -benar opsional, tetapi ketika Anda belajar langkah demi langkah, Anda akan senang memilikinya.
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.