이 기사는 이와테현립대학 Advent Calendar 2020 19일째 기사입니다.

이번에 배우는 것

Nuxt.js에서 NavigationBar hover를 구현하려면 @mouseover , mouseleave를 사용하십시오!

목표로 하는 아티팩트

소스 코드 이 소스 코드를 참조하면서 읽어 주시면 이해하기 쉽다고 생각합니다. htps : // 기주 b. 코 m / 슈 헤이 후지타 / 네 xt mp ぇ-

단계

1. Vue나 Nuxt의 본질인 Component의 개념을 이해한다.

이 동영상은 영어입니다만, HTML/CSS 를 쓴 경험이 있는 사람 레벨의 분이라면 알기 쉬운 내용이라고 느꼈습니다.

nuxt 초보자가 가장 먼저 보는 동영상(영어):
htps //w w. 요츠베. 이 m/와 tch? v = 음 D qBf 0 & st = P 1lRbPz q_4r_u BfXf46bM n L2 rc djTy & x = 1

포인트는 이쪽을 보면서 구현해 보면 흠뻑 Nuxt.js 이나 Vue.js 의 component 의 개념을 이해하는 것입니다!

2. NavigationBar 만드는 법 동영상을 해 본다

둘째,
Component의 개념을 이해할 수 있는 분이라면, 이 스텝도 순조롭게 갈 수 있을까 생각합니다.
여기에도 좋은 동영상이 있었으므로 공유합니다.

NavigationBar를 만드는 방법의 동영상(영어):
htps //w w. 요츠베. 이 m/와 tch? v=ゔ쿠 dpBcmF8&t=876s

포인트 3개
- Navbar.vue , Dropdown.vue 의 2개에 component를 분산
- v-for 에서 반복적으로 Dropdown에 사용할 목록 생성
- v-if 에서 표시 숨겨진 상태 관리

3. 마우스 hover했을 때의 이벤트 처리의 기사를 실천

마지막으로, 마우스의 hover했을 때의 이벤트 처리의 구현입니다만, 결론으로부터 말하면, ＠mouseover 와 @mouseleave .

이쪽의, 이벤트 처리에 대한 기사가 매우 참고가 되었으므로 공유해 둡니다.

이벤트 처리에 대한 기사(영어):
htps : // 미짱 l 응 에센. 코 m / 호 ぇ r ー ー ゔ 에 /

포인트 3개
- ＠mouseover 및 @mouseleave를 사용하여 이벤트를 검색할 수 있습니다.
- 변수 isHoverFlag 를 정의하여 이벤트 취득마다 ture, false를 전환
- v-if="isHoverFlag"의 isHoverFlag가 ture이면 거기에 태그가 표시됩니다.

Dropdown.vue

<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>

참고 자료

nuxt 초보자가 가장 먼저 보는 동영상

htps //w w. 요츠베. 이 m/와 tch? v = 음 D qBf 0 & st = P 1lRbPz q_4r_u BfXf46bM n L2 rc djTy & x = 1

navbar 만드는 법 동영상

htps //w w. 요츠베. 이 m/와 tch? v=ゔ쿠 dpBcmF8&t=876s

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

htps : // 미짱 l 응 에센. 코 m / 호 ぇ r ー ー ゔ 에 /