Sembang mendalam tentang data pengendalian dan kaedah dalam vue

Vue ialah salah satu rangka kerja JavaScript yang paling popular dalam pembangunan web moden Penggunaannya boleh meningkatkan kecekapan pembangunan dan kebolehselenggaraan dengan sangat baik, serta dapat memudahkan beberapa tugas yang rumit. Teras Vue adalah dipacu data dan data diurus oleh Vue. Dalam Vue, terdapat dua jenis data, iaitu sifat dan sifat reaktif Suatu sifat merujuk kepada satu atau lebih nilai dalam objek, dan sifat reaktif merujuk kepada sifat yang boleh bertindak balas serta-merta apabila semua sifat terikat pandangannya. Pada masa yang sama, Vue juga menyediakan banyak kaedah untuk mengendalikan data Kaedah ini boleh mengendalikan struktur data yang kompleks seperti objek dan tatasusunan dengan mudah, menjadikan penyelenggaraan data lebih fleksibel dan cekap.

1. Sifat

Sifat dalam Vue ialah satu atau lebih nilai dalam objek, contohnya:

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

Dalam kod di atas, kita vm.message boleh diperolehi dengan mengakses Hello Vue! Dalam Vue, kita juga boleh mendapatkan semua nilai atribut ​​​​dalam contoh melalui kaedah $data, contohnya:

console.log(vm.$data) // 输出 {message: "Hello Vue!"}

dalam objek tetapan. Nilai atribut juga perlu memberi perhatian kepada beberapa butiran Vue tidak membenarkan pengubahsuaian langsung nilai atribut dalam objek Sebaliknya, anda perlu menggunakan kaedah yang disediakan oleh Vue sendiri, seperti:

vm.message = 'Hello World!' // 不会修改message的值
vm.$set(vm.obj, 'newProp', 123) // 增加一个名为newProp的属性并设置值为123
vm.$delete(vm.obj, 'propToDelete') // 删除一个名为propToDelete的属性

2. Atribut responsif

Sifat reaktif ialah sifat yang boleh mencerminkan serta-merta perubahan pada semua pandangan yang terikat padanya apabila data berubah. Untuk sifat responsif dalam Vue, anda perlu menggunakan kaedah Vue.observable() yang disediakan oleh Vue untuk menghantar data untuk dijejaki sebagai parameter, contohnya:

// 定义一个简单的响应式对象
var reactiveData = Vue.observable({
  message: 'Hello Vue!',
  count: 0
})

// 修改响应式对象中的值
reactiveData.message = 'Hello World!'
reactiveData.count++

// 在函数组件中使用reactiveData
var App = {
  render() {
    return `
      <div>
        <p>${reactiveData.message}</p>
        <p>${reactiveData.count}</p>
      </div>
    `
  }
}

Dalam contoh di atas, apabila kami mengubah suai mesej dalam reactiveData atau atribut count, perubahan akan disegerakkan kepada komponen App serta-merta, tanpa menggunakan kaedah seperti setState.

3. Pengikatan data

Pengikatan data ialah ciri teras dalam Vue Ia boleh menghubungkan paparan dan data melalui pengikatan data, menyediakan kaedah pembangunan yang lebih cekap dan mudah. Dalam Vue, data binding boleh dibahagikan kepada tiga kaedah iaitu interpolasi, binding expression dan binding HTML.

1. Interpolasi

Interpolasi ialah cara yang mudah dan mudah untuk memasukkan pembolehubah ke dalam DOM. Interpolasi boleh memasukkan data untuk dipaparkan dalam DOM Ungkapan interpolasi diletakkan di antara dua set simbol interpolasi {{ }}, contohnya:

<div>{{ message }}</div>

Apabila nilai atribut mesej berubah, ia dipaparkan. dalam DOM akan dikemas kini dengan sewajarnya.

2. Ungkapan mengikat

Ungkapan mengikat boleh memasukkan pembolehubah ke dalam atribut DOM. Ungkapan pengikatan dilakukan menggunakan arahan v-bind, contohnya:

<img v-bind:src="image" />

Dalam contoh di atas, kami mengikat data yang terletak dalam atribut image kepada atribut src. Apabila image berubah, src juga akan dikemas kini secara serentak.

3. Mengikat HTML

Mengikat HTML boleh memasukkan kod HTML ke dalam DOM melalui arahan v-html. Ini adalah ciri yang sangat berkuasa, tetapi tidak begitu selamat kerana ia boleh menyebabkan serangan skrip silang tapak (XSS) jika anda tidak berhati-hati. Dalam Vue, kita boleh menggunakan kod berikut untuk menapis input pengguna:

<div v-html="$sanitize(html)"></div>

4. Kaedah

Dalam Vue, beberapa kaedah disediakan untuk memanipulasi data dengan mudah, seperti yang disenaraikan di bawah Terdapat beberapa kaedah yang biasa digunakan:

1, $set dan $delete

Dalam Vue, mengubah suai secara langsung sifat objek tidak akan mencetuskan kemas kini paparan, jadi kita perlu menggunakan Kaedah $set untuk menambah sifat baharu secara manual dan mencetuskan kemas kini paparan Begitu juga, kita boleh menggunakan kaedah $delete untuk memadamkan harta, contohnya:

vm = new Vue({
  data: {
    a: 1
  }
})

// `vm.a` 是响应式的
vm.$set(vm, 'b', 2) // 该值是响应式的
vm.$delete(vm, 'a') // `vm.a` 不再是响应式的

2, $nextTick

dalam kehidupan Vue. cangkuk Selepas mengubah suai data dalam fungsi, operasi DOM yang sepadan tidak boleh dilakukan sehingga Vue memaparkan dan mengemas kini DOM. Jika anda perlu mendapatkan beberapa maklumat DOM selepas Vue memaparkan DOM, anda perlu menggunakan $nextTick, contohnya:

mounted() {
  this.$nextTick(() => {
    // DOM 渲染完之后执行的代码

  })
}

3 jam tangan

jam boleh memantau data dan melaksanakannya apabila ia berubah Operasi yang sepadan, contohnya:

data () {
  return {
    message: ''
  }
},
watch: {
  message (newVal, oldVal) {
    console.log(`new message is ${newVal}`)
    console.log(`old message is ${oldVal}`)
  }
}

Kod di atas mendengar atribut mesej, yang boleh melakukan beberapa operasi apabila ia berubah.

Ringkasan

Artikel ini memperkenalkan data dan kaedah dalam Vue Sifat dan kereaktifan adalah bahagian teras Vue, dan pengikatan data adalah satu lagi bahagian penting dalam Vue memanipulasi data. Apabila masa berubah, Vue terus dikemas kini dan diulang semakin ramai pembangun memilih untuk menggunakan Vue. Saya percaya bahawa masa depan Vue akan menjadi lebih baik dan lebih baik.

Atas ialah kandungan terperinci Sembang mendalam tentang data pengendalian dan kaedah dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!