对于 Web 前端开发人员来说，取得元素高度是必不可少的一个功能。Vue 是一款流行的 JavaScript 框架，对于 Vue 的应用开发来说，如何取得元素高度也是前端开发人员需要了解的内容。下面，我们就来详细讲解一下 Vue 取得 div 元素高度的方法。

要取得 div 元素的高度，我们可以通过以下方法：

<template>
<div ref="myDiv"></div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv.offsetHeight);
}
}
</script>

以上代码中，我们在 template 标签中创建了一个 div 元素，并定义了 ref 属性为 "myDiv"。在 JavaScript 中，我们通过 this.$refs.myDiv.offsetHeight，即通过 $refs 属性获取到 myDiv 的引用，并得到 div 元素的高度。

如果我们需要动态监听 div 元素的高度变化，我们可以使用以下方法：

<template>
<div ref="myDiv" :style="{ height: divHeight }"></div>
</template>
<script>
export default {
data() {
return {
divHeight: '100px'
}
},
mounted() {
this.getMyDivHeight();
window.addEventListener('resize', this.getMyDivHeight);
},
methods: {
getMyDivHeight() {
this.divHeight = this.$refs.myDiv.offsetHeight + 'px';
}
}
}
</script>

以上代码中，我们通过 :style 属性绑定了 divHeight 变量，实现了 div 元素高度的动态监听。在 mounted 生命周期中，我们通过 getMyDivHeight 方法获取到 myDiv 元素的高度，并通过 divHeight 变量来动态调整 div 元素的高度。

这里提供了另一种获取 div 元素高度的方法：

<template>
<div ref="myDiv"></div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv.getBoundingClientRect().height);
}
}
</script>

以上代码中，我们使用了 getBoundingClientRect() 方法来获取 myDiv 元素的高度。该方法会返回一个 DOMRect 对象，该对象包含了元素的位置和大小信息，我们通过 height 属性来获取元素的高度。

Vue 中获取元素高度的方法多种多样，我们可以根据实际情况选择最合适的方法。通过上述方法，我们可以轻松地获取 div 元素的高度，实现前端开发的各种需求。