본문 바로가기
FrameWork & Runtime/Vue.js

Vue.js

by jaeaemin 2022. 6. 28.

Vue 

 - MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

 

 

 

 

Vue의 Reactivity ( 반응성 ) 

 ==> 데이터의 변화를 라이브러리에서 감지해서 자동으로 화면으로 다시 그려주는 것 ! 

 

# 기본으로 제공하는 Object.defineProperty 

<body>
    <div id="app"></div>
    <script>
        var div = document.querySelector('#app');
        var viewModel = {};

        Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때 동작
            get: function(){
                console.log('접근');
            },
            // 속성에 값을 할당했을 때 동작 (바인딩)
            set: function(newValue) {
                console.log('할당');
                div.innerHTML = newValue;
            },
        })

       // Object.defineProperties() // 객체의 동작을 재정의하는 프로퍼티 
        //div.innerHTML = 'hello world';
    </script>
</body>
</html>

 

 

 

 

 

2. Vue의 인스턴스 

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> // vue 스크립트 가져오기
new Vue();  //vue인스턴스 생성

var vm = new Vue();
console.log(vm);  // vue 인스턴스 내 속성과 API 출력v

Vue의 인스턴스를 통해 미리 정의된 함수나 정의할 함수를 재사용하는 것이 가능함 

( 속성과 API를 정의 후 재사용 ) ==>   vm 에다가 넣어두기 ! 

 

 

인스턴스 생성자 함수 

function Person(name, job) {
    this.name = name;
    this.job = job
 }
 
 var p = new Person('jam','dev');
 
 
// ==> Vue의 인스턴스 생성은 new Vue();
// 생성된 인스턴스는 루트 컴포넌트

 

 

 

 

2-1.  Vue의 주요 속성과 API 

new Vue ({
el: , 인스턴스가 그려지는 화면의 시작점 ( 특정 HTML 내 태그 ) 
template : ,  화면에 표시할 요소 ( HTML, CSS 등 ) 
data : , 뷰의 반응성(Reactivity)이 반영된 데이터 속성
methods : , 화면의 동작과 이벤트 로직을 제어하는 메서드
created : ,  뷰의 라이프 사이클과 관련된 속성
watch : ,  data에서 정의된 속성이 변화했을 때 추가 동작을 수행하도록 정의하는 속성

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function

 

Function - JavaScript | MDN

Function 생성자는 새 Function 객체를 만듭니다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있습니

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

 

Object.prototype.constructor - JavaScript | MDN

인스턴스의 프로토타입을 만든 Object 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 1, true 및 "test"와 같은 원시(primi

developer.mozilla.org

 

 

 

 

3) 컴포넌트 

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다.

컴포넌트 기반으로 화면을 개발하게 되면 화면의 영역을 구분지어서 코드로 개발하면서 재사용성이 올라가고 빠르게 화면 제작이 가능함

( 맨 상단은 root component ) 

 

 

컴포넌트 생성 코드 형식 ( 전역 vs 지역 )

 

 

[1] 전역 컴포넌트 생성 등록

<body>
    <div id="app">
    	<app-header></app-header> 
        //	특정 영역에 컴포넌트를 등록 
        <app-content></app-content>
    <div>
     
     
    
    <script>
       // Vue.component('컴포넌트 이름', '컴포넌트 내용') ; // 뷰 객체 자체에 컴포넌트 등록 (전역)    
       Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });
        Vue.component('app-content', {
            template: <div>content</div>
        });

        new Vue({
           el: '#app'
        });
    </script>
</body>
</html>

 

 

[2] 지역 컴포넌트 생성 등록 

// Vue 생성자에서 바로 등록 시키는 방법 

new Vue({
    el: '#app',
    components: {
    	// key : value 형태로 루트에 등록시키기 
        'app-header': {
        	template: '<h1>Header</h1>'
         },
         'app-content': {
         	template: '<div>content</div>
         }
    }
});

 

 

[3] 전역 컴포넌트와 지역 컴포넌트의 차이점 

전역 컴포넌트 : 플러그인이나 라이브러리 형태로 사용함

지역 컴포넌트: 일반적으로 사용하고, 추후에 Vue의 컴포넌트 단으로 페이지를 해석하기 용이함 ! 

 

 

 

 

 

 

컴포넌트 계층 관계

- 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 가진다.  따라서 컴포넌트 간 데이터를 주고 받기 위해서는 아래의 절차를 따라야 함 

  • 위에서 아래로는 데이터(props)를 내리고
  • 아래에서 위로는 이벤트를 올린다(event emit)
  • 위에서 아래로, 아래에서 위로 정해진 형식으로만 통신한다. 다른 트리 구조에 직접적 영향 X
  • 따라서 다른 트리 구조로 가기 위해서는 루트를 거쳐야함
    • 이를 통해서 데이터의 흐름을 유추하는데 용이해짐

 

 

 

 

Props 속성 

<html>

	<div id="app"> // 루트 컴포넌트 
    	<app-header> v-bind:propsdata:"message"></app-header> 
        // 컴포넌트에 프록스를 등록합니다 !!!
        <app-content> v-bind:propsdata:"num"></app-content>
    </div>
    
    <script>
    var appHeader = { 
    	template: '<h1> {{ propsdata }} </h1>', // 데이터 바인딩 !!!
        props: ['propsdata']
    }
    
    var appContent = {
    	template: '<div< {{ propsdata }} </div>,
        props: ['propsdata']
    }
    
    new Vue({
    	el: '#app',
        components: {
        	'app-header': appHeader,
            'app-content': appContent
         },
         data: {
         	message: 'hi'
            num: 10
         }
     })

 

 

 

event emit

하위 컴포넌트에서 이벤트를 발생 시켜 상위 컴포넌트에게 신호를 전달하는 역할 !

 

<html>
    <div id="app"> // 루트 컴포넌트 
        <app-heade v-on:pass="logText"></app-header>
        // 루트에서 실행할 메서드 정의 ( 하위 이벤트 = 실행할 메서드 ) 
    </div>
    
    <script>
    var appHeader = { 
    	template: '<button v-on:click="passEvent">click me</button>' 
        //버튼 생성 후 click시 passEvent 라는 이벤트를 생성
        methods: {
        	passEvent: function() { // pass이벤트 정의
            	this.$emit('pass') // emit을 상위 계층에게 전송함 !!
            }
        }
    }
    
    new Vue({
    	el: '#app',
        components: {
            'app-header': appHeader
         },
         data: {
            message: 'hi'
            num: 10
         },
         methods: {
            logText: function(){
            	console.log('log hi');
             }
         }
     })

 

 

인스턴스에서 This : 속하는 객체에서의 변수에 대한 접근 

같은 레벨의 컴포넌트 이벤트 전송의 경우에는 상위의 루트로 데이터를 이관하여 처리한다 ! 
반응형

'FrameWork & Runtime > Vue.js' 카테고리의 다른 글

Vuejs 2  (0) 2022.07.03

관련글

티스토리툴바