> 웹 프론트엔드 > JS 튜토리얼 > vue의 인스턴스 속성 vm.$els에 대한 간단한 이해

vue의 인스턴스 속성 vm.$els에 대한 간단한 이해

高洛峰
풀어 주다: 2016-12-03 09:36:17
원래의
1851명이 탐색했습니다.

vue 인스턴스 속성 vm.$els가 정확히 무엇인가요? 우리는 무엇에 주의해야 합니까? 자세한 내용은 이 기사를 읽어보시기 바랍니다.

표현식 필요 없음

매개변수: id(필수)

사용법:

인스턴스의 $els 전달을 용이하게 하기 위해 DOM 요소에 대한 인덱스를 등록합니다. 이 요소에 액세스하는 데 속합니다.

참고:

HTML은 대소문자를 구분하지 않기 때문에 v-el:someEl과 같은 camelCase 이름은 모두 소문자로 변환됩니다. This.$els.someEl은 v-el:some-el로 설정할 수 있습니다.

내가 이해한 바: $els는 document.querySelector('.class')의 기능과 유사하며 지정된 dom 요소를 가져올 수 있습니다.

예:

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)과 동일합니다. -입력').값

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