JavaScript의 Avalon 바인딩 속성 요약

avalon은 모든 프런트엔드 코드를 두 부분으로 완전히 나누는 프런트엔드 MVVM 프레임워크입니다. 뷰 처리는 바인딩을 통해 구현되며(Angular에는 명령어라는 더 멋진 용어가 있습니다) 비즈니스 로직은 VM이라는 개체에 집중됩니다. 와 함께. VM의 데이터를 조작하는 한 자동으로 마법처럼 뷰에 동기화됩니다.

$model($가 아닌 모든 속성), $event(이벤트 객체)

1. 범위 묘사

ms-controller: 다음 원칙에 따른 상향식 Proximity DOM 트리 스캔

ms-important: 이 노드 이하만 스캔 영역으로 스캔

ms-skip: 바인딩 무효화

2. -way 바인딩 정의된 속성: 데이터를 DOM 노드에 바인딩(VM이 데이터를 V에 동기화)하는 것 외에도 수신 이벤트도 노드 데이터가 변경되면 비밀리에 노드에 바인딩됩니다. 적시에 VM

(1) 텍스트, 비밀번호, 텍스트 영역의 바인딩 값은 문자열(ms-duplex-text)이어야 합니다.

(2)radio: 부울(ms)로 바인딩 -duplex-boolean)

(3)확인란: 배열로 바인딩(ms-duplex-string)

(4)select: 문자열 또는 배열로 바인딩(ms-duplex-string)

ms-duplex2.0 바인딩 속성이 뒤따릅니다

3. ms-visible: 토글과 유사하게 표현식이 true로 표시되며 표시를 차단 또는 없음으로 설정하여 표시하거나 숨깁니다

4. 삽입 및 제거 처리 ms-if: 노드 요소 표시 요소 추가, 주석 숨겨진 노드 설정(노드 삭제)

5. 데이터 ms-data- * 캐시, ms-data를 사용하여 개체 또는 배열 저장(속성 대신 DOM 노드 개체에 바인딩), 노드에 저장, 표시 시 반환 처리 및 data-*로 바인딩 attribute

6. 속성 작동 ms-class(class),ms-duplex(value),ms-attr,ms-href,ms-src

부울 속성: ms-attr-disabled ,ms-attr-readonly,ms-attr -selected,ms-attr-checked

문자열 고유 특성: ms-attr-id,ms-attr-name,ms-attr-title,ms-src, ms-href

사용자 정의 속성: ms-attr-data-url, ms-attr-data-id

ms-class: ms-class='active' ms-class ='active:isOk'
ms-active,ms-hover

7, ms-duplex2.0

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

보조 데이터-이중-초점,데이터-이중-변경,데이터-이중-이벤트

8. 스타일 작업: ms-css(인라인), ms-class(외부 소개)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9. 이벤트 바인딩: ms-on-eventName,ms-eventName

ms-mouseenter, ms-mouseleave(선택한 요소에만 적용), ms -input(ms-on-input), 여러 이벤트의 바인딩 순서는 자연수와 관련이 없으며 이벤트 순서와 관련이 있습니다

10. 루프 작업

ms-each-traverse 임시 변수(상위 요소 바인딩)

ms-repeat - 임시 변수 트래버스(하위 요소에 바인딩)

ms-with - 임시 변수 트래버스(바인딩) 상위 요소)

배열: el 기본 임시 변수, $index 현재 요소의 인덱스, $first가 첫 번째 요소인지 여부 boolean, $last, $remove는 현재 요소를 삭제하는 함수 $outer를 반환합니다. 내부 루프 외부 루프 변수

해시(객체): $key 키 이름, $val 키 값, $outer ($outer.$index)

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

객체의 키 값 수정:

객체의 키 값 쌍 수정:

배열의 값 수정: array object.set(subscript, value )

배열의 객체 값을 수정합니다:Array object [subscript]. 키 이름 = 키 값

순회 콜백 함수(속성)

data-each; -rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

루핑 시 데이터 길이를 계산하려면 크기를 사용하세요. , 길이가 아닌 ms-if 대신 ms-if-loop를 사용하십시오. ms-if가 ms-repeat보다 우선하므로

11. 템플릿 참조

12. 🎜>13. 모듈 통신

다음은 avalon 범위 구분 방법을 소개합니다

프론트 엔드 개발에 avalonJS를 사용할 경우 데이터 바인딩 범위를 정의해야 합니다.

(1) ms-controller: 이 바인딩 속성은 근접성 원칙에 따라 범위를 묘사합니다. 먼저 이 태그로 시작하여 온라인으로 검색합니다.

(2) ms-important: 이 바인딩 속성 해당 태그만 검색합니다. vm 바인딩 데이터가 없으면 그대로 페이지에 출력됩니다.

(3) ms-skip: 이 바인딩 속성의 기능은 데이터를 무효화하는 것입니다. 바인딩 즉, 범위에 바인딩된 데이터가 있는지 여부에 관계없이 보간 표현식이 그대로 출력됩니다.