vue のインスタンス属性 vm.$els の簡単な理解

vue インスタンス属性 vm.$els とは正確には何ですか?何に注意すべきでしょうか？詳しくはこちらの記事をお読みください。

式は必要ありません

パラメータ: id (必須)

使用法:

DOM 要素のインデックスを登録して、それが属するインスタンスの $els を介してこの要素にアクセスしやすくします。

注:

HTML では大文字と小文字が区別されないため、v-el:someEl などのキャメルケース名はすべて小文字に変換されます。 this.$els.someEl は v-el:some-el で設定できます。

私の理解: $els は、指定された DOM 要素を取得できる document.querySelector('.class') の関数に似ています。

例:

69c326b7a47093682eca9dea67f4e56d16b28748ea4df4d9c2150843fecfba68

var _dom = this.$els.maincontainer

注: dom 要素をフェッチするとき、キャメルケースの名前付けは認識されません。上記の例では、バインドされた値は mainContainer ですが、dom を取得するときに maincontainer のみを記述することができます。そうしないと、

HTML コード:

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

js コード:

//当用户按回车后，保存添加的项目
 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;
 }

実際には、this.$els が認識されません。 addproject.value は次と同等です: document.querySelector('.name-input').value