Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Arahan ialah konsep penting dalam rangka kerja Vue, yang menyediakan cara deklaratif untuk menangani elemen DOM. Set arahan Vue mengandungi satu siri arahan yang biasa digunakan Berikut ialah pengenalan terperinci kepada arahan ini.
1. Arahan interpolasi
Arahan interpolasi ialah arahan paling asas dalam Vue. Ia digunakan untuk memasukkan data daripada contoh Vue ke dalam elemen DOM. Format arahan interpolasi ialah "{{}}", dan "{{}}", "v-text" dan "v-html" boleh digunakan.
<div>{{message}}</div>Dalam contoh Vue, tetapkan atribut mesej kepada "Hello Vue!", kemudian kod di atas akan mengeluarkan "Hello Vue!".
<div v-text="message"></div>
Dalam contoh Vue, tetapkan atribut mesej kepada "Hello Vue!", kemudian kod di atas juga akan mengeluarkan "Hello Vue!".
<div v-html="message"></div>
Dalam contoh Vue, tetapkan atribut mesej kepada "Hello Vue!", kemudian kod di atas akan mengeluarkan "Hello Vue!" bahagian teks Akan menjadi tebal.
2. Paparan bersyarat
Arahan pemaparan bersyarat digunakan untuk menukar keterlihatan elemen dalam elemen DOM berdasarkan nilai ungkapan.
<div v-if="isShow">Hello Vue!</div>
Dalam contoh Vue, tetapkan atribut isShow kepada benar, kemudian kod di atas akan memaparkan "Hello Vue!", tetapkan atribut isShow kepada false dan elemen DOM tidak akan ditunjukkan lagi.
<div v-if="isShow">Hello Vue!</div>Vue is so great!
Dalam contoh Vue, jika atribut isShow adalah benar, elemen DOM pertama akan memaparkan "Hello Vue!", jika tidak, elemen DOM kedua akan memaparkan "Vue is so hebat!".
<div v-show="isShow">Hello Vue!</div>
Dalam contoh Vue, jika atribut isShow ditetapkan kepada benar, elemen di atas akan dipaparkan dan jika atribut isShow ditetapkan kepada false, elemen itu akan menjadi tersembunyi.
3. Paparan gelung
Arahan pemaparan gelung digunakan untuk memaparkan tatasusunan atau data objek ke dalam elemen DOM.
<ul>
<li v-for="item in items">{{ item.name }}</li>
</ul>Dalam contoh Vue, tetapkan sifat item kepada tatasusunan yang mengandungi berbilang objek {name: value}, kemudian kod di atas akan memaparkan berbilang item senarai, setiap item senarai mengandungi teks atribut nama.
<ul>
<li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>
</ul>Dalam contoh Vue, gunakan kod di atas pada tatasusunan item yang mengandungi 2 objek, kemudian dua item senarai akan diberikan, setiap item senarai memaparkan item Indeks dalam tatasusunan dan atribut nama item.
4. Pengikatan peristiwa
Arahan pengikatan peristiwa digunakan untuk mengikat pendengar acara pada elemen DOM dan kaedah panggilan dalam tika Vue apabila peristiwa berlaku.
<button v-on:click="onClick"></button>
Dalam contoh Vue, tentukan kaedah bernama "onClick", kemudian kod di atas bermaksud kaedah "onClick" dipanggil apabila butang diklik.
<button @click="onClick"></button>
Dalam contoh Vue, tentukan kaedah bernama "onClick", kemudian kod di atas bermaksud kaedah "onClick" dipanggil apabila butang diklik.
5. Pengikatan data dua hala
Arahan pengikatan digunakan untuk mengikat elemen bentuk dua hala dan data dalam contoh Vue.
<input v-model="message">
Dalam contoh Vue, apabila kod di atas digunakan pada sifat bernama "message", nilai kotak input diikat secara dwiarah kepada nilai "message" "harta benda.
6. Atribut yang dikira
计算属性用于根据Vue实例中的数据动态生成新的属性，从而方便DOM元素的渲染。
Vue.component('my-component', {
template: '<div>{{ reversedMessage }}</div>',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})在定义了一个名为"reversedMessage"的计算属性后，Vue会自动追踪message属性的变化，并在message变化时调用计算属性的计算函数，重新生成reversedMessage属性的值。
以上是Vue中常用的指令集的介绍，这些指令可以帮助我们更轻松地处理DOM元素的生成和渲染，提高开发效率。
Atas ialah kandungan terperinci Pengenalan terperinci kepada beberapa arahan yang biasa digunakan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
