Vue.js_Instance

22-05-09 4 분 소요

📚 Vue.js

📚 Vue.js Instance

Vue Instance

el
- Vue가 적용될 요소 지정
- CSS Selector or HTML Element
- 태그에 지정한 ID, 클래스명, 태그명 으로 해당 태그와 Vue Instance를 연결하는 옵션
data
- Vue에서 사용되는 정보 저장
- 객체 또는 함수의 형태
- key와 value를 지정하는 json 형식
- 데이터 입력 옵션
template
- 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
- 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods
- 화면 로직 제어와 관계된 method를 정의하는 속성
- 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가
created
- 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의

Vue Instance 유효범위

Vue Instance를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용
el 속성과 밀접한 관계가 있다.
인스턴스가 화면에 적용되는 과정
1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성 ( 옵션 속성 포함 )
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인

(View)

<div id="app">
  <h2></h2>
</div>

<script>

  (Model)

  var model = {
      message : " 뷰 생성 "
  }

  (View Model)

  new Vue({
      el : '#app',
      data : model
  })
</script>

-> 출력은 " 뷰 생성 " 이 된다. - 유효범위를 벗어난 경우

<div id="app"></div>
<h2></h2>

<script>
  var model = {
    message: " 뷰 생성 ",
  };

  new Vue({
    el: "#app",
    data: model,
  });
</script>

-> 출력이  로 된다.

Vue()로 인스턴스가 생성 되었다. ( new Vue() )
el 속성이 지정한 화면 요소 ( DOM ) ( #app ) 에 인스턴스가 부착된다.
el 속성에 인스턴스가 부착된 후 data 속성이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다.

Vue Instance Life Cycle

Vue Instance Life Style을 크게 나누면

Instance의 생성
Instance를 화면에 부착
Instance 내용을 갱신
Instance 제거

LifeCycle 속성	설명
beforeCreate	Vue Instance가 생성되고 각 데이터들의 설정 전에 호출
created	Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가 서버에 데이터를 요청 ( http 통신 ) 하여 받아오는 로직을 수행하기 좋다
beforeMount	마운트가 시작되기 전에 호출
mounted	지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출 template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
beforeUpdate	데이터가 변경될 때 virtual DOM이 랜더링, 패치되기 전에 호출
updated	Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가
beforeDestroy	Vue Instance가 제거되기 전에 호출
destroyed	Vue Instance가 제거된 후 호출

Vue Instance 속성

Vue Method

Vue Instance는 생성과 관련된 data 및 method의 정의 가능
method안에서 data를 this.데이터이름 으로 접근 가능
실습

<body>
    <div id="app">
        <div>data : </div>
        <div>method kor : </div>
        <div>method eng : </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            name: 'JS',
            msg: 'Data입니다.',
        },
        methods: {
            helloKor(){
                return "안녕 " + this.name;
            },
            helloEng(){
                return "Hello " + this.name;
            }
        }
    })
</script>

실행 결과

Vue filter

뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능
filter를 이용하여 표현식에 새로운 결과 형식을 적용
중괄호 보간법 [] 또는 v-bind 속성에서 사용이 가능

<!-- 중괄호 보간법 -->


<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>

전역 필터

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

지역 필터

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

실습 금액은 천 단위마다 ‘,’ 찍기
번호는 사이에 ‘-‘ 넣기

<body>
    <div id="app">
       <div>
           금액 : <input type="text" v-model="msg1"><br>
           전화번호 : <input type="text" v-model="msg2">
       </div>
       <div>
           <h3></h3>
           <h3></h3>
       </div>
    </div>
</body>
<script>
    Vue.filter('price', (value) => {
        if(!value) return value;
        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    });
    Vue.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');
    });
    new Vue({
        el: "#app", 
        data: {
            msg1: '', msg2: '',
        },
    });
</script>

실행 결과

Vue computed

특정 데이터의 변경사항을 실시간으로 처리
캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 » 값
Setter와 Getter를 직접 지정할 수 있음
작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property 처럼 사용
종속 대상을 따라 저장(캐싱) 된다는 것이다.
watch 보다는 computed를 권장한다
실습

<body>
    <div id="app">
        <p>원본 메세지 : ""</p>
        <p>역순으로 표시한 메세지 : ""</p>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
   new Vue({
       el: "#app",
       data: {
           msg: '',
       },
       computed: {
           reverseMsg: function(){
               return this.msg.split('').reverse('').join('');
           },
       },
   });
</script>

실행 결과

Vue computed VS Vue method

computed 속성은 Vue 인스턴스가 생성될 때, 값을 받아 계산하여 저장해 놓는다. ( 캐싱 )
결과적으로 3번 출력되는 경우 한 번 실행하는 것과 같다.

method 는 출력될 때 마다 계산한다.
겷과적으로 3번 출력되는 경우 세 번 실행하는 것과 같다.

Vue watch

Vue Instance의 특정 property 가 변경될 때 실행할 콜백 함수 설정
Computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산하여 캐싱한다.
Watch의 경우는 data가 변경되었을 경우 다른 data를 ( 변경하는 ) 작업을 한다.
실습

<body>
    <div id="app">
        <p>원본 메세지 : ""</p>
        <p>역순으로 표시한 메세지 : ""</p>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
   new Vue({
       el: "#app",
       data: {
           msg: '',
           reverseMsg: '',
       },
       watch: {
           msg: function(newVal, oldVal){
               this.reverseMsg = newVal.split('').reverse('').join('');
           },
       },
   });
</script>

실행 결과

Kim Ji Soo