이 10가지 팁은 당신을 더 나은 Vue 개발자로 만들어 줄 것입니다.
- hzc앞으로
- 2020-06-13 10:02:342595검색
소개
저는 Vue를 사용하여 개발하는 것을 선호하므로 가끔 Vue의 기능과 특징에 대해 자세히 알아보겠습니다. 이 기사에서는 더 나은 Vue 개발자가 되는 데 도움이 되는 10가지 유용한 팁과 요령을 소개합니다.
슬롯 구문이 더 아름답습니다
Vue 2.6 출시와 함께 슬롯의 약어가 도입되었습니다. 이전에는 이벤트에 약어를 사용할 수 있었습니다. (예: @click은 v-on:click 이벤트를 나타냅니다. ) 또는 콜론 표현(:src)입니다. 예를 들어, 테이블 구성 요소가 있는 경우 이 기능을 다음과 같이 사용할 수 있습니다.
$on('hook:')
생성되거나 마운트된 메모리 누수를 방지하기 위해 beforeDestroy 메서드에서 삭제해야 하는 경우 이 기능을 사용할 수 있습니다. $on('hook:') 메소드를 사용하면 (2개가 아닌) 하나의 라이프사이클 메소드만 사용하여 이벤트를 정의/제거할 수 있습니다.
prop 유효성 검사
당신은 아마도 props가 문자열, 숫자, 객체와 같은 기본 유형으로 유효성 검사될 수 있다는 것을 이미 알고 있을 것입니다. 예를 들어 문자열 목록에 대해 유효성을 검사하려는 경우 사용자 정의 유효성 검사기를 사용할 수도 있습니다.
동적 지시어 매개변수
Vue 2.6의 가장 멋진 기능 중 하나는 지시어 매개변수를 동적으로 전달하는 기능입니다. 구성 요소. 버튼 구성 요소가 있고 어떤 경우에는 클릭 이벤트를 수신하고 다른 경우에는 두 번 클릭 이벤트를 수신하고 싶다고 가정합니다. 여기가 동적 지시문이 유용한 곳입니다
동일한 경로의 구성 요소 재사용
때때로 우리는 서로 다른 경로에서 특정 구성 요소를 공유하며, 이러한 경로 간에 전환하면 기본적으로 구성 요소가 공유됩니다. Vue는 성능상의 이유로 구성 요소를 재사용하므로 다시 렌더링하지 마십시오. 그러나 여전히 이러한 구성 요소를 다시 렌더링하려면 라우터 보기 구성 요소에 :key 속성을 제공하여 다시 렌더링할 수 있습니다.
부모 클래스의 모든 prop을 자식 클래스로
이것은 부모 구성 요소의 모든 prop을 자식 구성 요소로 전달하는 매우 멋진 기능입니다. 이는 다른 구성 요소에 대한 래퍼 구성 요소가 있는 경우 특히 편리합니다. 소품을 하위 구성 요소에 하나씩 전달할 필요가 없고 모든 소품을 한 번에 전달할 수 있기 때문입니다.
위는 다음을 대체할 수 있습니다.
부모 클래스의 모든 이벤트 리스너는 하위 클래스
하위 구성 요소가 상위 구성 요소의 루트에 있지 않은 경우 다음과 같이 상위 구성 요소의 모든 이벤트 리스너를 하위 구성 요소에 전달할 수 있습니다.
하위 구성 요소가 루트에 있는 경우 상위 구성 요소의 경우 기본적으로 해당 구성 요소를 가져오므로 이 작은 트릭이 필요하지 않습니다.
$createElement
기본적으로 모든 Vue 인스턴스는 $createElement 메서드에 액세스하여 가상 노드를 생성하고 반환할 수 있습니다. 예를 들어, 이는 v-html 지시어를 통해 전달될 수 있는 메서드에서 태그를 사용하는 데 활용될 수 있습니다. 함수 구성 요소에서 이 메서드는 렌더링 함수의 첫 번째 매개 변수로 액세스할 수 있습니다.
JSX 사용
Vue CLI 3은 기본적으로 JSX 사용을 지원하므로 이제 (원하는 경우) JSX를 사용하여 코드를 작성할 수 있습니다(예를 들어 함수 구성 요소를 쉽게 작성할 수 있습니다). 아직 Vue CLI 3을 사용하지 않는 경우 babel-plugin-transform-vue-jsx를 사용하여 JSX 지원을 받을 수 있습니다.
Custom v-model
기본적으로 v-model은 @input 이벤트 리스너 및 :value props의 구문 설탕입니다. 그러나 Vue 구성 요소에서 모델 속성을 지정하여 어떤 이벤트와 값이 사용되는지 정의할 수 있습니다.
요약
이 팁과 요령이 도움이 되기를 바랍니다. 팁을 알고 계시다면 메시지를 남겨주세요.
추천 튜토리얼: "JS Tutorial"
위 내용은 이 10가지 팁은 당신을 더 나은 Vue 개발자로 만들어 줄 것입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!