Bagaimana untuk mendapatkan nilai daripada vue

Kata Pengantar

Vue.js ialah rangka kerja bahagian hadapan yang ringan, fleksibel dan cekap yang menjadikan pembangunan web lebih mudah untuk pembangun. Vue.js dipacu data, berkomponen dan mudah digunakan Bagi pemula, faedah yang paling langsung ialah ciri aliran data yang mengikat data dan dua arah. Mendapatkan nilai dalam Vue.js ialah bahagian pembangunan yang sangat penting Artikel ini akan memperkenalkan secara ringkas kaedah mendapatkan nilai dalam Vue.js.

1 Dapatkan nilai dalam tika Vue

Dapatkan nilai dalam tika Vue terutamanya melalui atribut data. Selepas mentakrifkan atribut data dalam tika Vue dan mengikat data, anda boleh menggunakan ungkapan interpolasi {{ }} untuk paparan. Kod khusus adalah seperti berikut:

<div id="app">
    <p>{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

Dalam kod di atas, instance Vue vm dicipta dengan instantiating Vue, yang menerima atribut el untuk menentukan pemilih elemen yang dipasang, # app mewakili elemen dengan apl id dalam halaman. Pada masa yang sama, atribut data ditakrifkan dalam vm, dan atribut objek boleh diikat pada templat halaman untuk paparan.

2. Dapatkan nilai dalam komponen

Dalam Vue.js, komponen ialah contoh Vue yang boleh digunakan semula, yang merupakan konsep abstrak Komponen juga boleh ditakrifkan melalui atribut data data yang akan diikat, kodnya adalah seperti berikut:

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>{{ count }}</div>'
})

Dalam kod di atas, kami mencipta komponen Vue, menentukan nilai kiraan melalui atribut data dan memaparkannya dalam templat. Apabila menggunakan komponen ini dalam komponen induk, anda boleh menghantar data melalui atribut props Kodnya adalah seperti berikut:

<my-component :count="6"></my-component>

Apabila anda perlu mengemas kini nilai kiraan, anda boleh mencetuskan peristiwa perubahan melalui kaedah $emit, seperti yang ditunjukkan di bawah:

Vue.component('my-component', {
  props: ['count'],
  template: '<div>{{ count }}</div>',
  methods: {
    updateCount: function () {
      this.$emit('change', this.count + 1)
    }
  }
})

Dalam kod di atas, kaedah updateCount ditakrifkan dan peristiwa perubahan dihantar melalui emit untuk menghantar nilai baharu Apabila komponen anak menerima acara daripada komponen induk, ia boleh menerima nilai baharu melalui prop dan memaparkannya , kodnya adalah seperti berikut:

<my-component :count="count" @change="count = $event"></my-component>

Dalam kod di atas, @change mentakrifkan kaedah menerima acara dan $event mewakili. parameter yang diluluskan daripada komponen kanak-kanak.

3. Kesimpulan

Vue.js ialah rangka kerja bahagian hadapan yang sangat berkuasa dan fleksibel Seperti yang ditunjukkan di atas, kejadian dan komponen Vue.js boleh menentukan data yang akan diikat melalui atribut data . Data, dan boleh menerima nilai baharu melalui atribut props untuk mencapai pengikatan data dua hala. Saya percaya bahawa dalam amalan, kita akan menjadi lebih mahir dalam kaedah mendapatkan nilai dalam Vue.js, dan kemudian menulis kod yang lebih baik dan lebih cekap.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai daripada vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!