使用步骤

1. 在模板中定义元素并添加ref：

在需要获取宽高的元素上添加 ref，使得它能够被 Vue 访问到。

<template>
  <div ref="myElement" class="example">
    <!-- 你的内容 -->
  </div>
</template>

2. 在组件中获取元素的引用：

在 Vue 实例的实例化之后，使用 this.$refs 获取元素的引用，并通过原生 DOM 操作获取宽高。

<script>
export default {
  mounted() {
    this.getElementSize();
  },
  methods: {
    getElementSize() {
      const element = this.$refs.myElement;
      if (element) {
        // 获取元素的实际宽高
        const width = element.offsetWidth;
        const height = element.offsetHeight;
        console.log(`Width: ${width}, Height: ${height}`);
      }
    }
  }
};
</script>

详细示例代码

下面是一个完整的示例，展示如何在 Vue 项目中获取 DOM 元素的实际宽高：

<template>
  <div>
    <div ref="myElement" class="example">
      <!-- 你的内容 -->
      This is the element whose size we want to get.
    </div>
    <p>The width of the element is: {{ width }}px</p>
    <p>The height of the element is: {{ height }}px</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 0,
      height: 0
    };
  },
  mounted() {
    this.getElementSize();
  },
  methods: {
    getElementSize() {
      const element = this.$refs.myElement;
      if (element) {
        this.width = element.offsetWidth;
        this.height = element.offsetHeight;
        console.log(`Width: ${this.width}, Height: ${this.height}`);
      }
    }
  }
};
</script>

<style>
.example {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
</style>

源码解析

1. 模板（template）：为需要获取宽高的元素添加 ref="myElement"，使其可以通过 this.$refs.myElement 访问到。
2. 数据（data）：定义两个数据属性 width 和 height 来保存元素的实际宽高。
3. 挂载钩子（mounted）：使用 mounted 生命周期钩子函数，在组件挂载完成后调用 getElementSize 方法获取元素的实际宽高。
4. 方法（methods）：在 getElementSize 方法中，通过 this.$refs.myElement 获取元素的引用，并使用原生 DOM 属性 offsetWidth 和 offsetHeight 获取元素的实际宽高，并将其保存到数据属性 width 和 height 中。
5. 样式（style）：添加一些样式以便更容易看到元素的尺寸以及背景颜色。

这样，当组件挂载完成后，你就可以获取并显示元素的实际宽高了。你可以根据实际需要对代码进行调整和扩展。

#头条创作挑战赛##程序员##卫冕冠军意大利欧洲杯出局#