[Vue.js] Vue Instance (filter, computed, watch, event)

Vue Instance란?

Vue CDN 파일을 살펴보면 var Vue로 시작하여 끝까지 이어지는 것을 확인할 수 있습니다.

우리는 new Vue()를 통해서 Vue 객체를 생성합니다.

즉 cdn에 정의된 생성자를 통해서 새로운 Vue 인스턴스를 만드는 작업을 수행하는 것입니다.

※ 참고 : Vue cdn

https://cdn.jsdelivr.net/npm/vue

Vue Instance 속성

Vue Instance는

el, data, methods, filter, computed, watch, event

등을 속성으로 가질 수 있습니다.

Vue Method

Vue 인스턴스와 연결된 RealDOM (div#app)에서 사용할 메소드를,

Vue Instance 내부 methods에 선언할 수 있습니다.

mothod는 Vue Instance 내부에 선언된 data에 접근하여 값을 가져올 수 있습니다.

일반적으로 this 키워드를 통해서 불러오게 되며,

원래는 this.$data.값 으로 불러오는 것이 원칙이나 $data는 생략 가능합니다.

<body>
    <div id="app">
        <div>데이터 : {{message}}</div>
        <div>메소드 : {{returnName()}}</div>
        <div>메소드 : {{returnPage()}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello',
            },
            methods: {
                returnName() {
                    return this.message + 'AngelPlayer';
                },
                returnPage() {
                    return 'angelplayer.tistory.com';
                },
            },
        });
    </script>
</body>

Vue filter

Vue filter는 화면에 표시되는 텍스트 형식을 쉽게 변환시켜주는 기능을 수행합니다.

filter는 크게 지역 필터(내부 필터)와 전역 필터(외부 필터)로 구분됩니다.

전역 필터는 앞서 살펴보았던 cdn에 선언된 Vue 자체에다가 filter를 추가하여, 모든 Vue Instance에서 사용할 수 있습니다.

선언 방법

Vue.filter( 필터명, (파라미터) => { })

반면 지역 필터는 Vue Instance에 연결된 DOM에 한해서만 사용 가능합니다.

선언 방법

filters: { 필터명(파라미터) { } }

Vue filter는 머스태치, 또는 v-bind에서 사용할 수 있습니다.

<body>
    <div id="app">
        <div>
            <input type="text" v-model="msg" />
        </div>
        <div>
            <h2>결과 :</h2>
            <h3>{{ msg | count1 }}</h3>
            <h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
        </div>
    </div>

    <hr />
    <div id="app2">
        <div>
            <input type="text" v-model="msg" />
        </div>
        <div>
            <h2>결과 :</h2>
            <h3>{{ msg | count1 }}</h3>
            <!-- app2는 내장 필터로 count2를 가지지 않기 때문에 뒤에 글자수 출력이 이뤄지지 않음 -->
            <h3>{{ msg | count2('문자를 넣어보세요') }}</h3>
        </div>
    </div>

    <script>
        // Vue 함수에 필터 함수를 추가하겠다 (Vue 프로토타입에 대해 필터 함수를 외부 선언)
        // 외부 선언은 s가 붙지 않고, 내부 선언에서는 s가 붙음
        // 추가된 함수는 다른 모든 함수에서도 사용할 수 있음
        // 프로토타입에 추가하는 것이므로
        Vue.filter('count1', val => {
            if (val.length == 0) {
                return;
            }
            return `${val} : ${val.length}자`;
        });

        var vm1 = new Vue({
            el: '#app',
            data: {
                msg: '',
            },
            // 내부 필터
            filters: {
                count2(val, alternative) {
                    if (val.length == 0) {
                        return alternative;
                    }
                    return `${val} : ${val.length}자`;
                },
            },
        });

        var vm2 = new Vue({
            el: '#app2',
            data() {
                return {
                    msg: '',
                };
            },
        });
    </script>
</body>

Vue Computed

computed는 method와 유사한 역할을 수행하며, 선언 방식도 메소드와 매우 유사합니다.

computed는 데이터의 변경 사항을 실시간으로 처리합니다.

다만 캐싱을 이용하여 데이터의 변경이 없는 경우 computed는 실행되지 않고, 기존의 캐싱된 데이터를 반환합니다.

또한 computed는 실행 시 method처럼 ()를 붙이지 않고 컴퓨티드명으로 호출합니다.

<body>
    <div id="app">
        <p>원본 메시지: "{{ message }}"</p>
        <!-- computed 호출 -->
        <p>역순으로 표시한 메시지: "{{ reversedMsg }}"</p>
        <button v-on:click="change">button</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },

            methods: {
                change() {
                    console.log('click'); // 매번 출력됨
                    // computed 호출
                    this.reversedMsg; // message가 바껴서 return 값이 바뀌기 전까지 실행되지 않음
                },
            },
            computed: {
                // 계산된 getter
                reversedMsg: function () {
                    console.log('꺼꾸로 찍기'); // 최초 1회 출력 후 값이 바뀌기 전까지 출력되지 않음
                    // `this` 는 vm 인스턴스를 가리킵니다.
                    return this.message.split('').reverse().join('');
                },
            },
        });
    </script>
