Mari kita bincangkan tentang sifat biasa dan kaedah objek contoh Vue

Vue.js ialah rangka kerja bahagian hadapan yang boleh melaksanakan ciri paparan dipacu data dan berkomponen. Dalam aplikasi Vue.js, setiap objek contoh Vue mempunyai sifat dan kaedah tersendiri, yang sangat penting dalam pembangunan Vue. Artikel ini akan memperkenalkan sifat biasa dan kaedah objek contoh Vue.

sifat objek contoh Vue

data

Setiap objek tika Vue mesti mempunyai sifat data, iaitu objek akar yang menyimpan data dalam Vue objek contoh. Ini adalah salah satu aspek teras pelaksanaan dipacu data Vue. Sebagai contoh, kami mentakrifkan tika Vue seperti berikut:

var vm = new Vue({
  data: {
    message: 'Hello World!'
  }
})

Dalam tika Vue di atas, objek data ditakrifkan dan rentetan 'Hello World!' Atribut mesej ini boleh digunakan dalam templat Vue. Sifat

props

props ialah cara untuk menerima data daripada komponen induk Ia adalah sifat dalam objek contoh komponen Vue dan digunakan untuk Melepasi parameter secara automatik apabila menentukan komponen. Apabila komponen ditakrifkan dalam komponen lain, anda boleh menggunakan prop untuk menghantar data daripada komponen induk kepada komponen anak. Contohnya:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{message}}</div>'
})

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

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

Dalam contoh di atas, kami mencipta komponen bernama komponen kanak-kanak, yang mempunyai atribut props dan mentakrifkan komponen bernama Atribut mesej. Dengan mengikat atribut mesej dalam komponen induk, komponen induk boleh menghantar data kepada komponen anak tersuai, dengan itu menggunakan data untuk menyesuaikan templat dalam komponen anak. Sifat

dikira

dikira ialah sifat yang dikira dalam objek contoh Vue. Apabila data yang digunakan dalam templat perlu berubah berdasarkan perubahan dalam data lain, sifat yang dikira boleh dibuat melalui sifat yang dikira. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

Dalam contoh di atas, kami mentakrifkan sifat terkira reversedMessage, yang diperoleh dengan membalikkan nilai atribut mesej. Apabila mesej berubah, sifat yang dikira juga berubah. Atribut

kaedah

kaedah dalam objek tika Vue mengandungi kaedah boleh guna semula, yang ditakrifkan sebagai fungsi dalam objek tika Vue. Apabila objek contoh Vue perlu mengendalikan peristiwa dinamik, atribut kaedah boleh digunakan. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Dalam contoh di atas, kami menentukan kaedah reverseMessage, yang membalikkan nilai atribut mesej. Kaedah ini boleh dipanggil melalui arahan v-on dalam templat Vue. Atribut

watch

watch digunakan untuk memantau perubahan dalam data dalam objek contoh Vue. Apabila data yang dipantau dalam objek contoh Vue berubah, atribut jam tangan akan melaksanakan fungsi secara automatik. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(val) {
      console.log('message changed to', val)
    }
  }
})

Dalam contoh di atas, kami menentukan atribut jam tangan Apabila atribut mesej berubah, ia akan dipantau dan kaedah dalam atribut jam tangan akan dilaksanakan untuk mencetak nilai yang diubah kepada. konsol itu.

Kaedah objek instance Vue

$watch

Kaedah instance $watch** digunakan untuk memantau perubahan dalam data dalam objek instance Vue. Apabila data yang dipantau dalam objek contoh Vue berubah, kaedah **$watch akan melaksanakan fungsi secara automatik. Contohnya:

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

vm.$watch('message', function(val) {
  console.log('message changed to', val)
})

Dalam contoh di atas, kami menggunakan kaedah $watch untuk memantau perubahan dalam atribut mesej dan mencetak maklumat apabila ia berubah. Kaedah

$on

$on digunakan untuk mendaftarkan pendengar acara dalam objek contoh Vue. Contohnya:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

Dalam contoh di atas, kami menggunakan kaedah $on untuk mendaftarkan acara bernama message-changed dalam objek contoh Vue Apabila atribut mesej berubah, kami Memancarkan peristiwa. Kaedah

$emit

$emit digunakan untuk mencetuskan peristiwa dalam objek contoh Vue. Contohnya:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

vm.$emit('message-changed', 'Hello World!')

Dalam contoh di atas, kami menggunakan kaedah $emit untuk mencetuskan acara bernama message-changed dan menetapkan parameter acara kepada Hello World !. Kaedah

$nextTick

$nextTick digunakan untuk melaksanakan panggilan balik selepas DOM objek contoh Vue dikemas kini. Contohnya:

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

vm.$nextTick(function() {
  console.log('DOM updated')
})

Dalam contoh di atas, kami menggunakan kaedah $nextTick untuk melaksanakan panggilan balik selepas DOM objek contoh Vue dikemas kini.

Ringkasan

Objek instance Vue ialah konsep yang sangat penting dalam pembangunan Vue Apabila mencipta objek instance Vue, anda mesti memahami sifat dan kaedahnya. Artikel ini memperkenalkan secara ringkas sifat dan kaedah biasa objek contoh Vue, termasuk: data, prop, dikira, kaedah, jam tangan, $watch, $on, $emit dan $nextTick, dsb. Sifat dan kaedah ini menjadikan pembangunan Vue lebih fleksibel dan mudah.

Atas ialah kandungan terperinci Mari kita bincangkan tentang sifat biasa dan kaedah objek contoh Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!