지령
비록 그것이 각도의 정의와 유사하지만 지침은 DOM 함수의 확장이지만 VUE의 지침은 훨씬 약합니다. VUE 구성 요소는 실제로 DOM에서 작업을 포함하기 때문에 대부분 일반 구성 요소를 작성할 때 대부분의 경우 지침이 아닌 구성 요소이며 각도에서는 일반적인 구성 요소를 작성하면 일반적으로 지침입니다.
그래서 나는 Vue의 지침이 Angular보다 훨씬 약하거나 훨씬 더 순수하다고 말할 수 있다고 말했습니다. DOM과 관련된 논리를 캡슐화하는 것이 아니라 DOM 기능의 확장입니다. 관심이 있으시면이 두 UI 라이브러리를 비교하여 이해할 수 있습니다.
• vux https://github.com/airyland/vux
• 각도 부트 스트랩 https://github.com/angular-ui/bootstrap
이에 비해 VUE에서 우리는 실제로 일반 구성 요소 (실제로 일반이든 아니든)를 캡슐화한다는 것을 알게 될 것입니다. Vue Directive = Angular Directive + Controller에서 간단히 생각할 수 있습니다. 앞에서 언급했듯이 많은 VUE 디자인은 Angular2와 유사합니다. VUE의 지침은 기본적으로 Angular2의 지침과 동일하지만 Angular의 지시와 혼동되지는 않습니다.
오해의 소지가없는 것을 피하기 위해 각도 지침은 더 이상 나중에 비교되지 않습니다.
수명주기
수명주기는 세 단계로 나뉩니다.
• 처음으로 DOM 요소에 바인딩 될 때 트리거를 바인딩합니다.
• 업데이트 바인드는 완료 직후에 트리거되며 향후 매개 변수가 업데이트 될 때마다 트리거됩니다.
• undinding 및 dom 요소가 풀릴 때 트리거링되지 않습니다
API는 매우 간결합니다. . .
그중에서도 업데이트는 가장 중요한 것, 즉 Directive가 값의 업데이트를 받으면 해당 코드가 실행됩니다. 업데이트 함수에 의해 수신 된 매개 변수는 attr을 통해 사용자가 전달한 값입니다.
아래의 간단한 지침을 구현하겠습니다. 아래는 TODO 목록 (양식 확인)별로 컨텐츠 입력을 확인하는 데 사용됩니다. 지침의 기본 구조는 다음과 같습니다.
vue.directive ( "minlength", {bind : function () {}, update : function (value) {}, Unbind : function () {}});그런 다음 사용자가 입력 할 때 확인을 수행해야합니다. 여기서 우리는 간단한 최소 검증을 구현하고 코드는 다음과 같습니다.
vue.directive ( "minlength", {bind : function () {var self = this; var el = this.el; el.addeventListener ( "keydown", function (e) {if (e.keyCode === 13) {if (el.value.length <self.minlength) {e.preventDefault ();}}}}}}}}}} el.parentNode.querySelector ( "type = '제출']); upper (eL.AdDeventListener) (e) {el.value.length <self.minlength); {}});기본 논리는 바인드 스테이지에서 이벤트를 바인드 한 다음 업데이트 중에 전달 된 최소 값을 기준으로 판단을합니다.
현재 지침은 비슷한 기능을 달성하는 것이어야하며 물론 사용에 대한 세부 사항이 여전히 많으므로 자세한 내용을 보지 못할 것입니다. 지침은 VUE에서 그다지 중요한 부분이 아닙니다. 사람들은 보통 코드를 작성할 때 구성 요소를 작성합니다.
필터와 믹스 인은 비교적 단순 해 보이며 건너 뜁니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.