Ringkaskan beberapa kaedah penyimpanan Vue.js

Vue.js ialah rangka kerja JavaScript popular yang merangkumi banyak alatan mudah untuk mempercepatkan pembangunan. Antaranya, kaedah penyimpanan datanya sangat berkuasa dan fleksibel Berikut adalah beberapa kaedah penyimpanan Vue.js.

1. storan atribut data

Atribut data Vue.js ialah cara utama untuk menyimpan data. Apabila komponen dipasang, Vue.js akan mengikat sifat dalam data ke halaman. Sifat ini boleh diakses melalui sintaks templat dan boleh diakses dalam kod JavaScript menggunakan ini.

Sebagai contoh, kod berikut mentakrifkan komponen Vue.js bernama App dan menyimpan rentetan bernama mesej dalam atribut data:

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

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

Dalam contoh ini, apabila komponen dipasang, Vue.js akan mengikat atribut mesej secara automatik pada templat. Jadi, hasil pemaparan komponen akan menjadi elemen div yang mengandungi teks "Hello, Vue.js!"

2. Storan atribut yang dikira

Selain atribut data biasa, Vue.js juga menyediakan atribut yang dikira untuk menyimpan atribut yang dikira. Atribut yang dikira boleh dikira berdasarkan nilai satu atau lebih atribut data dan hasilnya boleh dicache.

Sebagai contoh, kod berikut mentakrifkan komponen Vue.js bernama App dan menyimpan rentetan bernama firstName dan lastName dalam atribut data, serta sifat terkira fullName:

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

Dalam contoh ini, atribut fullName mengira nama penuh berdasarkan nilai firstName dan lastName dan cache hasilnya. fullName dikira semula secara automatik apabila firstName atau LastName berubah.

3. storan atribut kaedah

Atribut kaedah Vue.js boleh menyimpan satu set kaedah yang serupa dengan fungsi. Tidak seperti atribut data dan atribut yang dikira, kaedah dalam atribut kaedah biasanya digunakan untuk mengendalikan peristiwa interaksi pengguna.

Sebagai contoh, kod berikut mentakrifkan komponen Vue.js bernama App dan menyimpan kaedah bernama greet dalam atribut kaedah:

<template>
  <div>
    <button @click="greet">Greet!</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Hello, Vue.js!')
    }
  }
}
</script>

Dalam contoh ini, apabila pengguna mengklik butang , Vue.js akan memanggil kaedah sapaan dan muncul kotak dialog yang mengandungi teks "Hello, Vue.js!"

4. storan atribut props

Atribut props Vue.js boleh menyimpan data daripada komponen induk. Apabila komponen ingin memaparkan data dalam komponen induknya, ia boleh menggunakan atribut props untuk menyimpan data.

Sebagai contoh, kod berikut mentakrifkan komponen Vue.js bernama MyButton dan menyimpan rentetan bernama teks dalam atribut props:

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>

Dalam contoh ini, komponen MyButton boleh mendapatkan rentetan bernama teks daripada komponen induk melalui atribut props dan paparkannya dalam elemen butang. Komponen induk boleh menggunakan komponen MyButton dan menetapkan atribut propnya seperti berikut:

<template>
  <my-button text="Click me!"></my-button>
</template>

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

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

Dalam contoh ini, komponen induk boleh menghantar rentetan bernama "Klik saya sebagai atribut teks dan memaparkan komponen MyButton sebagai butang dengan teks "Klik saya!"

Ringkasan

Vue.js menyediakan banyak cara untuk menyimpan data, termasuk atribut data, atribut yang dikira, atribut kaedah dan atribut props. Menguasai kaedah ini boleh membantu kami menggunakan alat mudah yang disediakan oleh Vue.js dengan lebih baik dan mencapai kecekapan pembangunan yang lebih baik.

Atas ialah kandungan terperinci Ringkaskan beberapa kaedah penyimpanan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!