[Vue] 인스턴스

Posted on
Vue의 인스턴스에 대해서 알아보자

el, data, computed

EX


<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <input type="text" v-model="num" /><br />
    1부터 입력된 수까지의 합 : <span></span>
</div>
<script type="text/javascript">
//1부터 입력된 수까지의 합구하기
var vmSum = new Vue({
    el : "#example",
    data : { num : 0 },
    computed : {
        sum : function() {
            var n = Number(this.num);
            if (Number.isNaN(n) || n < 1)  return 0;
            return ((1+n) * n) / 2;
        }
    }
});
</script>
</body>

Data

  • Vue 의 data 옵션에서 실제 data 를 연결해서 사용한다.

  • data 옵션은 vue 인스턴스가 관찰 변경 사항 즉시 감지

el

  • Vue 인스턴스에 연결할 DOM 요소 지정

  • 단 한개의 요소만 연결 가능

computed

  • Vue 인스턴스에 함수로 지정해서 속성 처럼 다룰 수 있다.

매서드

EX


<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    <input type="text" v-model="num" /><br />
    1부터 입력된 수까지의 합 : <span></span>
</div>
<script type="text/javascript">
//1부터 입력된 수까지의 합구하기
var vmSum = new Vue({
    el : "#example",
    data : { num : 0 },
    methods : {
        sum : function() {
            console.log(Date.now());
            var n = Number(this.num);
            if (Number.isNaN(n) || n < 1)  return 0;
            return ((1+n) * n) / 2;
        }
    }
});
</script>
</body>

  • Vue 인스턴스에서 사용 할 매서드 등록

  • Vue 인스턴스로 직접 호출 가능

  • 디렉티브 표현식 콧수염 표현식( `` ) 가능

  • 계산형 속성과 차이점

계산형 속성은 결과같을 캐싱 , 매서드는 매번 호출

  • ES6의 화살표 함수를 사용을 지양함

화살표 함수의 this가 Vue인스턴스를 참조하지 않고 전역객체를 참조함

관찰속성

EX


<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
    x : <input type='text' v-model="x" /><br />
    y : <input type='text' v-model="y" /><br />
    덧셈 결과 : 
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#example",
    data : { x:0, y:0, sum:0 },
    watch : {
        x : function(v) {
            console.log('## x 변경')
            var result = Number(v) + Number(this.y);
            if (isNaN(result)) this.sum = 0;
            else this.sum = result;
        },
        y : function(v) {
            console.log('## y 변경')
            this.y = v;
            var result = Number(this.x) + Number(v);
            if (isNaN(result)) this.sum = 0;
            else this.sum = result;
        }
    }
})
</script>
</body>

  • watch 옵션을 이용해서 관찰 속성 등록

  • data 옵션의 속성값이 변경되는 것을 감지 등록한 함수 호출

  • 값이 바뀔 때마다 매번 함수가 호출됨

  • 비동기 처리에 적합

v-cloak 디렉티브

  • 컴파일이 되지 템플릿은 나타나지 않도록 처리

  #list  { width: 400px; border:1px solid black; border-collapse:collapse; }
    #list td, #list th { border:1px solid black;  text-align:center; }
    #list > thead > tr { color:yellow; background-color: purple; }
    [v-cloak] { display: none; }
    ....
     <div id="example"  v-cloak>
    ....

Vue 의 인스턴스 라이프 사이클

  1. beforeCreate

    • Vue 인스턴스가 생성되고 데이터에 관찰기능 및 이벤트 감시자 설정 전

  2. created

    • Vue 인스턴스가 생성되고 데이터에 관찰기능 및 이벤트 감시자 설정 후

  3. beforeMount

    • 마운트가 시작되기 전

  4. mounted

    • 마운트가 시작된후

  5. beforeUpdate

    • 가상 DOM 이 랜더링 패치 되기 전에 데이터가 변경될때 하지만 추가적으로 랜더링 하지 않음

  6. update

    • 데이터의 변경으로 가상 DOM 이 다시 랜더링 되고 패치된 후 호출, OM에 종속성이 있는 연상을 수행 가능

  7. beforeDestroyed

    • Vue 인스턴스가 제거되기 전에 호출

  8. destroyed

    • Vue 인스턴스가 제거된 후 호출, 바인딩이 해제되고, 이벤트 연결도 모두 제거된다.

lifeCycle