You will be fine

<Vue.js> 1. 인스턴스

by BFine

공부(2018~2019) - 스킨변경전/Vue.js

반응형

Vue.js 인스턴스

1. 소개

  • Vue.js는 웹애플리케이션 제작을 쉽게 하도록 도와주는 자바스크립트 프레임워크 이다.
  • view 부분에만 초점을 맞춰 DOM의 데이터를 관리해주거나 템플릿 문법을 통해 DOM을 조작 할 수 있다.
  • 가장 큰 장점은 단일 파일 컴포넌트 이다. 각각의 컴포넌트 조합으로 view를 구성 할 수 있다.

2.1 Vue 인스턴스란?

  • 오브젝트는 추상적으로 대상을 표현하고 인스턴스는 지정된 오브젝트 하나 를 의미한다.
  • Vue 인스턴스는 Vue 오브젝트 하나를 의미하고 Vue 앱의 진입점이 된다.
  • 간단한 템플릿 렌더링 부터 데이터바인딩,컴포넌트 등 많은 동작을 한다.

2.2 인스턴스 생성

  • Vue 인스턴스를 생성할떄 데이터, 템플릿 메서드 등 옵션값을 전달할 수 있다.
  • el은 Vue 인스턴스가 작동할 엘리먼트를 지정하는 옵션이고 css selector나 HTML 요소가 들어가야한다.
  • data 는 Vue 인스턴스 내부에서 사용할 데이터를 정의하는 옵션이다.
  • {{}} 는 Mustache라 는 Vue 인스턴스 데이터를 출력하는 템플릿 문법이다.
<script type="text/javascript" src="https://unpkg.com/vue@2.3"></script>
<body>
  <div id="app">
    {{ message }}
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      message : 'hellow world'
    }
  })
</script>

2.3 데이터와 메서드

  • Vue 인스턴스 데이터는 사용자에게 보여주기 위해 정의되어야 한다. (배열, 객체 등)
  • @click 은 이벤트 바인딩이라는 템플릿 문법 중 하나이다.
<body>
  <div id="app">
    <button @click="btn">버튼</button>
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#app',
    methods : {
      btn : function(){
        alert('테스트');
      }
    }
  });
</script>

2.4 라이프 사이클

  • 생성 -> 마운트 -> 업데이트 -> 소멸 과정 을 거치며 대부분은 업데이트 사이클에 머물러 있는다.
  • Vue인스턴스를 생성할때 전달한 옵션으로 라이프사이크 훅을 정의할 수 있다.
  • 특정시점마다 이벤트를 발생시키는데 이를 사용자가 후킹 할 수 있다.
  • 예로 mounted 옵션을 이용하여 Vue 인스턴스가 마운트 되는 시점을 알 수 있다.

2.5 계산된 속성

  • computed 옵션을 사용하여 데이터를 바인딩할때 함수 형태가 아닌 데이터 형태 로 사용가능하다.
  • 데이터가 함수보다 더 효율적이기 때문에 데이터형태로 사용한다.
<body>
  <div id="app">
    {{result}}
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      s : 'hEllo',
      e : 'worlD'
    },
    computed : {
      result : function(){
          return this.s.toUpperCase()+" "+this.e.toUpperCase();
      }
    }
  });
</script>

2.6 감시된 속성

  • watch 옵셥을 사용하여 Vue인스턴스의 데이터가 변경되는 시점 을 감시해 메서드를 호출할 수 있다.
<body>
  <div id="app">
    <input v-model = "msg">
  </div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data : {
      msg : "Hello"
    },
    watch:{
        msg : function(value){
          alert(value+"로 변경됨");
        }
    }
  });
</script>

출처

반응형
저작자표시 비영리

'공부(2018~2019) - 스킨변경전 > Vue.js' 카테고리의 다른 글

<Vue.js> 5. 단일파일 컴포넌트  (0) 2019.05.31
<Vue.js> 4. 컴포넌트  (0) 2019.05.31
<Vue.js> 3. 템플릿 문법(2)  (0) 2019.05.25
<Vue.js> 2. 템플릿 문법(1)  (0) 2019.05.23

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바