AngelPlayer`s Diary

[Vue] Vue 기초 문법 정리 (2)

Web/Vue.js
2022. 7. 23. 19:34

computed

{{ }}(머스태시) 내부의 문장이 연산등으로 복잡한 경우에 사용함

<body>
    <div id="main">
        <p>원본 : "{{ sOriginalMessage }}"</p>
        <p>변형 : "{{ fnUpperCaseMsg }}"</p>
    </div>    
</body>

<script>
    new Vue({
        el: '#main',
        data: {
            sOriginalMessage: 'angelplayer'
        },
        computed: {
            fnUpperCaseMsg: function() {
                return this.sOriginalMessage.toUpperCase()
            }
        }
    })
</script>

 

 

이벤트 핸들러

마우스 클릭 등 이벤트가 발생하였을 때 실행되는 로직에 사용

-> 이벤트 핸들러 로직을 함수로 정의할 때

<body>
    <div id="main">
        <p>클릭 숫자 : {{ nClicks }}</p>
        <p>카운트 다운 : {{ fnCounter }}</p>
        <button v-on:click="fnIncrement()">Push</button>
    </div>
</body>

<script>
    new Vue({
        el: '#main',
        data: {
            nClicks: 0
        },
        computed: {
            fnCounter() {
                return 10 - this.nClicks;
            }
        },
        methods: {
            fnIncrement() {
                this.nClicks++;
            }
        }
    });
</script>

 

 

컴포넌트

자신만의 태그를 만들어서 사용함

data는 함수로 정의 필요

템플릿 구조 정의 필요 -> 백틱(` `) 사용함

<body>
    <div id="main">
        <h1>{{ sTitle }}</h1>
        <favorite-fruits></favorite-fruits>
        <favorite-fruits></favorite-fruits>
    </div>
</body>

<script>
    Vue.component('favorite-fruits', {
        // 컴포넌트의 data는 무조건 함수
        data: function() {
            return {
                aFruits: [ { sFruit_name: '사과' }, { sFruit_name: '오렌지' }, { sFruit_name: '배' }, ]
            }
        },
        // 템플릿 구현
        template: `
        <div>
            <div v-for="item in aFruits" class="fruit_style">
                <p>좋아하는 과일 : {{ item.sFruit_name }}</p>
            </div>
        </div>

        `
    });
    new Vue({
        el: '#main',
        data: {
            sTitle: '안녕하세요'
        }
    });
</script>

 

 

컴포넌트 속성 : props

컴포넌트의 속성을 구현할 때 사용

<body>
    <div id="app">
        <h1>좋아하는 과일</h1>
        <ol>
            <favorite-fruits 
                v-for="item in aFruits" v-bind:fruit="item" v-bind:key="item.id"
            ></favorite-fruits>
        </ol>
    </div>
</body>

<script>
    Vue.component('favorite-fruits', {
        props: ['fruit'],
        template: '<li>{{ fruit.text }}</li>'
    }) 

    var app = new Vue({
        el: '#app',
        data: {
            aFruits: [
                { id: 0, text: '사과' }, { id: 1, text: '오렌지' }, { id: 2, text: '배' },
            ]
        }
    })
</script>

 

 

상태값 관리 : Vuex

컨포넌트 간 상태값을 전달하거나 공유하는데 도움을 주는 라이브러리

모든 컴포넌트를 관리하는 중앙 집중식 저장소 역할

 

- Vuex 속성 : Vuex.Store()에 정의

state : 컴포넌트간 공유할 상태값 데이터

mutations : 외부에서 동기방식으로 저장할 때 사용 (setter 역할)

getters : state의 값을 외부에서 읽어올 때 사용

actions : 비동기 실행을 관리할 때 사용 -> 사용 시 dispatch를 반드시 적용해야 함

<body>
    <div id="app">
        <h1>hello</h1>
        <com-counter msg="counter1"></com-counter>
        <com-counter msg="counter2"></com-counter>
    </div>
</body>

<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            fnIncData: function(state) {
                return state.count++
            },
            fnDecData: state => state.count--
        },
        getters: {
            fnGetData(state) {
                return state.count;
            }
        },
        actions: {
            async fnDecData({
                commit
            }, state) {
                const result = await api.fnDecrement();
                if(result == true) commit('fnDecData');
            }
        }
    });

    const api = {
        fnDecrement() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(true);
                }, 1000);
            });
        }
    };

    // 컴포넌트로 신규 엘리먼트(태그) 등록
    Vue.component('com-counter', {
        props: ['msg'],
        template: `
        <div>
            <h2>{{ msg }}</h2>
            <p>Counter : {{ fnGetCount }}</p>
            <button @click="fnIncCount">+1 count</button>
            <button @click="fnDecCount">-1 count</button>
            <hr>
        </div>
        `,
        computed: {
            fnGetCount() {
                return store.getters.fnGetData;
            }
        },
        methods: {
            fnIncCount() {
                store.commit('fnIncData')
            },
            fnDecCount() {
                store.dispatch('fnDecData') // 비동기는 반드시 dispatch()를 통해서 접근해야 함
            }
        }
    })

    var gApp = new Vue({
        el: '#app',
        store // store 사용을 선언 (vuex 인스턴스 등록)
    })
</script>

 

 

네비게이션, 라우터

라우터 : SAP 제작 시 사용

SPA(Single Page Application) : 페이지 화면이 바뀌어도 웹 브라우저에서 새로고침이 일어나지 않음

<body>
    <div id="app">
        <h1>hello</h1>
        <!-- 라우터로 정의된 뷰를 출력 -->
        <router-view></router-view>
        <hr>
        <p>라우터 사용:
            <!-- 라우터 뷰 페이지 변경 -->
            <router-link to="/main">Move Main Page</router-link>
            <router-link to="/sub">Move Sub Page</router-link>
        </p>
    </div>
</body>

<script>
    // 컴포넌트 생성
    const tmMain = {
        template: '<h2>Main Page</h2>'
    }
    const tmSub = {
        template: '<h2>Sub Page</h2>'
    }

    // 라우터 주소 등록
    const rtRoutes = [{
        path: '/main',
        component: tmMain
    },
    {
        path: '/sub',
        component: tmSub
    }
    ];

    // 라우터 객체 생성
    const router = new VueRouter({
        routes: rtRoutes
    });

    var gApp = new Vue({
        el: '#app',
        router // 라우터 인스턴스 등록 -> VueRouter의 변수명과 동일하게 지정함
    })
</script>

 

 

 

 

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] 디렉티브 코드 사용법 정리 (v-* 속성)  (1) 2023.06.30
[Vue.js] Vue Instance (filter, computed, watch, event)  (1) 2023.05.31
[Vue] Vue 기초 문법 정리  (0) 2022.07.22

공유하기

facebook twitter kakaoTalk kakaostory naver band
'Web/Vue.js' 의 관련글

티스토리툴바