Vue.js 中获取 DOM 元素的技巧及应用场景-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，我们经常需要操作 DOM 元素，比如修改元素的样式、绑定事件等。本文将介绍 Vue.js 中获取 DOM 元素的几种方法，以及它们的应用场景，帮助读者更好地理解和使用 Vue.js。

1. $refs

Vue.js 提供了 $refs 属性，可以用来获取组件或元素的引用。我们可以在组件内用 ref 属性给元素命名，然后通过 $refs 属性获取该元素的引用。下面是一个例子：

// www.javascriptcn.com code example
<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    }
  }
}
</script>

在上面的例子中，我们给输入框元素加上了 ref="myInput" 属性，然后在 focusInput 方法中，通过 this.$refs.myInput 获取该元素的引用，调用 focus() 方法将焦点聚焦到该输入框上。

$refs 属性还可以用来获取组件的引用。如果一个组件有 ref 属性，那么它的 $refs 属性将指向该组件实例。例如：

// www.javascriptcn.com code example
<template>
  <div>
    <my-component ref="myComponent"></my-component>
    <button @click="callMyComponentMethod">Call My Component Method</button>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    callMyComponentMethod() {
      this.$refs.myComponent.myMethod();
    }
  }
}
</script>

在上面的例子中，我们在模板中引入了 MyComponent 组件，并给它加上了 ref="myComponent" 属性。在父组件中，我们可以通过 this.$refs.myComponent 获取该组件实例的引用，并调用它的 myMethod() 方法。

需要注意的是，$refs 属性只在组件渲染完成后才能被访问，因此如果在组件的 mounted 钩子函数中访问 $refs 属性，可以保证所有的子组件都已经被渲染完成。

2. document.getElementById

如果我们需要获取页面中的某个元素，可以使用原生的 document.getElementById 方法。例如：

// www.javascriptcn.com code example
<template>
  <div>
    <input id="myInput" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      document.getElementById('myInput').focus();
    }
  }
}
</script>

在上面的例子中，我们给输入框元素加上了 id="myInput" 属性，然后在 focusInput 方法中，通过 document.getElementById('myInput') 获取该元素的引用，调用 focus() 方法将焦点聚焦到该输入框上。

需要注意的是，使用 document.getElementById 方法获取元素的引用，会使代码与 HTML 紧密耦合，不利于组件化和模块化。因此在使用 Vue.js 开发时，应该尽量避免使用该方法。

3. $el

Vue.js 的组件实例有一个 $el 属性，可以用来获取该组件实例对应的 DOM 元素。例如：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Goodbye, Vue.js!';
      console.log(this.$el.innerHTML);
    }
  }
}
</script>

在上面的例子中，我们在组件的 changeMessage 方法中，修改了 message 数据的值，并在控制台中打印了 $el 属性的 innerHTML 属性。可以看到，$el 属性的值就是该组件实例对应的 DOM 元素。

需要注意的是，$el 属性只在组件渲染完成后才能被访问，因此如果在组件的 mounted 钩子函数中访问 $el 属性，可以保证该组件已经被渲染完成。

应用场景

Vue.js 中获取 DOM 元素的技巧在实际开发中非常有用。下面是一些常见的应用场景：

聚焦输入框。可以使用 $refs 属性或 document.getElementById 方法获取输入框的引用，并调用 focus() 方法将焦点聚焦到该输入框上。
弹出框位置计算。可以使用 $refs 属性或 $el 属性获取弹出框和触发弹出框的元素的引用，然后通过计算它们的位置，确定弹出框的位置。
图片懒加载。可以使用 $refs 属性或 $el 属性获取需要懒加载的图片元素的引用，然后在滚动事件中判断图片是否在可视区域内，如果是，则加载图片。

总之，在 Vue.js 中获取 DOM 元素的技巧是非常有用的，可以帮助我们更好地操作 DOM 元素，实现更加复杂的功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3f7d4a941bf7134784ba6

Vue.js 中获取 DOM 元素的技巧及应用场景

1. $refs

2. document.getElementById

3. $el

应用场景

接着读