본문 바로가기
front-end/Vue.js

Vue.js 인스턴스 속성(methods, filter, computed, watch)

by 모두의 향연 2022. 7. 7.
728x90
반응형

✔️Vue Instance 속성 – methods, filter, computed, watch

: vue 2.x에서는 따로 쓰이지만 3.x로 가면 setup으로 한 번에 묶어서 쓰임

 

 

📌methods

: Vue Instance는 생성과 관련된 data 및 method의 정의 가능

method안에서 data를 “this.데이터이름” 으로 접근 가능

method안에서 this변수를 쓸 경우, arrowfunction 쓸 수 없다

<body>
    <div id="app">
        <div>{{message}}</div>
        <div>{{eng()}}</div>
        <div>{{kor()}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    message: "안녕??",
                    name: "모두의 향연",
                }
            },
            methods: {
                eng: function () {
                    return "Hello" + this.name;
                },
                kor() {
                    return "안녕" + this.name;
                }

            },
        })
    </script>
</body>

 

- 함수를 써서 log로 찍어보기

<body>
    <div id="app">
        <div>count:{{count}}</div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                count: 1
            },
            methods: {
                inCount() {
                    console.log("inCount 호출됨" + this.count);//1
                    this.count++
                }
            }
        });
        vm.inCount();
        console.log(vm.count);//2
    </script>
</body>

💡html에서는 {{변수명}}, {{함수이름}} / script의 vue내에서는 변수든 함수든 this로 접근 / script의 vue밖에선 vue명.변수명 or 함수이름

 

- 유효성 체크 만들어보기

<body>
    <div id="app">
        <div>메서드 테스트</div>
        <label for="userid">아이디:</label>
        <input type="text" id="userid" v-model="userid">
        <br />
        <label for="username">이름:</label>
        <input type="text" id="username" v-model="username">
        <br />
        <button @click="checkVal">확인</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                userid: "",
                username: "",
            },
            methods: {
                checkVal: function () {
                    if (!this.userid) {
                        alert("아이디 입력!");
                        return;
                    } else if (!this.username) {
                        alert("이름 입력!")
                    } else {
                        this.register();
                    }
                },
                register: function () {
                    console.log("서버에 전송합니다.");
                }
            }
        });
    </script>
</body>

💡label의 for는 클릭의 유효 범위, input 태그의 id값과 같은 값 써주기

 

 

 

📌filter

: 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능, 표현식에 새로운 결과 형식을 적용, 보간법 [ {{ }} ] 또는 v-bind 속성에서 사용이 가능, 금액처럼 포맷을 사용할 때 주로 쓰임, chining가능!

보간법: {{ 변수이름 | 필터이름}} or {{ 변수이름 | 필터1 | 필터2}}(체이닝)
v-bind표현: <div v-bind:id="id" | format"></div>

 

💡filter-전역 필터

:Vue.filter('필터이름',(val)=>{});

        Vue.filter('filter1', (val) => {
            if (val.length == 0) {
                return;
            }
            return `${val} : ${val.length}자`;
        });

💡filter-지역 필터

:Vue객체 안에 filters라는 속성을 이용

filters:{필터이름(val,필터초기값){ }};

        let vm = new Vue({
            el: "#app",
            data: {
                msg: "",
            },
            filters: {
                filter2(val, alternative) {
                    if (val.length == 0) {
                        return alternative;
                    }
                    return `${val} : ${val.length} 자`;
                }
            }
        });

 

- 전체 코드(포맷처럼 일정한 글자 나오게 함)

<body>
    <div id="app">
        <div><input type="tel" v-model="msg"></div>
        <div>
            <h2>결과:</h2>
            <h2>{{msg | filter1}}</h2>
            <h2>{{msg | filter2('문자를 넣어보세요')}}</h2>
        </div>
    </div>
    <script>
        Vue.filter('filter1', (val) => {
            if (val.length == 0) {
                return;
            }
            return `${val} : ${val.length}자`;
        });
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "",
            },
            filters: {
                filter2(val, alternative) {
                    if (val.length == 0) {
                        return alternative;
                    }
                    return `${val} : ${val.length} 자`;
                }
            }
        });
    </script>
</body>

 

- 금액(원/', '), 전화번호('-'): 정규식 이용

<body>
    <div id="app">
        <div>
            금액 : <input type="text" v-model="msg1" /><br />
            전화번호 : <input type="text" v-model="msg2" />
        </div>
        <h3>{{ msg1 | price | won}}</h3>
        <h2>{{ msg2 | tel}}</h2>
    </div>

    <script>
        Vue.filter('price', (val) => {
            if (!val) return val;
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });
        Vue.filter("won", (val) => {
            return `${val}원`;
        });
        Vue.filter('tel', (val) => {
            if (!val || !(val.length === 10 || val.length === 11)) return val;
            return val.replace(/^(\d{3})(\d{3,4})(\d{4})/g, '$1-$2-$3');
        });
        let vm = new Vue({
            el: "#app",
            data: {
                msg1: "",
                msg2: "",
            },
        });
    </script>