</body>

computed 메소드는 동일한 computed명에 대해서 get과 set 방식으로 사용할 수 있습니다.

<body>
    <script>
        let vm = new Vue({
            data: {
                a: 1,
            },
            computed: {
                // get만 가능
                aDouble() {
                    return this.a * 2;
                },
                // get과 set 둘 다 가능
                aPlus: {
                    get: function () {
                        console.log('get');
                        return this.a + 1;
                    },
                    set: function (v) {
                        console.log('set');
                        this.a = v - 1;
                    },
                },
            },
        });
        console.log(vm);
        // get 메서드 호출
        console.log(vm.aPlus); // 2
        // 값을 설정하기 위해서는 set 메서드 필요함
        vm.aPlus = 3;
        console.log(vm.a); // 2
        console.log(vm.aDouble); // 4
    </script>
</body>

Vue Watch

Vue Instance의 특정 값이 바뀌면 자동으로 실행되는 콜백함수입니다.

watch는 실행되면서 새로 바뀔 값과, 기존에 있던 값을 파라미터로 받게 됩니다.

아래 예시에서 출력 결과 순서가 예상과 다르게 나올 수 있는데,

이는 watch는 콜백함수로 비동기 통신이 이뤄지기 때문에 딜레이가 있을 수 있습니다.

<body>
    <script>
        var vm = new Vue({
            data: {
                a: 1,
            },
            watch: {
                a: function (val, oldVal) { // 기존 값, 새로운 값을 파라미터로 받음
                    console.log('new: %s, old: %s', val, oldVal);
                },
            },
        });
        console.log(vm.a); // 1
        // 딜레이가 있을 수 있음 (콜백 함수)
        vm.a = 2; // new: 2, old: 1
        console.log(vm.a); // 2
    </script>
</body>

Vue Event

DOM의 이벤트를 Listen 하기 위해서는 v-on 디렉티브를 사용합니다.

1) JS 코드 실행

v-on의 속성 값으로 js 코드를 넘겨서 이벤트 트리거 시 코드를 실행시킬 수 있습니다.

<body>
    <div id="app">
        <button v-on:click="counter += 1">클릭</button>
        <p>클릭 횟수 : {{counter}} 번</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                counter: 0,
            },
        });
    </script>
</body>

2) method 실행

이벤트 발생 시 특정 메소드를 실행시킬 수 있습니다.

<body>
    <div id="app">
        <button v-on:click="greet">Button</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'Angel',
            },
            methods: {
                greet: function (event) {
                    alert('Hello ' + this.name + '!');
                    console.dir(event.target);
                },
            },
        });
    </script>
</body>

3) method 실행 시 파라미터 넘김

v-on 디렉티브에서 이벤트 발생 시 수행할 method에 파라미터도 함께 넘길 수 있습니다.

<body>
    <div id="app">
        <button v-on:click="greet1('VueJS')">Greet1</button>
        <button v-on:click="greet2($event, 'VueJS')">Greet2</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                greet1: function (msg) {
                    alert('Hello ' + msg + '!');
                    console.dir(event.target);
                },
                greet2: function (e, msg) {
                    alert('Hello ' + msg + '!');
                    console.dir(e.target);
                    console.dir(event.target);
                },
            },
        });
    </script>
</body>

ref, $refs

Real DOM에 직접 접근하기 위해서 사용할 수 있는 문법입니다.

개발자가 DOM을 직접 사용하는 것은 지양하는 것이 좋으므로 되도록이면 ref는 사용하지 않는 것이 좋습니다.

<body>
    <div id="app">
        <h2>엘리먼트 참조하기</h2>

        <!-- 아이디 : <input type="text" v-model="id"> -->
        아이디 : <input type="text" v-model="id" ref="id" />
        <button @click="search">아이디 중복 체크</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                id: '',
            },
            methods: {
                search() {
                    if (this.id.length == 0) {
                        alert('아이디를 입력하세요!!');
                        this.$refs.id.focus();
                        console.dir(this.$refs.id);
                        return;
                    }
                    alert('아이디 중복체크 성공');
                },
            },
        });
    </script>
</body>

이벤트 수식어 (prevent)

이벤트 동작을 중단시키게 됩니다.

※ 참고

https://v2.ko.vuejs.org/v2/guide/events.html

이벤트 핸들링 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

v2.ko.vuejs.org

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>

<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>


<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>

