Apakah tetapan dalaman vue

Vue.js ialah rangka kerja JavaScript progresif yang boleh digunakan untuk membina antara muka web interaktif. Dengan ciri seperti pengikatan data dan kebolehkomposisian, Vue.js telah menjadi salah satu rangka kerja kegemaran pembangun. Selain itu, Vue.js juga mempunyai tetapan dalaman yang kaya, yang artikel ini akan memperkenalkan satu demi satu.

Sistem Responsif

Sistem reaktif teras Vue.js ialah salah satu ciri yang paling berkuasa. Dalam Vue.js, apabila bekerja dengan objek data, paparan dipaparkan semula apabila data ditukar, tanpa perlu mengemas kininya secara manual. Ini kerana Vue.js menggunakan sistem reaktif, yang mengemas kini paparan secara automatik.

Inti sistem responsif yang dilaksanakan oleh Vue.js ialah kaedah Object.defineProperty(). Ia boleh digunakan untuk menukar sifat individu kepada getter dan setter, dengan itu mengemas kini paparan berkaitannya secara automatik apabila nilai harta berubah.

Berikut ialah contoh asas Vue.js:

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

Dalam contoh ini, kami menggunakan atribut data untuk mencipta sifat bernama message. Sekarang, jika anda menukar message, Vue.js akan mengemas kini nilai hartanah secara automatik dan paparan akan dikemas kini secara automatik.

Fungsi cangkuk kitaran hayat

Vue.js mempunyai proses kitaran hayat yang ketat, di mana setiap peristiwa mempunyai fungsi cangkuk, supaya gelagat tersuai boleh disuntik ke dalam kod yang ditentukan pengguna. Tujuan utama kitaran hayat ini adalah untuk melaksanakan kod pada peringkat tertentu, contohnya, semasa instantiasi, semasa perubahan data, semasa pemusnahan, dsb.

Fungsi cangkuk kitaran hayat terbahagi kepada dua kategori: pra cangkuk dan pasca cangkuk. Semasa kitaran hayat contoh, Vue.js akan memanggil fungsi pra cangkuk dahulu, dan kemudian memanggil fungsi pasca cangkuk apabila kitaran hayat tika itu tamat.

Berikut ialah fungsi cangkuk kitaran hayat komponen Vue.js:

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

Acara tersuai

Dalam Vue.js, anda boleh menggunakan peristiwa tersuai untuk melaksanakan komponen komunikasi. Acara tersuai membolehkan komunikasi antara komponen nenek moyang dan komponen bawahan. Komponen induk boleh mencetuskan acara tersuai melalui kaedah $emit dan komponen anak boleh menggunakan kaedah $on untuk mendengar acara ini.

Berikut ialah contoh penggunaan acara tersuai:

// 父组件
Vue.component('button-counter', {
  template: '<button>{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  }
})

// 祖先组件
var app = new Vue({
  el: '#app',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

Dalam contoh ini, kami mentakrifkan komponen bernama button-counter. Komponen ini mempunyai acara onClick, dan setiap klik akan meningkatkan pembilang sebanyak 1. Selain itu, setiap kali ia diklik, ia turut melancarkan acara tersuai bernama increment dan menyerahkannya kepada komponen moyangnya. Komponen nenek moyang ini boleh mendengar acara menggunakan kaedah $on dan menambah jumlah kiraan apabila acara diterima.

Slot

Vue.js membolehkan pengguna mencipta komponen dengan lebih mudah dengan menggunakan slot. Ia membolehkan pengguna menentukan templat boleh guna semula yang boleh diganti atau dilanjutkan secara terpilih oleh komponen induk atau komponen nenek moyang.

Berikut ialah contoh komponen Vue.js menggunakan slot:

Vue.component('my-component', {
  template: `
<div>
  <h2 id="This-is-my-component">This is my component</h2>
  <slot></slot>
</div>
`
})

// 祖先组件
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: `
<my-component>
  <p>{{ message }}</p>
</my-component>
`
})

Dalam contoh ini, kami mentakrifkan komponen my-component. Slot <slot></slot> ditakrifkan dalam templat komponen Apabila my-component digunakan dalam komponen moyang, kandungan di dalam slot <p>{{message}}</p> akan dimasukkan ke dalam kedudukan slot templat komponen.

Penapis

Dalam Vue.js, penapis ialah fungsi yang boleh digunakan untuk memformat output. Penapis boleh digunakan dalam interpolasi pendakap kerinting berganda dan ungkapan v-bind untuk memformat teks. Vue.js menyediakan beberapa penapis terbina dalam, seperti: currency, capitalize, uppercase dan sebagainya.

Berikut ialah contoh penapis tersuai:

Vue.filter('reverse', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.split('').reverse().join('')
})

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

Dalam contoh ini, kami telah menentukan penapis tersuai bernama reverse. Apabila penapis ini digunakan untuk mengubah suai nilai message, ia menyongsangkan nilai dan mengembalikan hasil baharu.

Ringkasan

Vue.js ialah rangka kerja berkuasa yang mengandungi banyak tetapan dalaman. Artikel ini memperkenalkan sistem responsif Vue.js, fungsi cangkuk kitaran hayat, acara tersuai, slot, penapis dan tetapan penting lain. Mempelajari tetapan ini sangat penting untuk pembangun Vue.js, kerana menguasai kemahiran ini akan membina aplikasi web interaktif berkualiti tinggi dengan lebih baik.

Atas ialah kandungan terperinci Apakah tetapan dalaman vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!