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

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

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

Ajouter et supprimer des éléments

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

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

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

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

vm.$el.remove();

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

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

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!