在Vue中，取得HTML元素的值是一項非常重要的任務，特別是當您想收集和處理表單數據時。在本文中，我們將討論如何使用Vue來獲取HTML元素的值。

Vue提供了一個v-model指令用于將表單元素的值綁定到Vue實例上。如果您的表單元素需要進行雙向數據綁定，例如輸入框，下拉框等，您可以像下面這樣使用v-model指令：

<template>
<div>
<input v-model="message" />
{{ message }}
</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
}
}
</script>

在這個例子中，我們綁定了一個message屬性到輸入框的值，而且在Vue實例里初始化了這個屬性的值為空。因此，在輸入框中改變值時，message值也隨之變化，并且{{ message }}表達式也會更新。

如果您想獲取沒有v-model綁定的表單元素的值，例如單選按鈕，復選框和下拉框等，您可以使用JavaScript來獲取元素的值。您可以通過在DOM元素上添加ref屬性來訪問這些元素，并使用$refs對象來訪問它們。下面是一個例子：

<template>
<div>
<input type="checkbox" ref="checkValue" />
<button @click="getValue">Get Value</button>
</div>
</template>
<script>
export default {
methods: {
getValue () {
console.log(this.$refs.checkValue.checked);
}
}
}
</script>

在這個例子中，我們添加了一個ref屬性到復選框，并在Vue實例方法中使用this.$refs.checkValue.checked來獲取復選框的值。