Perubahan dalam Vue3 berbanding Vue2: arahan terbina dalam yang lebih kaya

Perubahan dalam Vue3 berbanding Vue2: Arahan terbina dalam yang lebih kaya

Semakin masa berlalu, Vue.js, sebagai rangka kerja JavaScript yang popular, terus ditingkatkan dan dipertingkatkan. Vue3 ialah versi terkini Vue.js, yang membawa banyak perubahan dan peningkatan penting berbanding Vue2. Salah satu perubahan yang paling ketara ialah kekayaan arahan terbina dalam. Dalam artikel ini, kami akan meneroka beberapa perubahan dalam arahan terbina dalam dalam Vue3 berbanding Vue2, dan menyediakan beberapa contoh kod untuk menggambarkan perubahan ini.

Dalam Vue2, arahan terbina dalam yang biasa kami ketahui terutamanya termasuk: v-if, v-for, v-bind, v-on, dsb. Arahan ini memberikan kami fungsi yang kaya untuk mengendalikan tugas pembangunan bahagian hadapan biasa seperti pengikatan data, pemaparan bersyarat dan pemaparan gelung. Walau bagaimanapun, dalam Vue3, arahan terbina dalam asal ini telah ditambah baik dan ditambah dengan beberapa arahan terbina dalam yang baharu.

Mula-mula, mari mulakan dengan contoh mudah untuk memahami arahan terbina dalam yang dipertingkatkan dalam Vue3. Katakan kita mempunyai aplikasi Vue mudah yang mengandungi butang yang memaparkan petua alat apabila butang itu diklik. Dalam Vue2, kami akan menggunakan arahan v-if untuk melaksanakan fungsi ini. Kod sampel adalah seperti berikut:

<template>
  <div>
    <button v-if="showDialog" @click="showDialog = false">点击显示提示框</button>
    <div v-else>
      <div class="dialog">
        <p>这是一个提示框！</p>
        <button @click="showDialog = true">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

Dalam kod di atas, kami menggunakan arahan v-if untuk mengawal paparan dan menyembunyikan butang dan kotak gesaan berdasarkan nilai showDialog. Apabila showDialog adalah benar, butang akan disembunyikan dan kotak gesaan akan dipaparkan apabila showDialog adalah palsu, butang akan dipaparkan dan kotak gesaan akan disembunyikan. Ini ialah penggunaan biasa pemaparan bersyarat dalam Vue2.

Walau bagaimanapun, dalam Vue3, kami boleh menggunakan arahan v-show terbina dalam baharu untuk mencapai fungsi yang sama. Arahan v-show mempunyai fungsi yang sama dengan arahan v-if Kedua-duanya mengawal paparan dan menyembunyikan elemen berdasarkan nilai ungkapan. Perbezaannya ialah v-show tidak menambah atau mengalih keluar elemen dalam DOM, tetapi mengawal paparan dan menyembunyikan dengan menukar sifat CSS elemen. Berikut ialah contoh kod fungsi yang sama yang ditulis semula menggunakan v-show:

<template>
  <div>
    <button v-show="showDialog" @click="showDialog = false">点击显示提示框</button>
    <div v-show="!showDialog">
      <div class="dialog">
        <p>这是一个提示框！</p>
        <button @click="showDialog = true">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

Melalui contoh kod di atas, kita dapat melihat bahawa kita boleh menggunakan arahan v-show untuk menggantikan arahan v-if untuk mencapai fungsi yang sama. Dalam pembangunan sebenar, mengikut keperluan dan senario khusus, kita boleh memilih untuk menggunakan v-if atau v-show untuk mencapai keperluan kita.

Selain v-show, Vue3 juga memperkenalkan beberapa arahan terbina dalam baharu, seperti v-model, v-bind, v-on, dsb. Arahan ini juga wujud dalam Vue2, tetapi telah dipertingkatkan dan dipertingkatkan dalam Vue3. Berikut ialah contoh mudah menggunakan arahan v-model:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

Dalam contoh kod di atas, kami menggunakan arahan model v untuk melaksanakan pengikatan data dua hala. Apabila pengguna memasukkan teks dalam kotak input, arahan model v akan mengikat nilai yang dimasukkan oleh pengguna kepada atribut mesej dalam data Pada masa yang sama, apabila atribut mesej dalam data berubah, teks dalam kotak input akan juga berubah dengan sewajarnya. Arahan model v menjadikan pelaksanaan pengikatan data dua hala lebih ringkas dan intuitif.

Selain arahan baharu, Vue3 juga telah menambah baik dan mempertingkat beberapa arahan asal. Contohnya, dalam Vue3, arahan v-bind boleh mengikat berbilang nilai sifat pada masa yang sama, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <a v-bind="{ href: url, target: '_blank' }">点击打开链接</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};
</script>

Dalam contoh kod di atas, kami menggunakan objek untuk menentukan berbilang nilai sifat untuk diikat . Lulus arahan v-bind dengan objek sebagai parameter, dan setiap sifat objek akan dihuraikan menjadi sifat terikat.

Untuk meringkaskan, Vue3 membawa banyak perubahan dan penambahbaikan dalam arahan terbina dalam. Dengan memperkenalkan arahan baharu dan menambah baik kefungsian arahan asal, Vue3 menyediakan lebih banyak pilihan dan cara yang lebih fleksibel untuk memenuhi keperluan pembangunan bahagian hadapan. Dengan menggunakan arahan baharu dan menulis semula kod sampel, kami boleh mempunyai pemahaman yang lebih jelas tentang perubahan Vue3 dalam arahan terbina dalam, dan menggunakan perubahan ini dalam projek sebenar untuk meningkatkan kecekapan pembangunan dan kualiti kod.

Atas ialah kandungan terperinci Perubahan dalam Vue3 berbanding Vue2: arahan terbina dalam yang lebih kaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!