Mari kita bincangkan tentang beberapa arahan terbina dalam yang biasa digunakan dalam vue

<p>Vue ialah rangka kerja JavaScript popular yang menyediakan banyak arahan terbina dalam untuk mengendalikan DOM dan pemaparan data.

<p>Arahan terbina dalam Vue akan diterangkan di bawah:

v-bind

<p>Arahan v-bind digunakan untuk mengikat nilai atribut elemen DOM ke data pada contoh Vue. Arahan ini boleh digunakan dengan pelbagai atribut elemen DOM, termasuk kelas, gaya, src, href, tajuk, dll.

<p>Sebagai contoh, kod berikut menunjukkan cara menggunakan v-bind untuk mengikat gaya kelas senarai berita:

<template>
  <div :class="{ &#39;news-active&#39;: isActive }">
    <ul>
      <li v-for="item in news">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>Dalam contoh ini, <div :class="{ &#39;news-active&#39;: isActive }"> diikat menggunakan v-bind arahan Gaya kelas dinamik ditentukan. Perubahan kepada keadaan isActive akan mengemas kini class="news-active" atau mengalih keluar kelas.

v-if / v-else

<p>Arahan v-if dan v-else digunakan untuk menggunakan pernyataan bersyarat dalam pemaparan.

<p>Sebagai contoh, kod berikut akan menentukan sama ada untuk memaparkan sekeping teks berdasarkan nilai isEnabled:

<template>
  <div>
    <p v-if="isEnabled">这段文本会在isEnabled为真时渲染</p>
    <p v-else>这段文本会在isEnabled为假时渲染</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEnabled: true
    }
  }
}
</script>

<p>Apabila isEnabled adalah benar, yang pertama <p> elemen akan dipaparkan; namun, apabila isEnabled palsu, elemen <p> kedua akan dipaparkan. Ini membentuk pernyataan bersyarat yang sangat kuat.

v-show

<p>Arahan v-show sangat serupa dengan arahan v-if. Kesemuanya digunakan untuk menunjukkan atau menyembunyikan elemen DOM.

<p>Walau bagaimanapun, v-show berbeza dengan v-if kerana ia tidak memusnahkan elemen DOM yang tidak perlu dipaparkan. Sebaliknya, v-show hanya menyembunyikan elemen DOM yang perlu disembunyikan melalui display:none.

<p>Sebagai contoh, kod berikut menunjukkan contoh penggunaan arahan v-show:

<template>
  <div>
    <p v-show="isVisible">这段文本会根据isVisible的值显示或者隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

<p>Dalam contoh ini, apabila isVisible adalah benar, elemen <p> akan menjadi dipaparkan. Apabila isVisible palsu, elemen <p> masih wujud dalam DOM, tetapi tidak kelihatan.

v-untuk

<p> Arahan v-untuk digunakan untuk memaparkan data senarai. Ia akan merentasi setiap item sumber data dan kemudian menjana elemen DOM yang sepadan.

<p>Sebagai contoh, kod berikut akan menjana senarai berita dan memetakan setiap item dalam tatasusunan news kepada elemen DOM:

<template>
  <ul>
    <li v-for="item in news">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>Dalam contoh ini, setiap Setiap <li> elemen mendapatkan tajuk berita melalui arahan v-for.

v-model

<p>Arahan model v mengikat data tika Vue kepada komponen input seperti input borang, kotak semak dan butang radio.

<p>Sebagai contoh, kod berikut menunjukkan cara v-model mengikat kandungan kotak input kepada sifat message bagi contoh Vue:

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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<p>Dalam contoh ini, messageNilai awal atribut diberikan kepada elemen <p>. Walau bagaimanapun, apabila apa-apa dimasukkan dalam kotak input, atribut message juga dikemas kini.

v-on

<p>Arahan v-on digunakan untuk mengikat peristiwa DOM kepada kaedah pada tika Vue supaya kaedah ini boleh dilaksanakan apabila peristiwa itu berlaku.

<p>Sebagai contoh, kod berikut menunjukkan cara arahan v-on mengikat acara click ke butang:

<template>
  <div>
    <button v-on:click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

<p>Dalam contoh ini, kaedah onClick akan Dilaksanakan apabila butang diklik.

<p>Selain acara click, acara DOM biasa lain seperti keydown, submit, mousemove, dsb. boleh diikat dengan v-on.

v-bind:key

<p> Arahan v-bind:key digunakan untuk membantu Vue mengenal pasti susunan pemaparan dan kemas kini elemen data senarai, dengan itu meningkatkan prestasi pemaparan.

<p>Sebagai contoh, kod berikut akan menggunakan arahan v-for untuk memaparkan senarai berita dan menggunakan arahan v-bind:key untuk mengikat id item senarai secara dinamik:

<template>
  <ul>
    <li v-for="item in news" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { id: 1, title: 'Vue.js 3.0 发布了' },
        { id: 2, title: 'Vue 2.x 开发指南' },
        { id: 3, title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

<p>Dalam contoh ini, atribut id item senarai terikat pada arahan v-bind:key untuk memastikan setiap item senarai mempunyai pengecam unik.

<p>Ringkasan:

<p>Arahan terbina dalam Vue menyediakan pembangun dengan siri operasi DOM yang mudah dan operasi pemaparan data. Mahir dalam arahan ini akan memudahkan pembangun membangunkan aplikasi Vue berkualiti tinggi.

Atas ialah kandungan terperinci Mari kita bincangkan tentang beberapa arahan terbina dalam yang biasa digunakan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!