简单理解vue中实例属性vm.$els

Vue实例属性vm.$els：一文读懂

你是否曾经对Vue中的vm.$els属性感到困惑？今天，让我们一起揭开它的神秘面纱，深入了解它的用途和注意事项。

我们要明白，vm.$els是一个注册DOM元素的索引，允许我们通过所属实例轻松地访问这些元素。这是一个非常实用的工具，尤其在需要直接操作DOM元素时。

无需复杂的表达式，我们只需为DOM元素设置id，并通过vm.$els即可访问。值得注意的是，由于HTML不区分大小写，我们在使用v-el指令时采用的 camelCase 名字（例如v-el:someEl）在注册后会转为全小写。这意味着我们可以用v-el:some-el来设置this.$els.someEl。

举个例子，假设我们有如下的HTML代码：

。我们可以通过var _dom = this.$els.maincontainer来访问这个div元素。需要注意的是，这里必须是小写，无法识别驼峰命名。

在上一篇文章中，我就用到了vue的实例属性vm.$els。比如下面的HTML和JS代码：

HTML代码：

JS代码：

// 当用户按回车后，保存添加的项目

saveProjectFun: function() {

var obj = {};

obj.success = false;

let name = this.$els.addproject.value; // 这里，this.$els.addproject相当于document.querySelector('.name-input')

obj.projectName = name.replace(/\s+/g, "");

this.projectData.push(obj);

this.addp = true;

}

在上面的JS代码中，this.$els.addproject.value就相当于document.querySelector('.name-input').value，可以方便地获取输入框的值。

vm.$els是一个强大的工具，可以帮助我们更方便地操作DOM元素。我们也需要小心使用，注意区分大小写的规则，避免因为疏忽导致无法正确访问元素。希望这篇文章能帮助你更好地理解vue中的vm.$els属性，并能在实际开发中使用它。本文已被整理到了《Vue实例属性详解》系列文章中，欢迎大家学习阅读。也希望大家多多支持我们的博客——狼蚁SEO。