Tutorial asas VUE3: prop dan dikira menggunakan rangka kerja responsif Vue.js

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web dengan sistem responsif. Vue.js menyediakan set arahan dan komponen yang mudah digunakan untuk memudahkan proses pembangunan. Dalam artikel ini, kita akan mempelajari konsep penting - prop dan dikira.

Props ialah cara untuk menyampaikan maklumat dalam komponen Vue.js. Ia membolehkan kami menghantar data daripada komponen induk kepada komponen anak. Dalam komponen anak, kami boleh menggunakan data yang diluluskan untuk mengikat dan memproses.

Mari kita lihat contoh:

Komponen induk:

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

Komponen kanak-kanak:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

Dalam komponen induk, kami meletakkan komponen yang dipanggil mesej The data terikat pada sifat subkomponen: mesej. Kami juga boleh menentukan nilai lalai checksum data dalam komponen kanak-kanak. Dalam contoh di atas, kami menerima data daripada komponen induk dengan mentakrifkan prop yang dipanggil mesej dalam komponen anak.

Berkomputer ialah satu lagi ciri berkuasa sistem reaktif Vue.js. Sifat yang dikira ialah sifat yang dikira yang dicache berdasarkan kebergantungan responsifnya. Apabila kebergantungan berubah, dikira akan mengira semula nilai hartanya.

Mari kita buat contoh mudah bagi sifat yang dikira:

<template>
  <div>
    <input v-model="message">
    <p>计算过的信息：{{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComputedExample',
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Dalam contoh ini, kita mentakrifkan kotak input pengikat dua hala, mengikat nilai mesej melalui model v, dan kemudian kita Atribut yang dikira computedMessage ditakrifkan. Apabila nilai mesej berubah, computedMessage akan dikira semula. Dalam pengiraan kami, ia membalikkan aksara mesej dan mengembalikan rentetan baharu.

Ringkasan:

Props dan dikira ialah dua ciri teras sistem responsif Vue.js. Gunakan prop untuk menghantar data kepada komponen kanak-kanak, dan gunakan pengiraan untuk menentukan sifat terkira responsif. Apabila kami menggunakannya dengan sewajarnya dalam aplikasi kami, kami boleh mengurus dan mengatur kod kami dengan lebih baik. Semasa kami terus mempelajari Vue.js, kami akan menemui beberapa ciri dan arahan sistem reaktif lain, seperti pemerhati dan v-bind.

Atas ialah kandungan terperinci Tutorial asas VUE3: prop dan dikira menggunakan rangka kerja responsif Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!