上下高度拖拽是Web開發中經常需要實現的交互效果之一。在Vue中，我們可以借助其豐富的內建指令和生命周期鉤子函數來實現這一功能。接下來，我將為大家詳細介紹Vue上下高度拖拽的實現過程。

首先，我們需要在Vue組件中定義兩個div，分別用來表示拖拽區域和拖拽后展示的內容。在定義拖拽區域的div時，我們需要使用Vue的內建指令v-bind和v-on來綁定一些屬性和事件。具體來說，我們需要綁定style屬性和mousemove事件。style屬性用于動態設置div的高度，而mousemove事件則用于監聽鼠標滑動事件，以便動態改變div的高度。

接下來，我們需要在Vue組件中定義一個data屬性dragHeight來存儲拖拽區域的高度值，并在methods中定義handleMouseMove方法來監聽鼠標滑動事件并動態更新dragHeight屬性。

data() {
return {
dragHeight: 200 // 初始高度值
}
},
methods: {
handleMouseMove(event) {
this.dragHeight = event.clientY // 動態更新高度值
}
}

此時，我們已經實現了基本的上下高度拖拽效果。但是，如果我們想要在拖拽區域中顯示內容，我們還需要在Vue組件中定義一個div用來展示拖拽后的內容，并在computed屬性中動態計算該div的高度。在動態計算div高度時，我們可以用Vue組件中的this.$refs參考拖拽區域div的高度值。

拖拽后的內容展示區域
computed: {
calcDescHeight() {
let dragAreaHeight = this.$refs.dragArea.clientHeight
let descHeight = this.dragHeight - dragAreaHeight
return descHeight >0 ? descHeight : 0
}
}

最后，我們需要在Vue組件中定義一些CSS樣式來美化效果。具體來說，我們需要給拖拽區域div和拖拽后內容展示區域div設置一些基礎樣式，如背景顏色、邊框、內外邊距等。

綜上所述，Vue上下高度拖拽實現起來并不復雜。我們只需要定義拖拽區域div、動態監聽鼠標滑動事件、動態更新拖拽區域div高度值、定義內容展示區域div并動態計算其高度、給兩個div設置基礎樣式即可。