구성 요소는 무엇입니까?
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화 할 수 있습니다. 더 높은 수준에서 구성 요소는 사용자 정의 요소이며 Vue.js의 컴파일러는 특수 기능을 추가합니다. 경우에 따라 구성 요소는 IS 기능으로 확장 된 기본 HTML 요소의 형태 일 수도 있습니다.
다음으로 VUEJS 일원 바인딩, 양방향 바인딩, 목록 렌더링 및 응답 기능에 대한 기본 지식을 소개하겠습니다. 특정 세부 사항은 다음과 같습니다.
(i) 일원 결합
<div id = "app"> {{message}} </div> <cript> new vue ({el : '#app', data : {message : 'hello vue.js!'}}) </script>①e는 바인딩, 바인딩 ID = 앱 태그를 의미해야합니다
다음으로 변경할 수도 있습니다.
<div> {{message}} </div>el : '.app',
마찬가지로 효과적입니다.
그러나 여러 가지가 있으면 첫 번째 부분에만 작동합니다.
<div> {{message}} </div> <div> {{message}} </div> hello vue.js! {{message}}data 데이터의 메시지 변수는 {{message}의 값을 나타냅니다.
(2) 양방향 결합
<div id = "app"> {{message}} <br/> <input v-model = "message"/> </div> <cript> new vue ({el : '#app', data : {message : 'hello vue.js!'}}) </script>효과는 다음과 같습니다.
초기 값은 입력 입력 상자에 있고 값은 데이터의 메시지 속성 값입니다.
② 입력 상자의 값을 수정하면 외부 값에 영향을 줄 수 있습니다.
(iii) 함수 반환 값
<div id = "app"> {{message ()}} <br/> <input v-model = "message ()"/> </div> <cript> new vue ({el : '#app', data : {message : {return 'hello vue.js!';}}} </script>효과:
① 출력 값은 또한 메시지의 반환 값입니다.
② 단점 : 양방향 바인딩을 잃는다!
(iv) 렌더링 목록
<div id = "app"> <ul> <li v-for = "todos에서 목록"> {{list.text}} </li> </ul> </div> </div> </ul> </div> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul>. </스크립트>v-for의 목록은 i in for in과 유사합니다.
몸소,
todos의 목록은 Todos의 목록에 대해 이해할 수 있습니다.
② 그런 다음 다음 줄의 텍스트를 todos [list] .text로 이해합니다.
그런 다음이 V-For 태그는 어디에 있습니까? 그 안에 여러 번 복사됩니다.
(v) 프로세스 사용자 입력
<div id = "app"> <input v-model = "message"> <input type = "button"value = "value +1"v-on : "add"/> <input type = "value ="value-1 "v-on :"minus "/> <input type ="value = "reset"/> v-on : "reset"/> <script> new vue (<apl), <<apl. 데이터 : 1}, methods : {wort () {this.message ++;효과:
① 입력 상자의 값은 추가 버튼을 한 번 클릭하면 값이 +1입니다.
② 추가 할 수없는 경우 NAN과 같이 정상 표현식이 잘못 추가되면 결과가 반환됩니다.
data 데이터의 메시지 값은 초기 값입니다.
method는 쉼표로 분리 된 함수 컬렉션입니다.
value 값을 얻을 때 값을 추가하십시오. 예를 들어, Message는 메시지 값을 가져옵니다.
(vi) 다기능
<div id = "app"> <input v-model = "val"v-on : keypress.enter = "addtolist"> <ul> v-for = "val in value"> {{val.val}} <input type = "button"value = "delete"v-on : "removelist ($ index ($ index)": </ul> </ul> </ul> '#App', {val : value : []}, methods : {val val = parseint (this.val.trim ()); 문자열 (val + 1); removelist : function (index) {index, 1) </script>효과:
초기 입력 상자의 값은 1입니다.
입력 상자의 Enter를 눌러 입력 상자의 내용을 숫자로 변환하고 목록에 추가합니다. 목록의 변환 된 숫자와 삭제 버튼과 입력 상자의 값은 숫자로 변환되어 추가 된 값으로 변경됩니다.
그림과 같이 :
HIST는 양방향 바인딩을 사용하고 입력 값을 데이터의 값 배열로 푸시 한 다음 렌더링 목록의 효과를 사용하여 여러 행의 값을 출력합니다.
button 버튼 태그에서 함수의 매개 변수 이름에는 매개 변수가 주어지며 매개 변수 이름은 $ index입니다.
⑤ 태그에서 트리거 된 함수의 기능 이름을 브래킷이나 괄호없이 추가 할 수 있습니다. 실제 측정은 효과가없는 것 같습니다.
(7) 태그 및 API 요약 (1)
① {{variable name}}
바운드 변수를 나타냅니다. 호출 할 때 변수 이름이 필요합니다
② v-model = "변수"
양방향 바인딩을 사용하십시오. 입력에 유형이 추가되지 않으면 텍스트입니다. 유형이 추가되면 예를 들어 유형입니다.
<입력 v-model = "date"type = "date"/> <li> {{date}} </li>날짜 유형 입력 상자의 값은 LI 태그에 표시된 컨텐츠와 함께 바인딩됩니다.
③ v-on : 클릭 =”함수 이름”
이 함수는 클릭하면 ()를 추가 할 수 있는지 여부를 클릭 할 때 트리거됩니다. $ index는 인덱스를 나타내는 매개 변수로 사용되며 인덱스 값은 0부터 시작됩니다.
v-for
배열 컨텐츠가 업데이트 된 후, 양방향 바운드는 V- 모델과 마찬가지로 실시간으로 업데이트됩니다.
The For in 문과 유사하게 여러 번 사용됩니다.
V-ON : 이벤트
즉, 트리거 된 이벤트, 클릭 (클릭), Keypress (클릭)가 있습니다.
Keypress.enter는 캐리지 리턴, keypress.space입니다.
더 많은 것을 볼 필요가 있습니다
⑥ 새로운 vue
Vue의 새로운 인스턴스를 통해이 인스턴스의 매개 변수로 객체를 전달하십시오.
안에:
EL은 바운드 템플릿을 의미합니다 (첫 번째 바운드 만 일치합니다)
데이터는 데이터를 나타내며, 예를 들어 v-model 또는 {{variable name}}과 같이 직접 사용할 수 있습니다.
행동 양식
⑦ 함수 내부의 변수를 호출합니다
예를 들어 : variable name : 예를 들어 :
데이터 : {val : "1", 값 : []}, 메소드 : {addTolist : function () {console.log (this.val);this.val html의 {{val}}이기도하는 data.val 위의 val은 v-model = "val"이지만 그렇지 않습니다.
<li v-for = "val in value"> {{val.val}} <input type = "button"value = "delete"v-on : "removelist ($ index)"/> </li>그 이유에 관해서는, 나는 개인적으로 여기 Val이 V-For의 범위 내에 있다고 생각하므로 값의 Val은 스코프 체인에서 우선 순위가 높다고 생각합니다.
위의 것은 편집자가 소개 한 Vuejs의 첫 번째 입문 자습서 (일원 바인딩, 양방향 바인딩, 목록 렌더링, 응답 함수)에 대한 자세한 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!