[Vue] Vue Instance

1. el

Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다.

 

2. data

Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다.

 

3. method

화면 로직 제어와 관계된 method를 정의하는 속성.

마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다.

보간법으로 method를 부를 때 ()를 빠뜨리지 않아야 한다. 하지만 @click 등 이벤트 처리에 파라미터가 없는 method를 사용할 경우는 method 이름만 써도 가능하다. 

method 안에서 데이터를 접근할 때는 "this.데이터이름"으로 접근해야한다.

 

이 코드는 reversedMsg()를 호출해서 message를 뒤집은 값을 <div>안에 넣는다.

<div id="app">
  <div>{{reversedMsg()}}</div>
</div>


<script>
new Vue({
  el: '#app',
  data: {
    message: '안녕하세요'
  },
  methods: {
    reversedMsg: function () { // reversedMsg() { 와 동일
      return this.message.split('').reverse().join('');
    }
  }
});
</script>

 

4. computed

특정 데이터의 변경사항을 실시간으로 처리한다.

캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환한다.

작성은 method처럼 하지만 vue에서 proxy 처리하여 property처럼 사용한다.

 

아래 코드의 reversedMsg()는 1.method의 코드와 동일한 역할을 하지만 message가 변경될 때만 실행되어 불필요한 호출을 막는다.

computed는 setter와 getter를 직접 지정할 수 있는데, 따로 지정하지 않고 reversedMsg()처럼 리턴값만 존재할 경우 get만 가능하다.

test는 get(), set()을 둘 다 지정해서 25번째 줄처럼 직접 msg를 변경할 수 있고, 26번째 줄처럼 값을 반환할 수도 있다.

<div id="app">
  <div>{{reversedMsg}}</div>
</div>

<script>
vm = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요',
    msg:''
  },
  computed: {
    reversedMsg() { //getter만 가능
      return this.message.split('').reverse().join('');
    },
    test:{
      get(){
        return msg+msg;
      },
      set(m){
        this.msg = m;
      }
    }
  }
});

vm.test = "수정메세지";
console.log(vm.test);
</script>

 

5. watch

뷰 인스턴스의 특정 property가 변경될 때 실행할 콜백 함수를 설정한다.

함수 앞에 property 이름을 붙이면 해당 함수에 property가 지정된다. watch 함수는 현재 값, 이전값을 모두 받아올 수 있다.

대부분의 경우 watch보다 computed를 권장한다.

아래 코드는 input 창이 변경될 때마다 watch가 실행되어 콘솔창에 이전값과 현재값을 오른쪽처럼 출력한다.

<div id="app">
  <div>
    <input type="text" v-model="message" />
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: "안녕하세요"
  },
  watch: {
    message: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal);
    }
  }
});
</script>

 

6. method, computed, watch 차이점

	method	computed	watch
계산시점	호출할 때마다	데이터가 변경될 때	데이터가 변경될 때
특징	"동사"처럼 동작한다.	종속된 데이터가 변경된다면 computed 이름으로 "property"처럼 새로 계산한 값을 캐싱한다. 선언적이다.	"보고만" 있다. 데이터가 변경되면 이전 값, 새로운 값을 모두 활용할 수 있다. 명령적이다.
사용방법	{{method명()}} @이벤트="method(변수)"	{{computed명}}	x 따로 부르는 방법은 없고 특정 데이터가 변경될 때 실행될 뿐이다.

 

7. filter

화면에 표시되는 텍스트의 형식을 쉽게 변환해 표현식에 새로운 결과 형식을 적용한다.

{{}} 중괄호 또는 v-bind 속성에서 사용이 가능하다. (7~9번째 줄)

체이닝이 가능해서 한 텍스트에 여러 필터를 사용할 수 있다.

 

아래 코드에서 price, won 필터는 전역필터다. 하지만 mobile, fmtclass필터는 지역필터이기 때문에 el에 설정한 #app을 벗어나면 사용할 수 없다. 

필터 함수는 항상 첫번째 파라미터는 앞의 property이고, 그 뒤의 파라미터는 마음대로 설정할 수 있다. fmtclass 필터를 보면 앞의 val 길이가 0이면 같이 받은 alternative로 기본값을 설정한다. 9번째 줄에서 'basic'을 넘겼으니 msg길이가 0이라면 div의 클래스명은 basic이 될 것이다.

<div id="app">
  <div>
    금액 : <input type="text" v-model="msg1" /><br />
    전화번호 : <input type="text" v-model="msg2" />
  </div>
  <div>
    <h3>{{ msg1 | price | won}}</h3><!-- chaining -->
    <h3>{{ msg2 | mobile }}</h3>
    <div v-bind:class="msg | fmtclass('basic')"></div>
  </div>
</div>

<script>
Vue.filter('price', (value) => {
  if (!value) return value;
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

Vue.filter('won',(value)=>{
  return `${value}원`;
});

new Vue({
  el: '#app',
  data: {
    msg1: '',
    msg2: '',
    msg: ''
  },
  filter:{
    mobile(value){
      if (!value || !(value.length === 10 || value.length === 11)) return value;
      return value.replace(/^(\d{3})(\d{3,4})(\d{4})/g, '$1-$2-$3');
    },
    fmtclass(val, alternative){
      if(val.length==0){
        return alternative;
      }
      return `${val}class`;
    }
  }
});
</script>

 

8. template

여러 개의 태그를 묶어서 함께 처리해야할 경우 사용한다.

v-if, v-for, component 등과 같이 많이 사용한다.

템플릿 아래 div는 반드시 하나만 존재해야한다.

<template id="myComp">
    <div></div>
</template>

<script>
//...
new Vue({
    //...
    template:'#myComp'
});
</script>