How to operate dom node in vue

Vue is a popular JavaScript framework for building modern web applications. The core concept of Vue is to separate data from views and provide a responsive mechanism to quickly reflect data changes to the views. The framework achieves these goals well, but in some cases, DOM nodes must be manipulated directly.

In this article, we will learn how Vue operates DOM nodes and its related APIs.

How Vue operates DOM nodes

In Vue, you can use special instructions and objects to operate DOM nodes. Vue provides multiple built-in instructions and methods that allow us to manipulate DOM nodes. The following are some Vue instructions and objects used to operate DOM nodes:

1. v-on

The v-on instruction is used to bind a callback function to an event. Common events include click and mouseover, and the DOM is modified in some of these events. For example, we can use the v-on directive to change a certain text only on button click:

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

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

2. v-bind

The v-bind directive is used to Data in Vue is bound to DOM properties. The bound value can be data defined in Vue, a component property, or a Vue expression. For example, bind the background color to the data variable color:

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

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

3. $refs object

$refs is a method provided by Vue to access DOM elements. Vue will create a corresponding reference for each DOM element using the v-ref or ref attribute when rendering the component. In this application, to update the style of the list item, you can find it through the $refs object and set the style:

<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

When the Vue component starts, the component's template will be compiled into a rendering function and bound to the component. In the component's $el attribute Set the DOM element on. In this way, you can use the $el object to directly access the component's DOM node. For example, to set styles for a component:

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

The above are several Vue instructions and objects that operate DOM nodes. Although Vue encourages no manipulation of the DOM, in some cases you may need to manipulate the DOM. In this case, Vue provides some very useful APIs to help you interact directly with the DOM.

Vue’s common API for operating DOM nodes

Vue provides some methods for directly operating DOM. The following are some common methods for Vue to operate DOM:

1. Add and remove elements

In Vue, you can use the $mount() method to dynamically add components to the DOM. The $mount method helps you mount components onto any HTML element. For example, to add a Vue component to an element with the ID "app":

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

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

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

Likewise, Vue provides the remove method to remove an element from the DOM:

vm.$el.remove();

2. Accessing the element Attributes

You can use the $el attribute provided by Vue to access the attributes of the element. For example, to access HTML text content:

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

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

3. Set element attributes

You can use the $el attribute provided by Vue to set the attributes of the element. For example, to set HTML text content:

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

Conclusion

Vue provides a variety of easy ways to manipulate the DOM. These methods are especially important in certain situations when you need to manipulate elements when using Vue for application development. However, please remember to avoid directly manipulating the DOM and avoid manipulating the DOM to ensure successful implementation of Vue's core reactive mechanism.

The above is the detailed content of How to operate dom node in vue. For more information, please follow other related articles on the PHP Chinese website!