Di mana untuk meletakkan permulaan uniapp ini

Dalam proses membangunkan dengan Uniapp, kami akan menggunakan kata kunci ini di banyak tempat Contohnya, di dalam fungsi yang ditakrifkan dalam kaedah kaedah, ini merujuk kepada contoh Vue. Walau bagaimanapun, dalam fungsi kitaran hayat komponen yang dicipta dan dipasang, ini merujuk kepada komponen itu sendiri. Jadi bagaimana kita menggunakan kata kunci ini dengan betul dalam Uniapp? Terutamanya dalam permulaan, di manakah kita harus meletakkan ini?

Pertama, mari kita lihat proses pemulaan dalam Uniapp. Apabila mencipta projek Uniapp baharu, sistem akan menjana fail main.js lalai secara automatik. Dalam fail ini, kita boleh melihat kod berikut:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  ...App
})
app.$mount()

Seperti yang anda lihat, dalam fail ini, kami telah memperkenalkan komponen Vue dan App melalui penyata import dan mencipta aplikasi contoh Vue. Dalam contoh ini, kami tidak mengikat kata kunci ini secara manual, kerana Vue akan secara automatik menghalakannya kepada tika Vue semasa.

Apabila kami menulis komponen, kami juga boleh terus menggunakan kata kunci ini untuk mengakses data dan kaedah pada contoh Vue. Contohnya, dalam kaedah kaedah komponen, kita boleh mengakses data pada tika Vue seperti ini:

methods: {
  handleClick() {
    console.log(this.title)
  }
}

di mana this.title merujuk kepada atribut tajuk pada tika Vue.

Seterusnya, mari kita lihat cara kata kunci ini digunakan dalam fungsi kitaran hayat komponen yang dicipta dan dipasang.

Dalam fungsi kitaran hayat yang dicipta komponen, kita boleh melakukan beberapa operasi pemulaan komponen. Sebagai contoh, kita boleh memanggil antara muka latar belakang di sini untuk mendapatkan beberapa data, dan kemudian memberikannya kepada atribut data komponen untuk menghasilkan komponen. Di sini, ini merujuk kepada contoh komponen semasa. Contohnya:

created() {
  this.getData()
},
methods: {
  async getData() {
    const res = await this.$http.get('/api/data')
    this.list = res.data
  }
}

Kaedah this.$http.get di sini ialah kaedah terbina dalam Uniapp, yang digunakan untuk memulakan permintaan rangkaian. Kami memperuntukkan data yang dikembalikan oleh latar belakang kepada atribut senarai komponen dan data boleh dipaparkan dalam templat komponen melalui {{senarai}}.

Dalam fungsi kitaran hayat yang dipasang bagi komponen, kita boleh mengakses elemen DOM yang diberikan. Ini di sini juga merujuk kepada contoh komponen semasa. Sebagai contoh, kita boleh mendapatkan lebar dan ketinggian elemen di sini dan mengemas kini data. Contohnya:

mounted() {
  const element = this.$refs.container
  const width = element.offsetWidth
  const height = element.offsetHeight
  this.width = width
  this.height = height
}

This.$refs.container di sini ialah nod elemen yang refnya ialah bekas dalam komponen akses. Kami mendapat lebar dan ketinggian elemen dan menetapkannya kepada sifat lebar dan ketinggian komponen.

Ringkasnya, kata kunci ini dalam Uniapp biasanya merujuk kepada tika Vue semasa atau tika komponen, yang boleh digunakan mengikut senario penggunaan tertentu. Tiada masalah dalam menggunakan ini dalam fungsi kitaran hayat komponen yang dicipta dan dipasang. Hanya ambil perhatian bahawa ini merujuk kepada contoh komponen.

Mengenai tempat untuk meletakkan permulaan, kita boleh meletakkannya dalam fungsi kitaran hayat yang dicipta bagi komponen atau dalam fungsi kitaran hayat yang dibuat bagi tika Vue Keputusan khusus boleh dibuat berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Di mana untuk meletakkan permulaan uniapp ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!