Terdapat 16 arahan terbina dalam: v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v- bind, v-model, v-slot, v-pre, v-jubah, v-sekali, v-memo, v-is adalah baharu dalam 3.2, dan v-is ditinggalkan dalam 3.1.0. v-show digunakan untuk mengawal paparan dan penyembunyian elemen, dan v-if digunakan untuk memberikan elemen secara bersyarat berdasarkan nilai benar atau palsu sesuatu ungkapan.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
1. Apakah itu arahan Vue
Dalam Vue, arahan sebenarnya adalah atribut istimewa
Vue akan melakukan sesuatu di belakang tabir berdasarkan arahan , bagi perkara yang perlu dilakukan secara khusus, Vue akan melaksanakan operasi yang berbeza mengikut arahan yang berbeza Arahan khusus akan disebut kemudian. dengan v-, contohnya: v-text
2. Vue ada?
Arahan terbina dalam merujuk kepada arahan Vue sendiri, yang boleh digunakan di luar kotakVue mempunyai sejumlah 16 arahan terbina dalam, termasuk:
v-text, v-html, v-show, v-if, v-else, v-else-if, v-for , v-on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once, v-memo, v-is, antaranya v-memo baharu dalam 3.2, v-is Ditamatkan dalam 3.1.0
<span v-text="msg"></span>
Salin selepas log masuk
Jom belajar tentang penggunaan asas arahan terbina dalam ini
2.2 Memahami penggunaan asas 16 arahan terbina dalam
2.2. 1 v-text
v-text digunakan untuk mengemas kini teksKandungan elemen, contohnya:
h1 Kandungan elemen akhirnya bergantung pada nilai msg
2.2.2 v-html
sangat serupa dengan v-text, kecuali v-html digunakan untuk mengemas kini HTML dalaman bagi elemen, seperti
Perlu diingatkan bahawa kandungan di dalamnya mesti dimasukkan sebagai HTML biasa
<h1 v-text="msg"></h1>
Salin selepas log masuk
2.2. .3 v-show
v-show boleh menukar nilai paparan elemen mengikut nilai benar atau salah ungkapan, yang digunakan untuk mengawal paparan dan menyembunyikan elemen, untuk contoh:
Anda boleh melihat bahawa apabila keadaan berubah, arahan ini mencetuskan kesan peralihan untuk menunjukkan atau menyembunyikan
<div v-html="'<h1>Hello LBJ</h1>'"></div>
Salin selepas log masuk
Nota: v-show tidak menyokong elemen dan ia juga tidak menyokong v-else
2.2.4 v-if
v-if digunakan untuk memaparkan elemen secara bersyarat <🎜 berdasarkan nilai benar atau palsu sesuatu ungkapan >Berbanding dengan v-show, v-if ialah pemusnahan atau pembinaan semula elemen semasa bertukar, bukannya sekadar menunjukkan dan menyembunyikan
Anda boleh melihat apabila ungkapan palsu Apabila, v-if secara langsung memusnahkan elemen, manakala v-show hanya menyembunyikannya secara visual
dan v-if boleh menjadi , jika elemen itu , kandungannya akan diekstrak Sebagai blok bersyarat
2.2.5 v-else
v-else tidak memerlukan ungkapan, yang bermaksud menambah "blok lain", yang bersamaan dengan v-jika apabila syarat dipenuhi Paparkan elemen v-jika, sebaliknya paparkan elemen v-else, contohnya:
Sila ambil perhatian: elemen adik-beradik sebelum v-else mesti mempunyai v-if atau v- else-if
2.2.6 v-else-if
Begitu juga, ia mewakili "else if blok" v-if, yang sama dengan v-else Elemen adik beradik mesti mempunyai v-if atau v-else-if, contohnya:
<. 🎜>2.2.7 v-for
v-for ialah arahan untuk lelaran, yang boleh menyebabkan elemen atau blok templat berbilang kali berdasarkan data sumber, contohnya:
Anda juga boleh menentukan alias untuk indeks tatasusunan atau untuk objek Kunci
2.2.8 v-on
v-on digunakan untuk mengikat acara kepada elemen, yang boleh disingkatkan sebagai: @
Pengubahsuai
.stop - calls event.stopPropagation( )
.prevent - memanggil event.preventDefault()
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
Salin selepas log masuk
.capture - Gunakan mod tangkapan semasa menambah pendengar acara
.self - Hanya apabila peristiwa dicetuskan daripada elemen itu sendiri yang mana pendengar terikat Cetuskan panggil balik .{keyAlias} - Cetuskan panggilan balik hanya jika acara dicetuskan daripada kekunci tertentu
.sekali - Cetuskan panggil balik sekali sahaja
.kiri - hanya dicetuskan apabila butang kiri tetikus diklik
.kanan - hanya dicetuskan apabila butang kanan tetikus diklik
.tengah - hanya dicetuskan apabila butang tengah tetikus diklik
2.2.6 v-else-if
.prevent - memanggil event.preventDefault()