이 영역을 누르면 첫 페이지로 이동
나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

페이지 맨 위로 올라가기

나눔코딩

04. Vue CLI 3 - Component 메모

  • 2020.09.10 20:29
  • 16. Vue JS/Vue 3
OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue CLI 3.0.0
Edit Tool Intellij IDEA 2019.1.3

 

작성법만 다를 뿐 결과는 같습니다

 

#1-1. 자식 컴포넌트에 v-for 작성
<template>
    <div id="app">
        <div class="container">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center mb-4">TODO 어플리케이션</h1>
                <input type="text" class="form-control" v-model="userInput" @keyup.enter="addNewTodo">

                <div class="list-group mt-4">
                    <todo :active-todo-list="activeTodoList" @child="toggleTodoState" />
                </div>

                <div class="text-right">
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('active')">할 일</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('done')">완료</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('all')">전체</button>
                </div>


            </div>
        </div>
    </div>
</template>

<script>

    import Todo from "@/Todo";

    export default {
        name: 'App',
        components: {Todo},
        data() {
            return {
                userInput: '',
                todoList: [],
                currentState: 'active'
            }
        },
        computed: {
            activeTodoList() {
                return this.todoList.filter(todo => this.currentState === 'all' || todo.state === this.currentState)
            }
        },
        methods: {
            changeCurrentState(state) {
                this.currentState = state
            }
            ,
            addNewTodo() {
                this.todoList.push({
                    label: this.userInput,
                    state: 'active'
                })
                this.userInput = ''
            },
            toggleTodoState(todo) {
                console.log(todo)
                todo.state = todo.state === 'active' ? 'done' : 'active'
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
<template>
    <button class="list-group-item text-left" v-for="(todo, index) in activeTodoList" :key="index"
            @click="clickButton(todo)">
        {{ todo }}
    </button>
</template>
<script>
    export default {
        name: 'todo',
        props: {
            activeTodoList: {
                type: Array,
            }
        },
        methods: {
            clickButton(todo) {
                console.log(todo)
                this.$emit('child', todo)
            }
        }
    }
</script>

자식 컴포넌트에서 여러개의 인자를 넘겨줄 수 있지만, 부모 컴포넌트에서 태그에 매개변수를 받는 코드를 작성하면 오류를 발생한다

@child="toggleTodoState(todo)" 이런 식으로 사용하는 경우 자식 컴포넌트에서 넘어온 인자를 무시하고

부모 컴포넌트의 todo 인자를 찾게 된다 (존재하지 않아 undifinded 반환)

때문에 @child="toggleTodoState" 여기 까지만 작성하고 메소드 부분에는 todo 매개변수를 받는 형식으로 작성해야 받아진다

 

#1-2. 부모 컴포넌트에 v-for 작성
<template>
    <div id="app">
        <div class="container">
            <div class="col-md-6 offset-md-3">
                <h1 class="text-center mb-4">TODO 어플리케이션</h1>
                <input type="text" class="form-control" v-model="userInput" @keyup.enter="addNewTodo">

                <div class="list-group mt-4">
                    <template v-for="(todo, index) in activeTodoList" :key="index">
                        <todo :label="todo.label" @component-click="toggleTodoState(todo)" />
                    </template>
                </div>

                <div class="text-right">
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('active')">할 일</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('done')">완료</button>
                    <button type="button" class="btn btn-sm" @click="changeCurrentState('all')">전체</button>
                </div>


            </div>
        </div>
    </div>
</template>

<script>

    import Todo from "@/Todo";

    export default {
        name: 'App',
        components: {Todo},
        data() {
            return {
                userInput: '',
                todoList: [],
                currentState: 'active'
            }
        },
        computed: {
            activeTodoList() {
                return this.todoList.filter(todo => this.currentState === 'all' || todo.state === this.currentState)
            }
        },
        methods: {
            changeCurrentState(state) {
                this.currentState = state
            }
            ,
            addNewTodo() {
                this.todoList.push({
                    label: this.userInput,
                    state: 'active'
                })
                this.userInput = ''
            },
            toggleTodoState(todo) {
                console.log(todo)
                todo.state = todo.state === 'active' ? 'done' : 'active'
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
<template>
    <button class="list-group-item text-left" @click="clickButton()">
        {{ label }}
    </button>
</template>
<script>
    export default {
        name: 'todo',
        props: ['label'],
        methods: {
            clickButton() {
                this.$emit('component-click')
            }
        }
    }
</script>

 

자식 컴포넌트에서 $emit() 을 사용하는 경우 대문자를 사용하지 못한다 그래서 케밥 케이스처럼 사용해야한다

 

#2. 모듈 자동 import

ctrl + spacebar

 

#3. 자식 컴포넌트 생성법

플러그인 필요

vuex 를 사용할 경우 따로 관리하기 때문에 @read 를 사용하지 않아도 된다 (vuex 가 더 효율적으로 관리할 수 있다)

 

#4. Vue CLI 3 에서는 eventBus 를 사용하지 않는다

 

 

Vue 3로 마이그레이션하기 위해 준비해야 할 것

필자는 이 글에서 Vue 3 베타 버전을 사용한 경험, 특히 Vue 3로 마이그레이션할 때 주의해야 할 점을 얘기하고자 한다. 만약 이미 Vue 2로 개발된 앱을 Vue 3로 업그레이드할 예정이라면 이 글이 유용

ui.toast.com

 

기존방식과 EventBus 를 이용한 방식

 

EventBus 를 이용하면 1단계만 거치면 된다

EventBus 방식은 어디에서 왔는 지 알아내기 어려운 단점이 있다.

저작자표시 (새창열림)

'16. Vue JS > Vue 3' 카테고리의 다른 글

00. 인텔리제이 (Intellij IDEA) - Vue JS 플러그인  (0) 2020.09.10
03. Vue 2 - Vue Router  (0) 2020.09.10
02. Vue CLI 3 - Vuex  (0) 2020.09.10
01. Vue CLI 3 - 기본  (0) 2020.09.10

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • 00. 인텔리제이 (Intellij IDEA) - Vue JS 플러그인

    00. 인텔리제이 (Intellij IDEA) - Vue JS 플러그인

    2020.09.10
  • 03. Vue 2 - Vue Router

    03. Vue 2 - Vue Router

    2020.09.10
  • 02. Vue CLI 3 - Vuex

    02. Vue CLI 3 - Vuex

    2020.09.10
  • 01. Vue CLI 3 - 기본

    01. Vue CLI 3 - 기본

    2020.09.10
다른 글 더 둘러보기

정보

나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

  • 나눔코딩의 첫 페이지로 이동

검색

메뉴

  • 홈
  • 태그
  • 방명록

카테고리

  • 분류 전체보기 (316)
    • ∞. 읽은 거리 (3)
    • ∞. 기술 면접 (61)
      • 1. 자료구조 (0)
      • 2. 네트워크 (9)
      • 3. 운영체제 (11)
      • 4. 데이터베이스 (13)
      • 5. 디자인 패턴 (0)
      • 6. 알고리즘 (0)
      • 7. 자바 (15)
      • 8. 자바스크립트 (7)
      • 9. 스프링 (5)
      • 10. 시큐리티 (1)
      • 11. 기타 (0)
      • 12. Vue (0)
    • ∞. 웹개발 유용한 사이트 (14)
    • ∞. 트러블 슈팅 + TIL (7)
    • 00. 출발 (9)
    • 01. 엑셀 (9)
      • 기초 (4)
      • 컴활 1급 (4)
      • VBA (0)
    • 02. 엑세스 (9)
      • 기초 (5)
      • 컴활 1급 (4)
    • 04. Oracle (1)
      • 기초 (1)
    • 03. JAVA (8)
      • 기초 (7)
      • 객체지향 프로그래밍 (0)
    • 05. HTML (13)
      • 기초 (1)
      • css (10)
      • sass (0)
      • less (0)
    • 06. Javascript (16)
      • 기초 (13)
      • ES6 모듈 (2)
      • Canvas (0)
    • 07. JSP (0)
      • 기초 (0)
    • 08. jQuery (0)
      • 기초 (0)
    • 09. BootStrap (1)
      • 기초 (0)
      • v4 - Layout (1)
    • 10. Spring (30)
      • 기초 (3)
      • 실험 (4)
      • MVC (1)
      • BOOT (6)
      • Security (10)
      • Lib (Library) (2)
      • 벤치마킹 (0)
      • JUnit5 (2)
      • DevTools (0)
      • Socket (1)
      • Batch (0)
      • Mobile (0)
      • WebFlux (0)
      • Cloud (0)
      • Thymleaf (0)
      • Actuator (0)
      • 성능 테스트 (1)
    • 11. JetBrains (34)
      • 기초 (1)
      • IntelliJ IDEA (33)
      • WebStorm (0)
      • Pycham (0)
    • 12. API (0)
      • 기초 (0)
      • 네이버 API (0)
      • 카카오 API (0)
      • 구글 API (0)
      • 인스타그램 API (0)
    • 13. AutoHotkey (1)
    • 14. Python (8)
      • 기초 (3)
      • Selenium (2)
      • Beautiful Soup (0)
      • openpyxl (1)
      • Pyqt5 (0)
      • Deep learning (open CV) (0)
      • Geocoder (0)
      • Anaconda (0)
      • DeepLearning (0)
      • Jupyter Nootbook (0)
    • 14.5. R (0)
    • 15. JMeter (0)
      • 다운로드 (0)
    • 16. Vue JS (23)
      • 기초 (3)
      • Vue 2 (15)
      • Vue 3 (5)
      • Vuetify 2.5.8 (0)
    • 17. Git (12)
      • 기초 (8)
      • ItelliJ IDEA (4)
      • SourceTree (0)
    • 18. AWS (5)
      • 기초 (2)
      • Jira (3)
    • 19. Naver Cloud Platform (0)
    • 20. Google Cloud Platform (0)
      • 기초 (0)
      • stt & tts (0)
    • 21. Kotlin (0)
    • 22. Android (0)
      • 기초 (0)
      • Java (0)
      • Kotlin (0)
      • Flutter FrameWork (0)
    • 23. Clean Code [JAVA] (1)
    • 24. BuildTool (1)
      • Maven (1)
      • Gradle (0)
    • 25. 자료 구조와 알고리즘 (18)
      • JAVA (1)
      • Java Script (1)
      • 프로그래머스 (0)
      • 백준 알고리즘 (0)
      • 나의 알고리즘 (14)
      • Brilliant 공부 (0)
    • 26. React (1)
      • 기초 (0)
      • 강의 정리 (1)
    • 27. PostMan (0)
      • 기초 (0)
    • 28. 프로그래머스 (9)
    • 29. Leet Code (0)
    • 30. MySQL (3)
      • 기초 (2)
      • 문제 (1)
    • 73. GraphQL (0)
    • 74. Nuxt JS (0)
    • 75. Electron (0)
    • 76. UX &amp; UI Design Tool (0)
      • 기초 (0)
      • Axure (0)
      • Sketch (0)
      • Figma (0)
    • 77. MarkDown (1)
      • 기초 (1)
    • 78. Tomcat (1)
      • 메모 (1)
    • 79. Element JS (0)
    • 80. Parallax JS (0)
      • 기초 (0)
    • 81. Player JS (0)
      • 기초 (0)
    • 82. Smart Maker (0)
    • 83. Vim (0)
      • 기초 (0)
    • 84. Linux (0)
      • 기초 (0)
      • Centos 7 (0)
      • Ubuntu (0)
    • 85. Node JS (2)
      • 기초 (1)
      • WebRTC (0)
      • NVM (1)
    • 86. Propeller JS (0)
    • 87. FullPage JS (0)
      • 기초 (0)
    • 88. 아두이노 (0)
    • 89. Tensorflow (0)
    • 90. 웹 패킷 분석 (0)
    • 91. 크롬 개발자도구 (0)
    • 92. 디자인 패턴 (7)
      • 생성(Creational) (3)
      • 구조(Structral) (1)
      • 행위(Behavioral) (2)
      • SOLID 패턴 (0)
    • 95. Linux Shell Script (0)
    • 96. 구글 애널리스틱 (0)
    • 97. ffmpeg (0)
    • 98. ShareX (1)
    • 자료실 (0)
    • 기타 (2)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • 깁
  • 졵
  • 엑셀 기본작업
  • 엑셀 가운데맞춤
  • 엑셀 기타작업
  • 엑셀 글씨
  • 엑셀 표시형식
  • 엑셀 분석작업

나의 외부 링크

  • 비전공자 개발자
  • 자바 디자인 패턴
  • 자바 디자인 패턴
  • 스프링 블로그
  • 해킹보안 & 웹 관련
  • ERD 생성
  • 전문 기술 블로그
  • Servlet에 대한 개념없이 스프링을 했네요?
  • 스프링 FitlerChainList
  • 알고리즘 파워 블로그

정보

THE HEYDAZE의 나눔코딩

나눔코딩

THE HEYDAZE

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © THE HEYDAZE. Designed by Fraccino.

티스토리툴바