<body>
    <div id="app">
        <h2>페이지 이동</h2>

        <a href="https://angelplayer.tistory.com" @click="sendMsg1">이동 가능</a><br />
        <a href="https://angelplayer.tistory.com" @click="sendMsg2">페이지 이동 막기 (preventDefault)</a><br />
        <a href="https://angelplayer.tistory.com" @click.prevent="sendMsg1">페이지 이동 막기(.prevent)</a><br />
        <a href="https://angelplayer.tistory.com" @click.stop="sendMsg1">페이지 이동 되긴함(stop)</a><br />
    </div>
    <script>
        new Vue({
            el: '#app',
            methods: {
                sendMsg1() {
                    alert('이동 가능 할 수도 있습니다.');
                },
                sendMsg2(e) {
                    e.preventDefault();
                    alert('이동 불가능 합니다.');
                },
            },
        });
    </script>
</body>

이벤트 키 수식어 (keyup)

<body>
    <div id="app">
        아이디 :
        <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup="sendId">
        <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup.13="sendId"> <!-- enter -->
        <input placeholder="검색할 아이디를 입력하세요" v-model="id" @keyup.enter="sendId">
        <button @click="sendId">검색</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                id: ""
            },
            methods: {
                sendId() {
                    alert(this.id);
                }
            }
        })
    </script>
</body>

Vue Binding

CSS Binding

토글 기능 구현 등을 위해서 CSS Binding을 할 수 있습니다.

<style>
    .active {
        background: black;
        color: white;
    }

    div {
        width: 200px;
        height: 200px;
        border: 1px solid #444;
    }
</style>

<body>
    <div id="app">
        <div v-bind:class="{ active: isActive }">VueCSS적용</div>
        <button v-on:click="toggle">VueCSS</button>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            isActive: false,
        },
        methods: {
            toggle: function (todo) {
                this.isActive = !this.isActive;
            },
        },
    });
</script>

Text Binding

.trim : 앞뒤 공백 제거

.lazy : 포커스를 상실 했을 때(다른 오브젝트를 눌렀을 때) 적용

<body>
    <div id="app">
        <div>
            아이디 :
            <input v-model.trim="id" placeholder="아이디를 입력하세요">
            <!-- change 이벤트에 반응 -->
            <input v-model.lazy="id" placeholder="아이디를 입력하세요">
        </div>
        <div>
            메세지 :
            <textarea v-model="message" placeholder="내용을 입력하세요"></textarea>
        </div>
        <p>{{ id }} 님에게 보내는 메세지 : {{ message }}</p>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                id: "",
                message: ""
            }
        })
    </script>
</body>

CheckBox Binding

<body>
    <div id="app">
        <div>당신이 가고 싶은 지역을 선택하시오</div>
        <input type="checkbox" id="gwangju" value="광주" v-model="checkedAreas" />
        <label for="gwangju">광주</label>
        <input type="checkbox" id="gumi" value="구미" v-model="checkedAreas" />
        <label for="gumi">구미</label>
        <input type="checkbox" id="daejeon" value="대전" v-model="checkedAreas" />
        <label for="daejeon">대전</label>
        <input type="checkbox" id="seoul" value="서울" v-model="checkedAreas" />
        <label for="seoul">서울</label>
        <br />
        <span>체크한 이름: {{ checkedAreas }}</span>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                checkedAreas: [],
            },
        });
    </script>
</body>

Radio Binding

<body>
    <div id="app">
        <div>수업을 듣는 지역을 선택하시오</div>
        <div>
            <input type="radio" id="gwangju" value="광주" v-model="ckArea" />
            <label for="gwangju">광주</label>
            <input type="radio" id="gumi" value="구미" v-model="ckArea" />
            <label for="gumi">구미</label>
            <input type="radio" id="daejeon" value="대전" v-model="ckArea" />
            <label for="daejeon">대전</label>
            <input type="radio" id="seoul" value="서울" v-model="ckArea" />
            <label for="seoul">서울</label>
        </div>
        <span>선택한 지역 : {{ ckArea }}</span>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                ckArea: '광주',
            },
        });
    </script>
</body>

Select Binding

<body>
    <div id="app">
        <div>
            <p>수업을 듣는 지역을 선택하시오</p>
            <select v-model="selectedArea">
                <option value="">선택하세요</option>
                <option value="gwangju">광주</option>
                <option value="gumi">구미</option>
                <option value="daejeon">대전</option>
                <option value="seoul">서울</option>
            </select>
        </div>
        <span>선택한 지역 : {{ selectedArea }}</span>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                selectedArea: '',
            },
            comments: {},
        });
    </script>
</body>

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

[Vue.js] 디렉티브 코드 사용법 정리 (v-* 속성) (1)	2023.06.30
[Vue] Vue 기초 문법 정리 (2) (0)	2022.07.23
[Vue] Vue 기초 문법 정리 (0)	2022.07.22

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

AngelPlayer`s Diary