Web_Vue/step07_computed.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>step07_computed</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue 객체(instance) 구성시 computed라는 속성과 함께 함수(기능)를 등록 할 경우 속성처럼 사용 가능</h3>
    <br><hr><br>
    <div id="app">
        <!-- 하나의 input tag에 여백(space 한버)을 기준으로 "이름 나이" 형식으로 임력하면 이름은 name,
        나이는 age에 바인딩
        로직 처리 : 입력된 하나의 문자열을 VM에서 가공해서 name/age에 binding

        info - 다수의 함수로 구성된 js 객체
                이러한 객체가 computed 속성에 등록(구현)되어 있을 경우 set/get 필요로 함
                set은 model의 데이터 변경시 자동 호출
                템플릿 표현식에는 이 함수들을 보유한 속성명만 선언

         -->
        <input type="text" v-model="info">
        이름 {{name}}, 나이 {{age}} <br>
        <!-- sum은 VM객체의 model의 property 처럼 호출하나 computed 속성에 개발된 sum() 함수
            methods 속성과 가장 큰 차이점 : 메소드는 () 필수, computed 속성내에 구현된 함수는 이름으로만 마치 속성 호출하듯 호출
            가령 연산 로직이 필요한 경우에 사용하기도 함
        -->
        합{{sum}}
    </div>
    <script>
        let vm = new Vue ({
            el : "#app",
            data : {
                name : "양호준",
                age : 46
            },
            computed : {
                info : {
                    set : function(v){ // info가 binding되어 있는 값 수정 시 자동 호출
                      //  alert("set" + v);
                      v = v.split(" ");
                    //   console.log(v[0]);
                        this.name = v[0];
                        this.age = v[1];
                    },
                    get : function(){
                      //  alert("get"); -브라우저가 렌더링 되면서 객체 생성 시 자동 호출
                      return this.name + " " + this.age;
                    },
                //    my : function(v){
                //        alert(v);
                //    }
                },
                sum : function(){
                    return 2+3;
                }
             }
        });
    </script>
</body>
</html>