對于 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 元素的高度，實現前端開發的各種需求。