>웹 프론트엔드 >JS 튜토리얼 >Vue를 사용하여 페이지 오른쪽 상단에 부동/숨겨진 메뉴를 구현하는 방법

Vue를 사용하여 페이지 오른쪽 상단에 부동/숨겨진 메뉴를 구현하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-06-01 11:22:052750검색

이번에는 Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현하는 방법을 보여드리겠습니다. Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

이것은 대부분의 웹사이트에서 매우 일반적인 기능입니다. 플로팅 메뉴를 표시하려면 페이지 오른쪽 상단에 있는 아바타를 클릭하거나 메뉴를 숨기려면 아바타를 다시 클릭하세요.

jQuery 프론트엔드 공성사자로서 이 기능을 구현하는 것은 매우 쉽다고 할 수 있지만, vue 문서를 이제 막 본 초보자에게는 여전히 개인적으로 넘어야 할 함정이 있습니다. 성공하기 위해.

지식 포인트

  • 구성 요소 및 구성 요소 간 통신

  • 계산된 속성

Text

1. 상위 구성 요소

이것은 시스템에만 관련됩니다. 현재 메뉴 이 기능은 아직 라우팅에 포함되지 않습니다.

기본 아이디어는 props를 통해 showCancel의 부울 값을 하위 구성 요소에 전달하고 이벤트를 각각 상위 및 하위 구성 요소에 바인딩하여 시스템 메뉴의 표시 상태를 제어하는 ​​것입니다. 상위 구성 요소의 바운드 클릭 이벤트에서 하위 구성 요소에 전달된 showCancel 값이 재설정됩니다.

여기에 첫 번째 작은 지식 포인트가 있습니다 - 하위 구성 요소 호출:

먼저 하위 구성 요소에 의해 렌더링되기를 기다리는 사용자 정의 요소를 작성합니다:

<t-header :showCancel=showCancel></t-header>

그런 다음 작성된 하위 구성 요소를 가져옵니다:

import THeader from "./components/t-header/t-header";

그런 다음 등록합니다.

components: {
 THeader
}

이 시점에서 신입생은 이 코드 줄이 하위 구성 요소를 태그에 매핑하는 방법에 대해 혼란스러울 수 있습니다.

구성 요소를 등록할 때( 또는 prop), kebab-case(하이픈으로 구분된 이름 지정), camelCase(카멜 케이스 이름 지정) 또는 PascalCase(단어의 첫 글자를 대문자로 사용하여 이름 지정)를 사용할 수 있습니다.

HTML 템플릿에서는 kebab-case를 사용하세요.

me 예를 들어, 커스텀 요소가 인 경우 등록된 구성 요소 이름은 t-header, tHeader 및 THeader의 세 가지 방법으로 작성할 수 있습니다. 이 경우 등록된 구성 요소는 자동으로 작성됩니다. 인식되어 로 렌더링됩니다.

위의 내용은 단일 파일 구성 요소에서