VueJs untuk Pemula Bahagian VueJs Buat, Import dan Gunakan Komponen

Mencipta komponen pertama anda

Apakah itu Komponen?
Komponen ialah blok binaan aplikasi Vue. Setiap komponen mempunyai fungsi dan pandangan tersendiri, Komponen boleh digunakan semula sepanjang aplikasi. Satu contoh komponen ialah bar navigasi yang boleh diakses pada halaman yang berbeza.

Mencipta Komponen Asas

• Buat fail komponen baharu yang dipanggil HelloWorld.vue (anda boleh menukar nama fail jika anda mahu) dalam folder komponen (buat folder komponen baharu jika ia belum wujud).

• Komponen HelloWorld:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

• import dan gunakan komponen HelloWord dalam App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

Kini anda sepatutnya dapat melihat komponen HelloWorld yang dipaparkan dalam komponen App.vue.

Atas ialah kandungan terperinci VueJs untuk Pemula Bahagian VueJs Buat, Import dan Gunakan Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!