</body>

 

 

📌computed

: 특정 데이터의 변경사항을 실시간으로 처리(함수와 비슷하지만 변경된 데이터만 호출한다는 점이 다름),

캐싱(저장)을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 >> 값처럼 인식,

Setter와 Getter를 직접 지정할 수 있음,

작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property처럼 사용,

인스턴스가 갖고 있는 data를 이용할 때 사용,

꼭 return이 있어야 한다(명사처럼 사용)

computed method
Vue 인스턴스가 생성될 때, data의 값을 받아 계산 하여 저장해 놓는다(캐싱), 한 번 실행하는 것과 같음 함수를 사용할때마다 계산함 
<body>
  <div id="app">
    <input type="text" v-model="msg">
    <p>원본 메시지:{{msg}}</p>
    <p>역순으로 표시한 메시지1: {{reverseMsg()}}</p>
    <p>역순으로 표시한 메시지2: {{reverseMsg()}}</p>
    <p>역순으로 표시한 메시지3: {{reverseMsg()}}</p>

    <p>원본 메시지:{{msg}}</p>
    <p>역순으로 표시한 메시지1: {{ reversedMsg }}</p>
    <p>역순으로 표시한 메시지2: {{ reversedMsg }}</p>
    <p>역순으로 표시한 메시지3: {{ reversedMsg }}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '안녕하세요 여러분?',
      },
      methods: {
        reverseMsg: function () {
          console.log("거꾸로 찍기(method)");
          return this.msg.split('').reverse().join('');
        },
      },
      computed: {
        reversedMsg: function () {
          console.log("거꾸로 찍기(computed)");
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>

 

 

📌 watch

: Vue Instance의 특정 property 가 변경될 때 실행할 콜백 함수 설정(watch보다 computed 사용을 권장함)

watch: { 바뀔 변수: function(바뀔변수, 이전변수){ }}} 

<body>
  <div id="app">
    <div>
      <input type="text" v-model="a">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        a: 1,
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s,old: %s', val, oldVal);
        },
      },
    });
    console.log(vm.a);
    vm.a = 2;
    console.log(vm.a);;
  </script>
</body>

 

- 특정 변수가 변하면 다른 변숫값도 변하는(나는 여기서 data의 변수의 값에 this.radius로 하면 안 되나? 이 생각함:NaN오류)

<body>
  <div id="app">
    <h2>watch</h2>
    <div>반지름: {{radius}} 원의넓이:{{area}} 원의둘레:{{round}}</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          radius: 2,
          area: 3.14 * 2 ** 2,
          round: 2 * 3.14 * 2,
        };
      },
      watch: {
        radius: function (n, o) {
          this.area = 3.14 * this.radius ** 2;
          this.round = 2 * 3.14 * this.radius;
        }
      }
    })
  </script>
</body>

 

 

💡computed VS watch의 차이(위 코드를 computed로 바꿔서 코드 작성)

: computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산하여 캐싱/

watch의 경우는 특정 data가 변경되었을 경우 다른 data를 (변경하는) 작업을 함(변수의 값이 변경→watch의 변수의 값이 변경→원래 변수의 값 변경)

<body>
  <!-- <div id="app">
    <h2>watch</h2>
    <div>반지름: {{radius}} 원의넓이:{{area}} 원의둘레:{{round}}</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          radius: 2,
          area: 3.14 * 2 ** 2,
          round: 2 * 3.14 * 2,
        };
      },
      watch: {
        radius: function (n, o) {
          this.area = 3.14 * this.radius ** 2;
          this.round = 2 * 3.14 * this.radius;
        }
      }
    })
  </script> -->

  <div id="app">
    <h2>computed</h2>
    <div>반지름: {{radius}} 원의넓이:{{area}} 원의둘레:{{round}}</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          radius: 2,
        };
      },
      computed: {
        area: function (n, o) {
          return 3.14 * this.radius ** 2;
        },
        round: function () {
          return 2 * 3.14 * this.radius;
        }
      }
    })
  </script>
</body>

 

728x90
반응형
저작자표시 비영리 변경금지

'front-end > Vue.js' 카테고리의 다른 글

Vue.js 컴포넌트  (0) 2022.07.11
Vue.js 이벤트  (0) 2022.07.08
Vue.js개요, 인스턴스, 디렉티브  (0) 2022.07.07
map마커 만들기  (0) 2022.05.24
vue Bootstrap설정하기  (0) 2022.05.13

관련글

티스토리툴바