Vue Instance - method, filter, computed, watch

개발툴/Vue

Vue Instance - method, filter, computed, watch

가든_ 2022. 11. 13. 21:16

Vue method

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

<div id="app">
	<div>data : {{message}}</div>
    <div>method kor : {{helloKor()}}</div>
    <div>method eng : {{helloEng()}}</div>
</div>
<script>
	new Vue({
    	el:"#app"
        data:{
        	message:"안녕하세요", name:"garden"
        },
        methods:{
        	helloKor(){
            	return "안녕" + this.name
            },
            helloEng(){
            	return "Hello" + this.name
            }
       	}
    })
</script>

Vue filter

화면에 표시되는 텍스트 형식을 변환해주는 기능
표현식에 새로운 결과 형식 적용 가능
중괄호 보간법[{{ }}] 또는 v-bind 속성에서 사용 가능
- 중괄호 보간법 : {{데이터|필터 이름|필터 이름|필터 이름…}}
- v-bind : <div v-bind:id="rawId | formatId"></div>

전역 필터 & 지역 필터

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <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>

    <script>
      //전역 필터
      Vue.filter("count1", (val) => {
        if (val.length == 0) {
          return;
        }
        return `${val} : ${val.length}자`;
      });
      new Vue({
        el: "#app",
        data: {
          msg: "",
        },
        filters: {
          //지역 필터
          //val : msg
          //alternative : '문자를 넣어보세요'
          count2(val, alternative) {
            if (val.length == 0) {
              return alternative;
            }
            return `${val} : ${val.length}자`;
          },
        },
      });
    </script>
  </body>
</html>

Vue computed

데이터 변경사항을 실시간으로 처리
캐싱을 이용해서 데이터 변경이 없을 경우 캐싱된 데이터 반환 >> 값
Setter Getter를 직접 지정할 수 있다
작성은 method 같이 하지만 Vue에서 proxy처리해서 프로퍼티처럼 사용가능하다

<body>
    <div id="app">
      <input type="text" v-model="message" />
      <p>원본 메시지: "{{ message }}"</p>
      <p>역순으로 표시한 메시지1: "{{ reversedMsg }}"</p>
      <p>역순으로 표시한 메시지2: "{{ reversedMsg }}"</p>
      <p>역순으로 표시한 메시지3: "{{ reversedMsg }}"</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "안녕하세요 싸피여러분",
        },
        //종속적인 데이터(message)가 바뀌었을 때만 호출된다.
        computed: {
          reversedMsg: function () {
            console.log("꺼꾸로 찍기");
            return this.message.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>

⇒ 데이터가 1번 변했기 때문에 1번 실행되었다.

Vue Watch

computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산해서 캐싱 한다
- 보고 있던 값을 바꿈
watch는 data가 변경되었을 경우 다른 data를 (변경하는) 작업을 한다
- 보고 있던 값이 바뀌면 하기로 했던 일을 함

<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를 감시해라!
        //감시하고 있다가 변화가 생기면
        //val : 바뀐 값 oldVal : 이전 값에 넣기
        //콘솔에 찍기
        //디버깅할때 주로 사용
        watch: {
          a: function (val, oldVal) {
            console.log("new: %s, old: %s", val, oldVal);
          },
        },
      });
      console.log(vm.a);
      vm.a = 2; // => new: 2, old: 1
      console.log(vm.a);
    </script>
  </body>

computed와 watch — Vue.js

Vue.js - The Progressive JavaScript Framework

ssafy-vue.xyz