Vue是一種流行的JavaScript框架，開發人員可以使用它輕松構建外觀華麗、功能豐富的Web應用程序。而$el和$ref是Vue的兩個關鍵屬性，可以使用它們來操作元素。

$el是Vue實例的一個屬性，它表示Vue組件實例的根HTML元素。在Vue實例創建之后，可以使用$el來訪問該實例根元素的DOM節點。以下是一個使用$el訪問DOM節點的示例：

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
console.log(vm.$el) // <div id="app">...</div>

在上面的代碼中，我們創建了一個Vue實例并將其附加到一個id為“app”的DOM元素上。我們使用vm.$el訪問該實例的根元素，將補人DOM元素以字符串的形式輸出到控制臺。

除了$el屬性，Vue還提供了$ref屬性。$ref是一個特殊的屬性，可以用于在Vue模板或組件中標識特定的子元素。以下是一個使用$ref訪問子元素的示例：

<template>
<div>
<input type="text" v-model="message" ref="input">
<button v-on:click="logMessage">Log Message</button>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
logMessage: function () {
console.log(this.$refs.input.value)
}
}
})
</script>

在上面的代碼中，我們使用$ref屬性為輸入元素命名，并將其綁定到Vue實例的input屬性中。當用戶輸入文本時，message屬性將更新。當用戶單擊“Log Message”按鈕時，我們將在控制臺中記錄輸入文本。這是通過使用vm.$refs.input訪問輸入元素的DOM節點實現的。