Comment faire fonctionner le nœud dom dans vue

Vue est un framework JavaScript populaire pour créer des applications Web modernes. Le concept principal de Vue est de séparer les données des vues et de fournir un mécanisme réactif pour refléter rapidement les modifications des données dans les vues. Le framework atteint bien ces objectifs, mais dans certains cas, les nœuds DOM doivent être manipulés directement.

Dans cet article, nous apprendrons comment Vue exploite les nœuds DOM et ses API associées.

Comment Vue exploite les nœuds DOM

Dans Vue, vous pouvez utiliser des instructions et des objets spéciaux pour faire fonctionner les nœuds DOM. Vue fournit plusieurs instructions et méthodes intégrées qui nous permettent de manipuler les nœuds DOM. Voici quelques directives et objets Vue utilisés pour manipuler les nœuds DOM : Fonction de rappel de liaison d'événement. Les événements courants incluent le clic et le survol de la souris, et le DOM est modifié dans certains de ces événements. Par exemple, nous pouvons utiliser la directive v-on pour modifier un certain texte uniquement en cliquant sur un bouton : la directive -bind est utilisée pour lier les données de Vue aux propriétés DOM. La valeur liée peut être une donnée définie dans Vue, une propriété de composant ou une expression Vue. Par exemple, liez la couleur d'arrière-plan à la couleur de la variable de données :

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

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

1. $refs object

$refs est un accès fourni par les méthodes Vue. des éléments du DOM. Vue créera une référence correspondante pour chaque élément DOM en utilisant l'attribut v-ref ou ref lors du rendu du composant. Dans cette application, pour mettre à jour le style de l'élément de liste, vous pouvez le trouver via l'objet $refs et définir le style : # 🎜🎜#

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

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

$el object

Lorsque le composant Vue démarre, le modèle du composant sera compilé dans une fonction de rendu et lié au composant. Définissez l'élément DOM sur l'attribut $el du composant. De cette façon, vous pouvez utiliser l'objet $el pour accéder directement au nœud DOM du composant. Par exemple, pour définir des styles pour un composant :

<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');
    }
  }
});

Ceci ci-dessus contient plusieurs instructions et objets Vue qui font fonctionner les nœuds DOM. Bien que Vue n'encourage aucune manipulation du DOM, dans certains cas, vous devrez peut-être manipuler le DOM. Dans ce cas, Vue fournit des API très utiles pour vous aider à interagir directement avec le DOM.

3. L'API commune de Vue pour faire fonctionner les nœuds DOM

Vue fournit quelques méthodes pour faire fonctionner directement le DOM. Voici quelques méthodes courantes permettant à Vue d'exploiter le DOM :

Ajouter et supprimer des éléments

Dans Vue, vous pouvez utiliser le $mount( ) dans Ajouter dynamiquement des composants au DOM. La méthode $mount vous aide à monter des composants sur n'importe quel élément HTML. Par exemple, pour ajouter un composant Vue à un élément avec l'ID « app » :

<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();
  }
});

De même, Vue fournit la méthode Remove pour supprimer un élément du DOM :

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

#🎜🎜 ## 🎜🎜#Accéder aux attributs de l'élément

Vous pouvez utiliser l'attribut $el fourni par Vue pour accéder aux attributs de l'élément. Par exemple, pour accéder au contenu texte HTML :

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

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

vm.$el.remove();

Définir les attributs de l'élément

Vous pouvez utiliser l'attribut $el fourni par Vue pour définir le attributs de l'élément. Par exemple, pour définir le contenu du texte HTML :

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

Conclusion

Vue propose diverses méthodes simples pour manipuler le DOM. Ces méthodes sont particulièrement importantes dans certaines situations où vous devez manipuler des éléments lors de l'utilisation de Vue pour le développement d'applications. Cependant, n'oubliez pas d'éviter de manipuler directement le DOM et d'éviter de manipuler le DOM pour garantir une mise en œuvre réussie du mécanisme réactif de base de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!