vue$el

vue$el 是 Vue 实例的一个属性，它表示 Vue 实例的挂载元素，即该实例所控制的 DOM 元素。通过 vue$el 可以访问 Vue 实例所控制的 DOM 元素的相关属性和方法。

首先，我们来了解一下 Vue 实例的基本用法。创建一个 Vue 实例的方式是通过 Vue 构造函数，传入一个选项对象来实例化一个 Vue 实例。选项对象中的 el 字段用于指定挂载元素。例如：

```javascript

var app = new Vue({

el: '#app'

data: {

message: 'Hello Vue!'

}

});

```

在上面的例子中，指定了挂载元素为 id 为 app 的 DOM 元素。那么，通过 app.$el 就可以访问该 DOM 元素的相关属性和方法。

Vue 实例的挂载元素上可以使用一些 DOM 属性和方法，比如 innerHTML、style、classList 等。你可以通过 vue$el 来获取这些属性和方法。下面是一些常见的例子。

1. 获取挂载元素的 innerHTML：

```javascript

var innerHTML = app.$el.innerHTML;

console.log(innerHTML);

```

2. 修改挂载元素的样式：

```javascript

app.$el.style.color = 'red';

```

3. 给挂载元素添加一个类名：

```javascript

app.$el.classList.add('custom-class');

```

4. 获取子元素的数量：

```javascript

var childCount = app.$el.children.length;

console.log(childCount);

```

可以看出，通过 vue$el 可以获取到挂载元素的各种属性和方法，这为我们直接对 DOM 元素进行操作提供了很大的方便。但是需要注意的是，挂载元素必须在实例化 Vue 实例之前就已经存在于 DOM 树中，否则 vue$el 将为 null。

另外，需要注意的是，vue$el 是一个实例属性，只能在实例化 Vue 实例后才能访问到。如果在 Vue 实例实例化之前访问 vue$el，将会得到 undefined，因为此时挂载元素还没有生成。

总结一下，vue$el 是 Vue 实例的一个属性，用于访问实例所控制的挂载元素的相关属性和方法。通过 vue$el，我们可以方便地操作与该实例绑定的 DOM 元素，实现各种交互效果。