시그마 삽질==six 시그마

vue의 생명주기 본문

프로그래밍/Javascript

vue의 생명주기

Ethan Matthew Hunt 2020. 5. 2. 06:44
Vue에 입문하기 좋은 장기효님의 Do it Vue.js 책  추천드립니다.

구매를 원하시는 분은 요기를 클릭해주세요

해당 글은 책 내용을 바탕으로 작성되었습니다.

 

<html>
  <head>
    <title>Vue Instance Lifecycle</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
	    
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
     var vm= new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        beforeCreate: function() {  //data&methods 속성 x, 돔접근 x
          console.log("beforeCreate");
        },
        created: function() { //data&methods 속성 o, template돔접근 x
          console.log("created");
        },
        mounted: function() { //el에 인스턴스 부착 , template돔접근 o
          console.log("mounted");
          this.message = 'Hello Vue!';
        },
	beforeUpdate: function() {
	  this.message = 'beforeUpdate!'; //인스턴스 속성들이 화면에 치환&데이터관찰 / 데이터변경시 화면그리기전 선호출
          console.log("beforeUpdate");
        },
        updated: function() {
	//this.message = 'updated!'; //화면그린후 호출/값 변경은beforeUpdate에서 or computed,watch속성 사용 권장/주석풀면 무한루프!
          console.log("updated");
        }
      });
    </script>
  </body>
</html>

 

결과화면

 

https://kr.vuejs.org/v2/guide/instance.html

'프로그래밍 > Javascript' 카테고리의 다른 글

Vue HTTP 통신  (0) 2020.05.02
Vue 라우팅  (0) 2020.05.02
Vue란 무엇인가?  (0) 2020.05.02
Vuex  (0) 2020.04.19
Vue.js 이벤트 버스(event bus)  (0) 2020.04.14
'프로그래밍/Javascript' Related Articles more
Comments