Apakah arahan dalam Vue, dan apakah senario aplikasinya dalam pembangunan?

Vue.js ialah rangka kerja JavaScript yang sangat popular Dalam Vue.js, arahan ialah konsep yang sangat penting yang disediakan oleh Vue.js, yang boleh menghuraikan ungkapan dalam templat dan beroperasi pada DOM. Dalam artikel ini, kita akan mempelajari tentang arahan yang biasa digunakan dalam Vue dan senario aplikasinya.

1. v-if/v-else-if/v-else

Arahan v-if digunakan untuk membuat elemen secara bersyarat berdasarkan nilai ungkapan. Elemen diberikan apabila ungkapan dinilai kepada benar. Apabila ungkapan dinilai kepada palsu, elemen tidak akan diberikan.

arahan v-else-if dan v-else digunakan untuk menyatakan "keadaan negatif" v-if, yang bermaksud jika arahan v-if sebelumnya gagal menyemak keadaan, v- keadaan else-if atau v-else.

Dalam pembangunan, v-if selalunya digunakan untuk mengawal sama ada elemen tertentu dipaparkan, seperti memaparkan borang log masuk atau maklumat pengguna berdasarkan sama ada pengguna log masuk. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div v-if="user.loggedin">
  欢迎回来, {{ user.name }}！
</div>
<div v-else>
  <button @click="showLoginForm">请登录</button>
</div>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

2. Arahan

v-show adalah serupa dengan v-if Ia juga boleh mengawal sama ada elemen dipaparkan, tetapi tidak seperti v-if, v-show hanya menukar atribut paparan CSS.

Dalam pembangunan, rancangan v biasanya digunakan untuk menukar keterlihatan elemen dengan kerap, seperti mengawal pengembangan dan penutupan menu lungsur. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="showMenu=!showMenu">下拉菜单</button>
<ul v-show="showMenu">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3. Arahan bind

v-bind digunakan untuk mengikat satu atau lebih atribut HTML secara dinamik Atribut yang boleh diikat termasuk kelas, gaya, tajuk, dsb. Proses pengikatan adalah dua hala Mengubah suai data dalam JavaScript boleh mengemas kini HTML, dan mengubah suai atribut dalam HTML boleh mengemas kini data dalam JavaScript.

Dalam pembangunan, senario v-bind yang paling biasa digunakan ialah untuk mengikat atribut kelas dan gaya secara dinamik, seperti menetapkan warna dan gaya butang mengikut keadaan yang berbeza. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button
  :class="{active: isActive, disabled: isDisabled}"
  :style="{color: textColor, backgroundColor: bgColor}"
  :disabled="isDisabled"
>
  {{ buttonText }}
</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

4. for

arahan v-for digunakan untuk memaparkan elemen tatasusunan atau objek dalam gelung Ia boleh menerima pembolehubah, menetapkan setiap item tatasusunan atau objek kepada pembolehubah ini secara bergilir-gilir, dan kemudian menghasilkan yang sepadan unsur.

Dalam pembangunan, v-for selalunya digunakan untuk memaparkan senarai dan jadual, seperti memaparkan senarai berita, senarai produk, dsb. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

5. Arahan model

v-model mengikat nilai elemen input borang atau komponen tersuai untuk melaksanakan pengikatan data dua hala Apabila nilai dalam borang berubah, data dalam tika Vue yang sepadan juga akan mengikuti. kemas kini.

Dalam pembangunan, model v sering digunakan untuk pelaksanaan borang, seperti pengikatan data dua hala bagi kotak input, kotak radio, kotak semak, kotak lungsur dan komponen lain. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<input type="text" v-model="message">
<p>{{ message }}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

6. Arahan on

v-on digunakan untuk mengikat pendengar acara, yang boleh mendengar pelbagai acara seperti acara DOM, acara tersuai dan acara sistem Apabila acara dicetuskan, kaedah yang sepadan akan dipanggil .

Dalam pembangunan, v-on selalunya digunakan untuk mengendalikan peristiwa interaksi pengguna, seperti klik butang, input papan kekunci, menatal tetikus, dsb. Kod contoh:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="incrementCount">{{ count }}</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

7. Arahan teks/v-html

v-teks digunakan untuk menetapkan kandungan teks elemen kepada nilai arahan Ia hanya akan mengeluarkan teks dalam bentuk teks dan tidak akan menghuraikan HTML. Arahan

v-html digunakan untuk menetapkan innerHTML elemen kepada nilai teg HTML boleh dihuraikan, tetapi terdapat risiko XSS.

Dalam pembangunan, arahan v-text/v-html harus digunakan dengan berhati-hati kerana ia akan meningkatkan risiko keselamatan, jadi ia hanya boleh digunakan untuk memasukkan beberapa kandungan yang boleh dipercayai dalam HTML, seperti menghasilkan editor teks kaya keluaran. Kod sampel:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div v-text="content"></div>
<div v-html="content"></div>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dalam artikel ini kami memperkenalkan Ia menerangkan arahan yang biasa digunakan dalam Vue dan senario aplikasinya Arahan ini adalah ciri penting rangka kerja Vue.js, yang boleh meningkatkan kecekapan pembangunan dengan berkesan, dan juga membolehkan aplikasi Vue.js mempunyai kesan interaktif dan pengalaman pengguna yang lebih kaya. Oleh itu, adalah sangat penting untuk mahir dalam arahan ini apabila menggunakan rangka kerja Vue.js.

Atas ialah kandungan terperinci Apakah arahan dalam Vue, dan apakah senario aplikasinya dalam pembangunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!