Bagaimana untuk mengendalikan nod dom dalam vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden. Konsep teras Vue adalah untuk memisahkan data daripada paparan dan menyediakan mekanisme responsif untuk mencerminkan perubahan data pada paparan dengan cepat. Rangka kerja mencapai matlamat ini dengan baik, tetapi dalam beberapa kes, nod DOM mesti dimanipulasi secara langsung.

Dalam artikel ini, kita akan mempelajari cara Vue mengendalikan nod DOM dan API yang berkaitan dengannya.

Cara Vue mengendalikan nod DOM

Dalam Vue, anda boleh menggunakan arahan dan objek khas untuk mengendalikan nod DOM. Vue menyediakan berbilang arahan dan kaedah terbina dalam yang membolehkan kami memanipulasi nod DOM. Berikut ialah beberapa arahan dan objek Vue yang digunakan untuk mengendalikan nod DOM:

1. v-on

Arahan v-on digunakan untuk mengikat fungsi panggil balik ke acara . Peristiwa biasa termasuk klik dan alih tetikus, dan DOM diubah suai dalam beberapa acara ini. Sebagai contoh, kita boleh menggunakan arahan v-on untuk menukar teks tertentu hanya pada klik butang:

<button v-on:click="updateText"> 更改文本 </button>
<span>{{ text }}</span>

new Vue({
  el: '#app',
  data: {
    text: '老八租房网',
  },
  methods: {
    updateText() {
      this.text = '欢迎使用老八租房网';
    },
  },
});

2. v-bind

Arahan v-bind digunakan kepada Data dalam Vue terikat kepada sifat DOM. Nilai terikat boleh ditakrifkan data dalam Vue, sifat komponen atau ungkapan Vue. Sebagai contoh, ikat warna latar belakang kepada warna pembolehubah data:

<div v-bind:style="{ backgroundColor: color }">
    这里是背景颜色
</div>

new Vue({
  el: '#app',
  data: {
    color: '#00aaff'
  }
})

3. $refs object

$refs ialah kaedah yang disediakan oleh Vue untuk mengakses elemen DOM. Vue akan membuat rujukan yang sepadan untuk setiap elemen DOM menggunakan atribut v-ref atau ref semasa memaparkan komponen Dalam aplikasi ini, untuk mengemas kini gaya item senarai, anda boleh mencarinya melalui objek $refs dan menetapkan gaya:

<template>
  <ul>
    <li v-for="item in items" ref="list" :class="{ selected: item.selected }" @click="onItemClick(item)">
      {{ item.text }}
    </li>
  </ul>
</template>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: '列表项1', selected: false },
      { id: 2, text: '列表项2', selected: false },
      { id: 3, text: '列表项3', selected: false }
    ]
  },
  methods: {
    onItemClick(item) {
      item.selected = true;
      const el = this.$refs.list.find(li => li.item === item);
      el.classList.toggle('selected');
    }
  }
});

4. $el object

Apabila komponen Vue dimulakan, templat komponen akan disusun ke dalam fungsi pemaparan dan terikat pada komponen dalam atribut $el komponen Tetapkan elemen DOM pada. Dengan cara ini, anda boleh menggunakan objek $el untuk mengakses terus nod DOM komponen. Contohnya, untuk menetapkan gaya bagi komponen:

<template>
  <div class="container">
    <input type="text" v-model="text" />
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  mounted() {
    const el = this.$el.querySelector('input');
    el.focus();
  }
});

Di atas ialah beberapa arahan dan objek Vue yang mengendalikan nod DOM. Walaupun Vue tidak menggalakkan manipulasi DOM, dalam beberapa kes anda mungkin perlu memanipulasi DOM. Dalam kes ini, Vue menyediakan beberapa API yang sangat berguna untuk membantu anda berinteraksi secara langsung dengan DOM.

API biasa Vue untuk mengendalikan nod DOM

Vue menyediakan beberapa kaedah untuk mengendalikan DOM secara langsung. Berikut ialah beberapa kaedah biasa untuk Vue mengendalikan DOM:

1. Tambah dan alih keluar elemen

Dalam Vue, anda boleh menggunakan kaedah $mount() untuk menambah komponen secara dinamik kepada DOM. Kaedah $mount membantu anda melekapkan komponen pada mana-mana elemen HTML. Contohnya, untuk menambah komponen Vue pada elemen dengan ID "app":

<div id="app"></div>

const vm = new Vue({
  template: '<div>这里是动态插入的内容</div>'
});

// 将组件挂载到DOM上
vm.$mount('#app');

Begitu juga, Vue menyediakan kaedah alih keluar untuk mengalih keluar elemen daripada DOM:

vm.$el.remove();

2. Untuk mengakses elemen Atribut

boleh menggunakan atribut $el yang disediakan oleh Vue untuk mengakses atribut elemen. Contohnya, untuk mengakses kandungan teks HTML:

<div id="app">这里是文本内容</div>

const el = document.querySelector('#app');
console.log(el.textContent); // 输出：这里是文本内容

3. Tetapkan atribut elemen

Anda boleh menggunakan atribut $el yang disediakan oleh Vue untuk menetapkan atribut elemen. Contohnya, untuk menetapkan kandungan teks HTML:

const el = document.querySelector('#app');
el.textContent = '这里是更新后的文本内容';

Kesimpulan

Vue menyediakan pelbagai cara mudah untuk memanipulasi DOM. Kaedah ini amat penting dalam situasi tertentu apabila anda perlu memanipulasi elemen apabila menggunakan Vue untuk pembangunan aplikasi. Walau bagaimanapun, sila ingat untuk mengelak daripada memanipulasi DOM secara langsung dan elakkan memanipulasi DOM untuk memastikan kejayaan pelaksanaan mekanisme reaktif teras Vue.

Atas ialah kandungan terperinci Bagaimana untuk mengendalikan nod dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!