뷰의 연구 노트 (3) - 브랜드 관리 시스템

기술 포인트

후크 기능
사용자 정의 명령
사용자 정의 필터
계산 된 속성
리스너 등록

사용자 정의 명령

이유는 사용자 정의 명령이 필요합니까?

코드 재사용과 유연성을 위해.

명령 카테고리 :

글로벌 지침 :

예 지령 VM 외부에서 생성;
Vue.directive 만든;

지역 교육 : 보충 후

사용자 정의 명령을 정의하는 방법? (할당되지 않음)

Vue.directive (명령 이름, {삽입 (엘, 바인딩) {}})

어떻게 사용자 정의 명령을 사용 하는가? (할당되지 않음)

V- 명령 이름

값을 정의하는 방법에 대한 지침?

Vue.directive (名称, {삽입 (엘, 바인딩) {binding.value}})

어떻게 명령이 할당을 필요로 사용 하는가?

V- 명령 이름 = '값'

VUE의 전체 수명주기에 후크 기능이

장착 후크 함수가 그 독립 구조, 방법 속성을 쓰지 않는다
기능 후크 : 기능이 자동으로 장면을 트리거합니다

VUE는 지루한 작업 DOM에서 우리를 해방 할 수 있기 때문에 돔, 요소를 얻을 수있는 기본 방법을 사용하지 않는 것이 좋습니다

REF VUE 의해 표시 소자 (참조)

REF = '레이블 값'
ID 기능은 이전 설정과 유사
이것에 의해 값을 가져옵니다. $ 참고 문헌

위의 구현하지만,하지만 한 가지 큰 단점이있다 : 당신이 변화의 요소의 포커스를 취득해야하고, 템플릿 코드 및 장착 후크 함수 코드를 수정할 필요가 있다는 것을 의미하는 경우 - 불편하고 불합리한입니다. 나는이 효과를 얻을 수 있도록 노력하겠습니다 : 나는 요소가 호출에 포커스를 취득해야하는 경우, 요소 이득 초점 기능 (기능) 할 수 있습니다 하나를 만들어, 존재하지 않는, 그렇지 않은 경우 -이 일이 명령어입니다;

지침 : 특정 기능을 달성 할 수있는, 사용자가 선택하여 사용할 수 있습니다

무엇 글로벌 사용자 정의 명령입니다 : VUE 예 외부에서 만든 지침

글로벌 사용자 정의 명령을 만드는 방법

Vue.directive (이름, {삽입 후크 함수})

삽입 후크 기능 : 부가 명령 요소의 부모 노드에 삽입 트리거링 - 화이트 트리 생성 DOM 그

Vue.directive ( '포커스' , {
     // EL :이 요소를 추가하는 것은, 엘이 직접 운영 DOM 현재 명령을 사용할 수있다는     
    {)가 (EL, 바인딩, vnode에 삽입
         // 우리가 얻을 초점 요소 설정해야 
        CONSOLE.LOG을 (EL) 
        el.focus () 
    } 
})

새로운 수요 : 우리는 사용자 환경에 따라 텍스트 색상을 수정해야

지침에 의해 구현

Vue.directive으로 (이름, {삽입 (엘, 바인딩) {}})

명령을 사용 : V- 이름 = '값'

// 지정 명령의 색상 설정 
Vue.directive ( 'setColor를'을 {
     // EL :이 명령은 소자를 사용 
    // 바인딩 : 그것은 속성 값을 가진 개체이고, 명령어의 현재 값은 바인딩 
    삽입 된 (EL, 바인딩) { 
        CONSOLE.LOG (바인딩) 
        el.style.color = binding.value 
    } 
})

세부 사항 :

세부 사항을 명명 : 특정 명령의 이름을 지정할 때 권장하는 소문자

업데이트 후크 함수 템플릿 데이터 또는 콘텐츠를 처리 할 때 변경이 자동으로 트리거

// 페이지 새로 고침 명령의 값의 변화를 모니터링, 업데이트, 추가 
{(EL 바인딩) 업데이트 
    (EL을)를 CONSOLE.LOG를 
    을 console.log (바인딩) 
    el.style.color = binding.value 
}

필터

역할 : 수신 데이터 처리부는, 합리적인 결과를 반환

종 :

글로벌 필터 : (외부) 전 VM 예를 들어 필터 생성
지역 필터 : 내부에서 생성 된 필터 조립체

어떻게 정의하는

Vue.filter (이름, 기능)

세부 정보

필터는 데이터 객체가 매개 변수를 수신 기본값으로이 매개 변수는 현재 통화 필터입니다
수동으로 매개 변수를 전달하는 경우, 직접의 기본 매개 변수를받은 후 새 매개 변수를 추가 할 필터를 의미하는 기본 매개 변수가 전달에 영향을 미치지 않습니다
필터가 결과를 반환해야하기 때문에 기능 필터는 수익을 쓰기 "해야한다"

어떻게 불러?

파이프 기호를 통해 |
형식 : 필터 데이터를 호출 할 필요가 | 필터 이름

