Discuss several methods of obtaining DOM elements in Vue-Front-end Q&A-php.cn

Discuss several methods of obtaining DOM elements in Vue

PHPz

Release： 2023-04-07 10:05:32

Original

6241 people have browsed it

Vue is a popular JavaScript framework that allows developers to easily build interactive web applications. One of the common needs is to get DOM elements in Vue components so that they can be manipulated. However, Vue has some special ways of getting DOM elements. In this article, we will explore several methods of obtaining DOM elements in Vue.

1. Get elements through $refs

$refs in Vue is a special object that provides a reference for all DOM elements in the component. In a Vue component, you can name an element through the ref attribute, and then use the $refs object to access the element. Here is an example:

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value);
    },
  },
};
</script>

Copy after login

In the above example, we added a ref attribute to the input box and set it to myInput. We can access this element using this.$refs.myInput. In the handleClick method, we get the value of the input box and print it to the console.

2. Get the element through the event parameter $event

When processing DOM events, the Vue component provides a special event parameter $event, which contains all information about the event, including the current event The target element (target).

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur(event) {
      console.log(event.target.value);
    },
  },
};
</script>

Copy after login

In the above example, we added a @blur event listener and bound it to the handleBlur method. When the input box loses focus, the handleBlur method is triggered. This method accepts an event parameter event and uses event.target.value to obtain the value of the input box.

3. Use third-party libraries

In addition to the methods provided by Vue, you can also use third-party libraries to obtain DOM elements. jQuery is a popular JavaScript library that makes it easy to get and manipulate DOM elements. You can add jQuery to a Vue component and then use jQuery's selectors to access elements.

<template>
  <div ref="myDiv">
    <p>Hello World!</p>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    const myDiv = $(this.$refs.myDiv);
    const p = myDiv.find("p");
    console.log(p.text());
  },
};
</script>

Copy after login

In the above example, we added a ref attribute to the

element and set it to myDiv. We then use jQuery selectors in the mounted() hook function to access the element and its children. Finally, we use p.text() to get the text content in the

element and print it to the console.

To sum up, Vue provides a variety of methods to obtain DOM elements, from simple $refs to powerful jQuery selectors. Developers can choose the best method for their application.

The above is the detailed content of Discuss several methods of obtaining DOM elements in Vue. For more information, please follow other related articles on the PHP Chinese website!