ホームページ > ウェブフロントエンド > jsチュートリアル > vue のインスタンス属性 vm.$els の簡単な理解

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

高洛峰
リリース: 2016-12-03 09:36:17
オリジナル
1851 人が閲覧しました

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

式は必要ありません

パラメータ: id (必須)

使用法:

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

注:

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

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

例:

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

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート