[VueJs] MVVM 패턴

• 뷰 인스턴스

  • 뷰로 화면을 개발할 때 필수로 생성해야 하는 단위

new Vue({
    el: // 인스턴스가 뿌려질 지점
    template: // 인스턴스의 화면 내용
    data: // 인스턴스가 갖는 데이터
    methods: // 인스턴스의 이벤트 정의
    created: // 인스턴스 라이프 사이클
});

 

• 뷰 컴포넌트

• 화면을 구조적으로 설계하기 위한 요소

• <Root> 가장 최상위 component

• 처음에는 components로 인스턴스 안에서 사용한다.

• 나중에 공통되는 속성을 전역으로 만들 수도 있다.

Vue.component('my-cmp', {
    // 인스턴스 옵션 속성과 동일
    template: // 인스턴스의 화면 내용
    data: // 인스턴스가 갖는 데이터
    methods: // 인스턴스의 이벤트 정의
    created: // 인스턴스 라이프 사이클
});

 

• 뷰 라우터

• 여러 개의 화면 간에 이동하는 방법

var router = new VueRouter({ 
      routes: [ 
        { 
          path: '/home', 
          component: { 
            template: '<p>Home 화면입니다.</p>' 
          } 
        }, 
        { 
          path: '/login', 
          component: { 
            template: '<p>Login 화면입니다.</p>' 
          } 
        } 
      ] 
    }) 
    var vm = new Vue({ 
      el: '#app', 
      router: router 
    });

 

• 뷰 템플릿

• 화면을 구체적으로 꾸미는 방법 & 문법

{{ message }}, 
{{ message.split('').reverse().join('')}} 
<p b-bind:id="uid">인스턴스 값과 연결</p> 
<a v-if="seen">seen 값에 따라 표시 여부 결정</a> 
<ul v-for="item in items">{{ item.name }}</ul> 
<button v-on:click="pAlert">클릭하면 경고창 표시</button>