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节点实现的。