Nuxt.js에서 NavigationBar의 hover에서 @mouseover 사용

Nuxt.2주 동안 만진 나, 베.jus 및 Nuxtjs에 마우스를 NavigationBar에 설치했을 때 Dropdown을 표시합니다.
누구에게 좋은 점이 있다면 나는 매우 기쁠 것이다.
초보자를 위한 Nuxt.Js 도입 부분부터 쓰기 때문에 NavigationBar 설치 방법만 알고 싶은 분들은 3단계만 보시는 게 좋아요!

이번에 배울 거.

Nuxt.js에서 @mouseover,mouseleave를 사용하여NavigationBar의hover를 실현합니다!

목표 성과

소스 코드

이쪽 소스 코드를 참조하면서 계속 읽으면 이해하기 쉽다.
https://github.com/syuheifujita/nuxt-sample-app

단계

1. Vue와 Nuxt의 본질, Component의 개념 이해

이쪽 영상은 영어지만 그려본 경험이 있는 사람의 수준이라면 알기 쉬운 내용이라고 생각한다.
nuxt 초보자가 가장 먼저 보는 동영상 (영어):
중점은 이쪽을 보면서 실시해 보고HTML/CSS와Nuxt.js의component의 개념을 대체적으로 이해하는 것이다!

2. NavigationBar의 제작 방법 영상 보기

그리고 나서
Component 개념을 이해할 수 있는 사람이라면 이 절차도 순조롭게 진행될 수 있을 것 같다.
여기도 좋은 영상이 있으니 공유해요.
NavigationBar 제작 방법의 비디오(영어):
세 개 주세요.

Vue.js,component를 Navbar.vue두 개로 분산

Dropdown.vue에서 Dropdown에 사용할 목록을 반복적으로 생성

v-for에 표시되지 않는 상태 관리

3. 마우스hover를 실행할 때의 이벤트 처리 보도

마지막으로 마우스hover시 이벤트 처리의 실현이지만 결론적으로 v-if와 ＠mouseover를 사용하여 이벤트를 얻고 디스플레이의 상태를 전환하여 Dropdown을 실현한다.
여기에는 행사 처리에 관한 보도가 참고 가치가 있어 공유된다.
이벤트 처리에 관한 기사(영어):
https://michaelnthiessen.com/hover-in-vue/
세 개 주세요.

@mouseleave 및 ＠mouseover를 사용하여 이벤트를 가져올 수 있음

정의 변수@mouseleave, 이벤트를 가져올 때마다ture와 가짜

로 전환

isHoverFlag의ishoverFlag가ture인 경우 그곳의

라벨

을 표시합니다

<template>
    <div class="menu-item" @mouseover="isHoverFlag = true" @mouseleave="isHoverFlag = false">
        <a>{{ title }}</a>
        <svg viewBox="0 0 1030 638" width="10">
            <path d="M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z" 
            fill="#000"></path>
        </svg>
        <div class="sub-menu" v-if="isHoverFlag">
            <div v-for="(item, i) in items" :key="i" class="menu-item">
                <a :href="item.link">{{ item.title }}</a>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'

export default {
    name: 'dropdown',
    props: ['title', 'items'],
    data() {
        return {
            isHoverFlag: false,            
        }
    }
}
</script>

<style>
nav .menu-item svg {
    width: 10px;
    margin-left: 10px;
}

nav .menu-item .sub-menu {
    position: absolute;
    background-color: white;
    top: calc(100%);
    left: 0px;
    width: max-content;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
}
</style>

참고 자료

초심자가 제일 먼저 보는 영상.

관련 비디오

이벤트 처리에 관한 글 (영어)

https://michaelnthiessen.com/hover-in-vue/
다음은 NavigationBar가 스펀지를 지원할 수 있는 실장 문장을 쓰고 싶습니다~