// 添加全局的自定义过滤器 
Vue.filter ( 'timeForamt'(날짜, seperator1) => {
     // var에 날짜 = 새로운 날짜 (); 
    // var에 seperator1 = "/"; 
    var에 년 = date.getFullYear ();
     var에 달 date.getMonth = () + 1 ]
     VAR strDate = date.getDate ()
     경우 (개월> = 1 && 개월 <= 9 ) { 
        개월 = "0"+ 개월; 
    } 
    경우 (strDate> = 0 && strDate <= 9 ) { 
        strDate = "0"+ strDate;
    } 
    var에 하는 currentDate = 년 + seperator1 + 월 + seperator1 +strDate;
    반환 하는 currentDate을; 
})

계산 된 속성

계산 된 속성 무엇인가가 복잡한 비즈니스 로직을 캡슐화 할 수있는 객체의 속성입니다 - 방법

함수는 속성의 계산에 정의되어 있지만, 일반 건물처럼 사용할 수 있습니다, 속성을 계산하는 데 사용하려면
함수가 한 속성입니다 내부, 그것은 그렇지 않으면 오류, 기능의 방법으로 호출 할 수 없습니다

어떤 계산 된 속성을 사용하여 장면 : 템플릿 사업을 더 복잡하게하는 것은 당신이 재산 캡슐화를 계산하는 데 사용할 수 있습니다

계산 된 속성 종속 데이터 변경은, 상기 계산 된 속성이 트리거 될 때
소위 종속 데이터에 의존이있는 부재를 의미

이것은 종래의 방법과 다른

당신이 방법을 사용할 때 캐싱 메커니즘의 더 일반적인 방법은 없습니다, 한, 그것은 될 것입니다 방법을 실행 부르는해야한다
효율을 향상시키기 위해 - 기본 계산만큼 의존성의 값이, 다음 속성을 호출하지 재 계산이 변경되지 않도록하지만, 계산 결과 한번 수단 의존 속성 캐싱

속성 구현을 계산하기 위해 검색 기능을 사용하여

계산 { 
    검색 () { 
        // 사용자 키워드의 변경을 모니터링하지만, 사용자 입력이 변경되면이를 다시 검색 할 필요가있다 
        // 속성 함수는 일반적으로 연산 결과를 반환 계산 
        // VAR을 = [] 결과 
        // 대해 (var에 나는 = 0; 나는 <this.brandList.length, 나는 ++) { 
        //      // 설명이 객체의 값의 이름을 내가 녹음 중 하나를 찾고 키워드가 포함되어 
        //      // 당신이 중 하나를 입력하지 않은 경우를 키워드, this.userKey 기본값은 ""입니다 
        //      IF (this.brandList [I] .name.indexOf (this.userKey)! = -1) { 
        //          result.push (this.brandList [I]) 
        / /      } 
        // } 
        // 결과를 리턴 
        // 값 어레이로부터 제거 될 때마다, 콜백 함수 값으로 전달되는 매개 변수 
        // 콜백의 값은 조건이 검출 된 경우, 그 값의 값이됩니다 결정 내부적으로 생성 된 필터에있어서 도착 임시 배열에 저장되어, 끝이 도착 어레이를 리턴 
        //foreach는지도 필터는 
        리턴  이 .brandList.filter ((값) =>을 {
             반환 value.name.indexOf ( 이 .userKey를)! = -1 
        }) 
    } 
}

리스너 속성 - 리스너

비동기 작업의 결과를 응답하지 않습니다 계산 속성의 부족이있다. 데이터가 변경, 시청을 사용해야하는 경우에 당신은 비동기 작업을 수신해야하는 경우

추가 청취자를 시청하는 방법

그것은 청취자 속성입니다
메소드 이름이 무료하지 않을 수 있으며, 당신이 필요로 내부에 정확히 같은 속성 이름을 청취 할 수

보기 : {
     // 메소드 이름은 회원이어야하고 일관성있는 이름 데이터를 수신하려면 
    먼저 (NEWVALUE, oldValue입니다) { 
        에서는 setTimeout (() => { 
            을 console.log (NEWVALUE, oldValue입니다) 
            은이 .fullname = NEWVALUE. TRIM ()는를 toUpperCase () + "."+ 이 본 .second 
        }, 100 ) 
    }, 
        SECOND (NEWVALUE, oldValue입니다) { 
            CONSOLE.LOG (NEWVALUE, oldValue입니다) 
        } 
}

듣기의 깊이를 실현하기 위해 수신기를 시청하는 방법

모니터링의 깊이는 무엇입니까 : 더 이상이의 직접적인 구성원 인, 표면이 회원의 회원입니다

두 구현

핸들러 + 깊은
'개체 속성'() {}

OBJ : {
     // 핸들러를 통해 기능을 듣고 
    핸들러 (NV, OV) { 
        을 console.log (nv.name, nv.age) 
    }, 
    // 설정 깊이 리스너 
    깊은 : true로는 
} 
// 지정된 멤버를 듣고 편차 값 
'obj.name' (NV) { 
    CONSOLE.LOG (NV) 
}

때 리스너를 사용 하는가?

데이터가 비동기 동작 모드에 관련되면, 수신기를 사용할 필요

브랜드 관리 시스템 효과

코드 주소 : https://github.com/C4az6/Vue_study