Cara membuat dalam vue

Vue.js ialah rangka kerja bahagian hadapan yang popular. Tugas utamanya ialah untuk mengikat data dan paparan serta memaparkan kandungan yang betul secara automatik.

Dalam Vue.js, paparan biasanya dipaparkan menggunakan:

1. Pengikatan data menggunakan ungkapan interpolasi {{}}

Vue .js menyokong menggunakan interpolasi ungkapan dalam templat untuk mengikat data. Ungkapan interpolasi ialah salah satu arahan paling asas Vue.js dan digunakan untuk mengikat data ke dalam templat. Vue.js menggunakan sintaks Misai (iaitu pendakap berganda) untuk memasukkan ungkapan ke dalam templat HTML.

Sebagai contoh, templat berikut akan memaparkan mesej ringkas:

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

Dalam contoh Vue.js, anda boleh menetapkan nilai untuk atribut mesej, yang akan dipaparkan secara dinamik dalam templat Keluar:

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue.js!'
    }
});

Ini akan memaparkan teg div yang mengandungi "Helo, Vue.js!"

2. Gunakan arahan v-bind untuk pengikatan atribut

Arahan v-bind digunakan untuk mengikat data kepada atribut elemen HTML. Sebagai contoh, dalam kod berikut, v-bind mengikat atribut tajuk kepada pembolehubah rentetan msg:

<div v-bind:title="msg">
    Hover your mouse to see the title
</div>

Dalam contoh Vue.js, anda boleh menetapkan nilai untuk atribut msg dan nilainya akan dinamik dalam templat Diberikan:

new Vue({
    el: '#app',
    data: {
        msg: 'Hello, Vue.js!'
    }
});

Apabila pengguna menuding tetikus pada elemen ini, penyemak imbas memaparkan petua alat yang mengandungi nilai atribut msg.

3. Gunakan arahan v-for untuk pemaparan gelung

Vue.js menggunakan arahan v-for untuk memaparkan senarai, yang akan memaparkan senarai berdasarkan setiap item dalam sumber data Render fragmen HTML berulang kali. Contohnya, dalam kod berikut, arahan v-for akan menjadikan setiap rentetan dalam tatasusunan mesej sebagai elemen li:

<ul>
    <li v-for="message in messages">{{ message }}</li>
</ul>

Dalam contoh Vue.js, anda boleh menetapkan tatasusunan untuk atribut mesej, yang Tatasusunan akan dipaparkan secara dinamik dalam templat:

new Vue({
    el: '#app',
    data: {
        messages: ['Hello', 'Vue', 'JS']
    }
});

Ini akan memberikan senarai tidak tertib tiga mesej.

4. Gunakan arahan v-if dan v-show untuk memaparkan elemen secara bersyarat

Kedua-dua arahan v-if dan v-show boleh digunakan untuk menjadikan elemen secara bersyarat dalam elemen templat. Arahan v-if menjadikan elemen bersyarat berdasarkan penilaian ungkapan, manakala arahan v-show menunjukkan atau menyembunyikan elemen melalui CSS dan bukannya memberikan atau memusnahkannya sepenuhnya.

Sebagai contoh, dalam kod berikut, elemen h1 pada halaman akan dipaparkan secara bersyarat, bergantung pada nilai pembolehubah showHeading:

<h1 v-if="showHeading">This is the heading</h1>

Dalam contoh Vue.js, anda boleh tetapkan sifat showHeading Nilai yang akan dipaparkan secara dinamik dalam templat:

new Vue({
    el: '#app',
    data: {
        showHeading: true
    }
});

Jika nilai showHeading adalah benar, elemen h1 akan dipaparkan, jika tidak, ia tidak akan dipaparkan.

Ringkasan

Di atas ialah beberapa teknik pemaparan asas dalam Vue.js. Memahami dan menguasai prinsip dan teknik kerja pemaparan Vue.js adalah kunci untuk membangunkan aplikasi web yang cekap dan boleh diselenggara. Vue.js menyediakan banyak arahan dan pilihan untuk memudahkan pemprosesan pengikatan dan pemaparan data, sambil meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Cara membuat dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!