[Basic] Vue Instance

brianhwang·2021년 7월 15일
0

Vuejs

목록 보기
2/7
post-thumbnail

Vue로 화면을 개발하기 위해서는 Vue Instance는 꼭 생성해야 한다.
아래 와 같은 방법으로 Instance를 생성 할 수 있다.

 <script>
    let vm = new Vue({
     	// instance options
      }
    }); 
  </script>

new Vue 생성자 함수를 이용하여 인스턴스를 생성하면 root vue instance를 생성 할 수 있다. Root를 parent 클래스라고 생각하면 될거 같다. component 통신 방법에서 this를 사용 해보면 이해가 조금 더 잘된다.

Instance properties (인스턴스 속성)

아래와 같이 el, template, components, methods, data 등의 인스턴스 옵션 속성을 포함 할 수 있다.

<script>
  <div id="app"></div>
  
  new Vue({
      el : '#app',
      methods: {
      	increaseNumber : function(){
        	this.num++;
        }
      },
      data: {
      	message: 'hello vuejs',
        num : 10,
      },
      props:['propsdata'],
      computed: {
      	doubleNum: function(){
        	return this.num *2; 
        }
      },
      watch : {}
      ...
 </script>
});

el (HTMLElement) : 화면에 그려지는 시작점
methods : 이벤드 함수, this를 인스턴스에 바인딩
data : View에 무언가를 보여주기 위해 정의
props : 부모 컴포넌트로부터 전달 받은 속성
computed : 계산된 속성
watch : data에서 정의한 속성이 변경 되는 시점에 호출

computed 속성

아래 코드에서는 data 값의 변화에 따라 computed 속성 값들도 같이 변화는 것을 확인 할 수 있기 때문에 validation, text, 연산 쪽에 사용하는게 좋을거 같다.

<body>
  <div id="app">
    <p>{{num}}</p>
    <p>{{ doubleNum }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        num:10,
        apple: 2,
      },
      //계산된 속성. data 값의 변화에 같이 변화는 
      computed:{
        doubleNum : function(){
          return this.num * 2; 
        },
        tripleApple : function(){
          return this.apple *3
        }
      }
    });
  </script>
</body>

watch 속성

아래 예제 코드로 watch 의 기능을 확인 할 수 있다. watch는 data 값으 변화에 따라 특정 로직을 실행하며 watch는 데이터 요청시 사용성이 적합하다.

<body>
  <div id="app">
    <p>{{num}}</p>
    <button v-on:click="increase">increase</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data:{
        num:10,
        apple: 2,
      },
      computed:{
        doubleNum : function(){
          return this.num * 2; 
        },
        tripleApple : function(){
          return this.apple *3
        }
      },
      watch:{
        num: function(newValue, oldValue){
          this.fetUserByNumber(newValue);
        }
      },
      methods:{
        fetUserByNumber: function(num){
          axios.get(num); 
        }
      }
    });
  </script>
</body>

reference : Vue document , Vue.js 시작하기 인프런 강의

profile
Jiujitsu_coder

0개의 댓글