vueでdomノードを操作する方法

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue の中心的な概念は、データをビューから分離し、データの変更をビューに迅速に反映する応答メカニズムを提供することです。このフレームワークはこれらの目標をうまく達成しますが、場合によっては、DOM ノードを直接操作する必要があります。

この記事では、Vue が DOM ノードとその関連 API を操作する方法を学びます。

Vue による DOM ノードの操作方法

Vue では、特別な命令とオブジェクトを使用して DOM ノードを操作できます。 Vue には、DOM ノードを操作できるようにする複数の組み込み命令とメソッドが用意されています。以下は、DOM ノードの操作に使用される Vue 命令とオブジェクトの一部です。

1. v-on

v-on 命令は、コールバック関数をイベントにバインドするために使用されます。 。一般的なイベントにはクリックやマウスオーバーなどがあり、これらのイベントの一部では DOM が変更されます。たとえば、v-on ディレクティブを使用すると、ボタンのクリック時にのみ特定のテキストを変更できます。

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

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

2. v-bind

v-bind ディレクティブが使用されます。 Vue のデータは DOM プロパティにバインドされます。バインドされた値は、Vue で定義されたデータ、コンポーネント プロパティ、または Vue 式にすることができます。たとえば、背景色をデータ変数 color にバインドします。

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

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

3. $refs object

$refs は、DOM 要素にアクセスするために Vue によって提供されるメソッドです。 Vue は、コンポーネントのレンダリング時に v-ref または ref 属性を使用して、各 DOM 要素に対応する参照を作成します。このアプリケーションでは、リスト項目のスタイルを更新するには、$refs オブジェクトを通じてスタイルを見つけて、スタイルを設定します。

<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

Vue コンポーネントが開始されると、コンポーネントのテンプレートはレンダリング関数にコンパイルされ、コンポーネントにバインドされます。 DOM 要素をオンに設定します。このように、$el オブジェクトを使用してコンポーネントの DOM ノードに直接アクセスできます。たとえば、コンポーネントのスタイルを設定するには:

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

上記は、DOM ノードを操作するいくつかの Vue 命令とオブジェクトです。 Vue では DOM を操作しないことを推奨していますが、場合によっては DOM を操作する必要があるかもしれません。この場合、Vue は DOM と直接対話するのに役立ついくつかの非常に便利な API を提供します。

DOM ノードを操作するための Vue の共通 A​​PI

Vue は、DOM を直接操作するためのメソッドをいくつか提供します。 Vue が DOM を操作するための一般的なメソッドをいくつか次に示します。

1. 要素の追加と削除

Vue では、$mount() メソッドを使用してコンポーネントを動的に追加できます。 DOMに。 $mount メソッドは、任意の HTML 要素にコンポーネントをマウントするのに役立ちます。たとえば、ID が「app」の要素に Vue コンポーネントを追加するには:

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

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

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

同様に、Vue には DOM から要素を削除するための delete メソッドが用意されています:

vm.$el.remove();

2. 要素の属性へのアクセス

Vue が提供する $el 属性を使用して、要素の属性にアクセスできます。たとえば、HTML テキスト コンテンツにアクセスするには、次のようにします。

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

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

3. 要素属性の設定

Vue が提供する $el 属性を使用して、要素の属性を設定できます。たとえば、HTML テキスト コンテンツを設定するには、次のようにします。

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

結論

Vue には、DOM を操作するさまざまな簡単な方法が用意されています。これらのメソッドは、アプリケーション開発に Vue を使用するときに要素を操作する必要がある特定の状況で特に重要です。ただし、Vue のコア リアクティブ メカニズムの実装を確実に成功させるために、DOM を直接操作することは避けてください。

以上がvueでdomノードを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。