Vue.js 사용자 정의 명령과 예시.↘

사용자 정의 구성 요소를 만든 후에 사용자 정의 지령을 배울 때가 되었다.Vue에는 매우 유용하고 훌륭한 내장 버전이 있지만, 귀신이 곡할 노릇입니다. 우리는 자신의 사용자 정의 버전을 만들 수 있습니다.본고는 예시를 통해 당신에게 어떻게 이 점을 할 수 있는지 보여 드리겠습니다.

이거다!

Vue의 명령은 무엇입니까?🤔

파일에 따라

"A directive is some special token in the markup that tells the library to do some changes to a DOM element."

우리 위의 문장을 더욱 잘 쓰자.봐라, 우리가 HTML을 작성할 때, 우리는 태그 <h1> 를 시작한 다음, 그것을 닫았다 </h1>.레이블 사이에 표시하고자 하는 내용 (Hello World! 을 추가했습니다. 스타일을 추가하고자 할 때, 예를 들어 attributes 을 사용합니다.

<h1 style="color: grey;">Hello World!</h1> 

유사한 것은 Vue's template markup에 응용할 수 있다.Vue.js 명령은 다음과 같은 형식으로 접두사가 있는 HTML 속성으로만 나타날 수 있습니다.

<div v-text="message"></div>

이 경우 style 은 v-text 원소의 지령이다.다음은 몇 가지 다른 예입니다.

<!-- Example format with custom element -->
<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

<!-- Example with inline expressions -->
<div v-text="'hello ' + user.firstName + ' ' + user.lastName"></div>

<!-- Example with an argument -->
<div v-on="click : clickHandler"></div>

Vue는 이미 예쁜 core directives상 div 과 v-model 을 가지고 있지만, 당신이 맞춤형 제작을 하는 것을 막지 못했다!

사용자 정의 명령을 어떻게 생성합니까?🧐

작성하기 전에, 우리 먼저 그것의 문법이나 예시를 봅시다.두 가지 방법으로 등록할 수 있습니다.

Registering globally: Want to make a custom directive which automatically focuses an input field when someone opens up your web app?

Vue.directive('custom-directive-name', {
  inserted: function (el) {
    // Add code to focus the input field
  }
})

다음은 응용 프로그램 템플릿에서 이러한 명령을 사용하는 방법입니다.

<app-input custom-directive-name></app-input>

위에서 본 새로운 사물을 분석해 봅시다.

v-show 는 전역 명령을 등록하거나 검색하는 데 사용됩니다.

Vue.directive는 귀속할 요소가 부모 노드에 삽입되었을 때 호출되는 Hook function입니다.

갈고리 함수는 Vue over 명령이 제공하는 기본 함수입니다(선택 사항).우리가 흥미를 느끼는 단구 함수는 inserted 함수다.명령이 요소에 처음 연결되었을 때 호출합니다.
함수마다 세 개의 추가 매개 변수가 있습니다.

bind: 원소를 바인딩합니다.

el: 갈고리에 전달되는 매개변수를 포함하는 객체입니다.

binding: 가상 DOM을 직접 참조할 수 있습니다.

Registering locally: If one of your components needs a custom directive then you can seamlessly register it under the <script> tag (for local) or inside your main.js (for global) file as follows:

directives: {
  custom-directive-name: {
    // directive definition
    inserted: function (el) {
      // Add code for the directive
    }
  }
}

자, 우리 진지하게 처음부터 하나 세워봅시다.프레젠테이션 목적으로 제목 텍스트 색만 변경하는 사용자 정의 명령을 생성합니다.

1단계: 글로벌 명령 등록

총관을 열다.newly created Vue project 의 js 파일입니다.먼저 사용자 정의 명령을 선언합니다.Vue's instance creation code 이전에 모든 전역 명령을 정의해야 합니다.
사용자 지정 명령의 이름은 vnode 입니다.본고에서 우리는 제공한 colorChange 갈고리 함수를 방문하여 이 함수는 bind와 el 파라미터를 동시에 전달할 것이다.

Vue.directive("colorChange", {
  bind(el, binding) {
    // Code to change the text color dynamically 
  }
});

그렇다면 우리는 어떻게 색깔을 바꿉니까?여기에서 binding와 el 파라미터가 모두 작용한다.변경할 요소를 선택하려면 binding 속성을 el 로 설정하고 이를 통해 CSS의 색상을 변경할 수 있습니다.그리고 우리는 이 값을 style 에 저장된 color, 즉 우리의 요소로 설정합니다!
이제 코드 업데이트는 다음과 같습니다.

Vue.directive("colorChange", {
  bind(el, binding) {
    el.style.color = binding.value;
  }
});

2단계: 새 명령 사용

이 기능이 필요한 모든 구성 요소를 엽니다. 템플릿에 제목(value이나 텍스트(binding만 있으면 새로 만든<h1> 사용자 정의 명령을 추가하십시오.모든 색상 값을 문자열 형식으로 전달합니다.
Vue의 모든 사용자 지정/로컬 명령은 <p> 로 시작됩니다.다음은 사용 방법의 예입니다.

<div>
    <h1>Custom Directives</h1>

    <h1 v-colorChange="'red'">
    This is a custom directive RED text</h1>

    <h2 v-colorChange="'#f2652f'">
    This is a custom directive TOMATO text</h2>

    <p v-colorChange="'dodgerblue'">
    This is a custom directive DODGERBLUE text</p>
</div>

CSS 색상 이름과 16진수 값을 동시에 전달하는 방법에 주의하십시오!
이것은 출력 창에서 볼 수 있는 내용입니다.

다음 단계는 어디로 갑니까?🤔

옵션을 추가하면 사용자가 수동으로 색상을 선택하거나 Vue에서 제공하는 다른 속성을 사용하여 위의 명령을 더욱 강력하게 수행할 수 있습니다.다음과 같은 리소스가 도움이 될 수 있습니다.

Custom Directives Vue.js docs

Creating Custom Directives in Vue.js by Jennifer Bland

읽어 주셔서 감사합니다.오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

*looks in library* yup, this is the course you'll want: https://t.co/0HgRg92sUR

Image source: https://t.co/5T0ByA8nyV pic.twitter.com/zLWryaiPQ6

— Microsoft Developer UK (@msdevUK)

📫 나의 매주 개발자 통신에 구독하다📫

PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.내 글을 보고 싶은 사람이 있다면, here 내 미디어 자료다.