Pengenalan terperinci kepada beberapa arahan yang biasa digunakan dalam vue

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.

1. "{{}}"
   "{{}}" ialah arahan interpolasi paling asas dalam Vue, yang boleh terus memasukkan data daripada tika Vue ke dalam elemen DOM. Contohnya:

<div>{{message}}</div>

Dalam contoh Vue, tetapkan atribut mesej kepada "Hello Vue!", kemudian kod di atas akan mengeluarkan "Hello Vue!".

2. "v-text"
   Arahan "v-text" mempunyai fungsi yang serupa dengan "{{}}" dan juga boleh memasukkan data daripada tika Vue ke dalam elemen DOM. Walau bagaimanapun, tidak seperti "{{}}", arahan "teks-v" boleh menyelesaikan masalah kelipan dalam pemaparan penyemak imbas yang disebabkan oleh pengikatan data. Contohnya:

<div v-text="message"></div>

Dalam contoh Vue, tetapkan atribut mesej kepada "Hello Vue!", kemudian kod di atas juga akan mengeluarkan "Hello Vue!".

3. "v-html"
   Arahan "v-html" boleh memasukkan data daripada tika Vue ke dalam elemen DOM sebagai kod HTML. Contohnya:

<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.

1. "v-jika"
   Arahan pemaparan bersyarat yang paling biasa digunakan ialah "v-jika". Ia menentukan sama ada untuk memaparkan elemen DOM yang sepadan berdasarkan nilai ungkapan. Contohnya:

<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.

2. "v-else"
   Arahan "v-else" mesti mengikut arahan "v-if" pada elemen yang sama, digunakan apabila ungkapan "v-if" ialah Kandungan dipaparkan apabila palsu. Contohnya:

<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!".

3. "v-show"
   Arahan "v-show" adalah serupa dengan arahan "v-if" dan juga boleh mengawal paparan dan penyembunyian elemen. Walau bagaimanapun, tidak seperti arahan "v-if", arahan "v-show" sentiasa dikekalkan dalam elemen DOM dan hanya mengawal keterlihatan elemen dengan menetapkan atribut "gaya" elemen. Contohnya:

<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.

1. "v-for"
   Arahan pemaparan gelung yang paling biasa digunakan ialah "v-for". Ia boleh menggelungkan melalui tatasusunan atau objek dan menjadikan data di dalamnya menjadi elemen DOM. Contohnya:

<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.

2. Indeks "v-for"
   Jika anda perlu mendapatkan nombor jujukan gelung, anda boleh menggunakan parameter kedua arahan "v-for". Contohnya:

<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.

1. "v-on"
   Arahan mengikat acara yang paling biasa digunakan ialah "v-on", yang digunakan untuk mengikat pendengar acara pada elemen DOM. Contohnya:

<button v-on:click="onClick"></button>

Dalam contoh Vue, tentukan kaedah bernama "onClick", kemudian kod di atas bermaksud kaedah "onClick" dipanggil apabila butang diklik.

2. Singkatan daripada "v-on"
   Terdapat juga singkatan untuk arahan "v-on", iaitu simbol "@". Contohnya:

<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.

1. "v-model"
   Arahan mengikat yang paling biasa digunakan ialah "v-model", yang boleh mengikat nilai elemen bentuk dua hala kepada data dalam tika Vue. Contohnya:

<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元素的渲染。

1. "computed"
   最常用的计算属性指令是"computed"，它可以自动追踪所依赖的数据，并在数据变化时更新该属性的值。例如：

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!