[Vue] 04. Vue Instance 속성 사용법

1. el과 data

- el = 해당 vue를 적용할 구역 지정

- data = DOM에 보여줄 데이터 정의

<div id="app">
    <h3>{{title}}</h3>
</div>

<script>
	//1. 데이터 형식
    new Vue({
        el: "#app",
        data: {
            title: "Vue Instance Test",
        },
    })
    
    //2. 함수 형식(권장)
    new Vue({
        el: "#app",
        data() {
            return{
            	title: "Vue Instance Test",
            }
        },
    })
</script>

 

 

 

 

2. methods

method안에서 vue객체를 접근할 때는 this.데이터이름으로 접근

*arrow function에서 this는 window를 가리키므로 arrow function 쓰지 않도록 주의하기

<div id="app">
    <div>{{msgStar()}}</div>
    {{cnt}}
    <button @click="plus">증가</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            cnt: 0,
            message: "Hello ",
        },
        methods:{
            msgStar(){
                return "*******"+this.message+"*******";
            },
            plus(){
                this.cnt++;
            }
        }
    })
</script>

 

 

 

3. filter

- 화면에 표시되는 텍스트 형식을 간단하게 변환하는 기능

- {{ }} 또는 v-bind 속성에서 사용 가능

<!--1. 보간법-->
{{ msg | filterName }}
<!--2. v-bind속성 -->
<div v-bind:id="id | filterName"></div>

 

 

1. 전역필터

el로 적용할 구역을 정해주지 않기 때문에, 어떤 id를 가진 구역에서든 가져다 사용할 수 있다.

<script>
    Vue.filter('price', (val)=>{
        if(val.length==0) return 0;
        return `${val}원`;
    });
    
    new Vue({
            el: "#app",
            data() {
                return {
                    value: 0,
                }
            },
        })
</script>

 

 

2. 지역필터

el에 지정한 대로 id=app인 구역 내에서만 사용 가능하며, filters에 여러 filter를 정의할 수 있다.

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                value: 0,
            }
        },
        filters:{
            price(val){
                if(val.length==0)return 0;
                return `${val}원`;
            }
        }
    })
</script>

 

 

3. 적용하기

앞의 두 필터 중에 골라서 아래 코드로 테스트해 볼 수 있다.

<div id="app">
    <input type="text" v-model="value"/><br>
    {{ value | price }}
</div>

 

 

 

4. computed

- 변경이 있을 때만 변경, 없을 경우엔 캐싱된 데이터를 반환

- Setter와 Getter를 직접 지정할 수 있다. *

<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cnt: 0,
            }
        },
        computed:{
            cal:{
                set(v){
                    this.cnt = v-1;
                },
                get(){
                    return this.cnt+2;
                },
            }
        }
    })

    //1. setter
    vm.cal = 5;
    //2. getter
    console.log(vm.cal);
</script>

 

- computed내에 method형식으로 작성 => 쓸 때는 Vue가 property처럼 사용하도록 제공함

- 함수 형식으로 쓰면 getter만 사용하고 있는 것 (= setter는 사용 X)

<div id="app">
    <input type="text" v-model="msg"/>
    <div>{{reverseMsg()}}</div>
    <div>{{reverseMsg()}}</div>
    <div>{{reverseMsg()}}</div>
    <div>{{reversedMsg}}</div>
    <div>{{reversedMsg}}</div>
    <div>{{reversedMsg}}</div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                msg:"안녕하세요.",
            }
        },
        methods:{
            reverseMsg(){
                console.log("methods");
                return this.msg.split('').reverse().join('');
            }
        },
        computed:{
            reversedMsg(){
                console.log("computed");
                return this.msg.split('').reverse().join('');
            }
        }
    })
</script>

 

 

method로 적었을 때와 computed로 적었을 때의 차이점을 보이도록 작성했다.

1) computed는 property로 ()를 작성하지 않고 부른다.

2) computed는 캐싱된 데이터를 사용하기 때문에, 데이터가 1번 변할 때 실행 횟수는 1번이다.

 

 

 

 

5. watch

Vue Instance의 특정 property가 변경될 때, 실행할 콜백 함수를 설정할 수 있다.

<div id="app">
    <input type="text" v-model="cnt">
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                cnt: 0,
            }
        },
        watch:{
            cnt(val, oldVal){
                console.log(`값이 ${oldVal}에서 ${val}으로 변경되었습니다.`);
            }
        }
    })
</script>

 

 

 

 

+) computed와 watch의 차이점

Computed는 반응형 getter로 생각하면 되며, 프로퍼티를 정의한다.  값이 변경되었을 때, 다시 계산하여 캐싱해놓으며 반환값은 필수다.

Watch에 명시된 프로퍼티는 감시할 대상을 의미한다. 이 data가 변경되는 것이 감지되면, 지정한 콜백함수를 실행한다.