Simple understanding of instance attributes vm.$els in vue

What exactly is the vue instance attribute vm.$els? What should we pay attention to? Please read this article for details.

No expression required

Parameters: id (required)

Usage:

Register an index for the DOM element to facilitate accessing this element through $els of the instance it belongs to.

Note:

Because HTML is not case-sensitive, camelCase names such as v-el:someEl will be converted to all lowercase. This.$els.someEl can be set with v-el:some-el.

My understanding: $els is similar to the function of document.querySelector('.class'), which can get the specified dom element.

Eg:

69c326b7a47093682eca9dea67f4e56d16b28748ea4df4d9c2150843fecfba68

var _dom = this.$els.maincontainer

Note: When fetching the dom element, the camel case naming is not recognized, as in the example above, The bound value is mainContainer, but you can only write maincontainer when fetching dom, otherwise it will not be recognized.

HTML code:

 <input type="text" class=&#39;name-input&#39; placeholder=&#39;请填写项目名称&#39; v-on:keyup.enter=&#39;saveProjectFun&#39; v-el:addProject>

js code:

//当用户按回车后，保存添加的项目
 saveProjectFun:function(){
 var obj={}
 obj.success=false;
 let name=this.$els.addproject.value;
 obj.projectName=name.replace(/\s+/g,""); 
 this.projectData.push(obj);
 this.addp=true;
 }

In fact, this.$els.addproject.value is equivalent to: document.querySelector('.name-input').value