Cara menggunakan data statik dalam vue

Vue.js ialah rangka kerja bahagian hadapan MVVM ringan yang boleh mengurus aplikasi bahagian hadapan yang kompleks dengan mudah. Dalam proses menggunakan Vue.js, selain berinteraksi dengan antara muka data bahagian belakang, kami juga perlu memproses data statik, seperti beberapa nilai lalai, pemalar, konfigurasi, dll. dalam halaman Artikel ini akan memperkenalkan caranya untuk menggunakan data statik dalam Vue.js.

1. Tentukan data statik dalam Vue.js

Untuk menentukan data statik, anda boleh menggunakan pilihan data yang disediakan dalam Vue.js, yang boleh menjadi fungsi atau objek.

(1) Mod fungsi:

new Vue({
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

(2) Mod objek:

new Vue({
  data: {
    message: 'Hello Vue.js!'
  }
})

Untuk menentukan data statik dalam komponen, anda perlu menggunakan fungsi , iaitu komponen memerlukan Kembalikan objek baharu. Memandangkan komponen boleh digunakan semula, ia tidak boleh ditakrifkan secara langsung menggunakan objek, jika tidak ralat akan berlaku.

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  template: '<div>{{ message }}</div>'
})

Dalam contoh ini, kami mentakrifkan komponen dan kami perlu mengembalikan objek yang mengandungi sifat mesej.

2. Menggunakan data statik dalam Vue.js

Untuk menggunakan data statik dalam Vue.js, kita perlu menginterpolasi atau mengikat ungkapan dalam templat.

(1) Interpolasi

Interpolasi ialah cara untuk memasukkan data ke dalam pepohon DOM. Gunakan {{ }} untuk memasukkan data Vue.js. Di bawah ialah contoh menggunakan interpolasi.

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

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

Dalam contoh ini, kami menggunakan mesej data Vue.js untuk memasukkan ke dalam elemen

(2) Atribut pengikat

Selain menggunakan interpolasi untuk memaparkan data, anda juga boleh menggunakan arahan v-bind untuk mengikat salah satu atribut elemen. Berikut ialah contoh penggunaan v-bind:

<div id="app">
  <img v-bind:src="imageSrc">
</div>

new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://vuejs.org/images/logo.png'
  }
})

Dalam contoh ini, kami mengikat atribut src bagi elemen

(3) Menggunakan penapis

Apabila kita perlu melakukan pemprosesan tertentu pada data statik, kita boleh menggunakan penapis yang disediakan oleh Vue.js untuk memprosesnya. Di bawah ialah contoh penggunaan penapis.

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

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  el: '#app',
  data: {
    message: 'hello vue.js!'
  }
})

Dalam contoh ini, kami mentakrifkan huruf besar penapis yang menggunakan huruf besar pertama rentetan. Penggunaan dalam templat adalah untuk mengikuti mesej dengan aksara paip (|) dan nama penapis.

3. Vue.js mengemas kini data statik secara dinamik

Apabila kami perlu mengemas kini data statik secara dinamik, kami hanya perlu mengubah suai data terikat melalui kaedah contoh Vue.js.

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</div>

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

Dalam contoh ini, kami mengikat elemen input dan menggunakan arahan model v untuk mengikatnya pada mesej data tika Vue.js. Apabila data berubah, Vue.js akan mengemas kini DOM secara automatik.

4. Ringkasan

Melalui kajian artikel ini, kami telah mempelajari cara mentakrif dan menggunakan data statik dalam Vue.js. Pada masa yang sama, kami juga mempelajari cara menggunakan kaedah contoh Vue.js untuk mengemas kini data statik secara dinamik. Dalam pembangunan sebenar, kita perlu menggunakan teknik di atas secara fleksibel untuk merealisasikan keperluan pembangunan kita dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan data statik dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!