Vue / 7강, 8강 / Component의 기본, Data Binding

https://ccamanglab.tistory.com/25

Vue / 1~6강 / 프론트엔드 프레임워크와 ES6

지난 글에 이어서 쓰는 글

오늘부터 본격적인 Vue에 대해 공부한다.

 

 

7. Component기본

 

[Component의 특징]

Vue의 핵심 구성 요소

UI를 위한 화면(DOM)과 로직(Javascript)의 결합

 

컴포넌트가 기술요소의 메인요소임

한마디로 정의하면 재사용 가능한 동적 UI 구성을 목적으로 함

 

Component Tree 구조

의미 단위로 Component를 구성하고, 구성된 Component를 조합해서 화면을 구성함

 

Objcet Literal로 Component 선언

템플릿, 매소드, 데이터등 다양한 option을 가지는 오브젝트 리터럴로 선언

컴포넌트의 데이터는 data(){} 스타일의 함수로 선언

Component의 화면은 template 속성으로 정의

{{}}표현식을 이용함

 

Application Instance를 이요해 component출력

createApp() 함수로 Application Instance 생성

매개 변수에 Root Component 등록

 

Vue 파일로 Component 선언

확장자가 Vue인 파일

<template>,<Script>,<style> 태그로 컴포넌트 구성

 

[Component의 이용]

글로벌 등록 사용

Application Instance에 Component등록

Application 전역에서 Component 이용

Application Instance의 component()함수로 등록

 

첫번째 매개변수가 Component 태그명임

var app = createApp(Super)

app.component('Sub',Sub)

 

로컬로 등록 사용

Component가 필요한 곳에서 등록해서 사용

Components 속성을 이용해 등록

 

8. Component 옵션과 바인딩

 

[components]

Child Component를 등록하기 위한 옵션

components : {
MySub
}

 

[template]

Component의 UI Template

데이터가 바인딩 되어야 하는 부분을 {{}}으로 표현

Component의 데이터가 변경되면 템플릿에 의해 출력되는 부분도 변경

template : `
<div>
	<div>message : {{msg}} </div>
</div>
`

 

[data]

Component를 위한 data 설정

data에 설정된 값을 template, method 등에서 이용

data(){
	return {    
    msg : 'hello',
    arrayData:[
	    {message : 'hello'},
  		{message : 'world'}
    ]
    }
}

 

[methods]

컴포넌트에 메서드를 등록하기 위한 옵션

컴포넌트를 위한 비즈니스 업무 로직의 함수들이 등록되는 부분

캐싱 기능 없음

<p>Computed reversed message : "{{ reversedMessage() }}"</p>
....
methods {
	reversedMessage : function () {
		return this.msg.split('').reverse().join('')
	}
}

 

[computed]

템플릿 표현식의 복잡함을 줄이기 위해서 제공

표현식을 함수로 정의한 후 computed 속성에 등록하면,

템플릿에서 Getter Property로 이용

캐싱 기능 제공

<p>Computed reversed message : "{{ reversedMessage }}"</p>
....
computed {
	reversedMessage : function () {
		return this.msg.split('').reverse().join('')
	}
}

()들어가지 않고 그냥 변수 데이터 처럼 사용한다.

 

기본으로는 Getter함수만 제공 되지만, 원한다면 Setter 함수 추가 가능

Setter 함수도 Property로 이용함 fullName = 'Lee'

FullName:{
get: function(){},
set: function(val){},
}

 

[watch]

Data변경을 감지 하는 것

 

Watch:{

fisrtName : fuinction (val) {
this.fullName = val + ''+this.lastName}

lastName : function (val) {
this.fullName = this.firstName + '' +val

}

 

[Component Data Biniding]

Component Data를 화면에 출력함

Data는 data(){}에 명시

Template에서 Data Binding은 {{}}표현식 이용

 

<template>
  <div>
    Hello, {{name}}
  </div>
</template>
<script>
export default {
  data(){
    name : 'vue...'
  }
}
</script>

 

[Tag Attribute 값에 Data Binding]

HTML 속성 값에 데이터 바인딩 {{}}을 사용할 수 없음

v-bind를 이용해 속성 값을 지정함

<div v-bind:id="dynamicId"></div>
...
data(){
	return {
		dynamicId : 'a1'
	}
}

 

값이 Boolean이 대입되는 속성 경우, 데이터값이 false,undefined,null 이면 속성이 추가되지 않음

<button v-bind:disabled="isButtonDisabled">Button</button>
...
data(){
	return {
    	isButtonDisabled:true
        }
}

 

[Data Binding관련 Directive]

v-once => 초기 데이터 출력 후 데이터를 변경해도 업데이트 되지 않는 Template

<span v-once>This will never change : {{msg}}</span>

v-html => rawHtml로 출력

<p>Using mustaches : {{ rawHtml}} </p>
<p>Using v-html directive : <span v-html="rawHtml"></span></p>

 

[표현식 출력]

템플릿의 {{ }} 혹은 v-bind 안에 자바스크립트 표현식이 가능

단일 표현식만 가능

{{number + 1}}
{{ok ? 'YES' : 'NO'}}
{{msg.split('').reverse().join('')}}

<div v-bind:id="'list-'+ number"></div>
...
data(){
	return {
		number : 10,
		ok:'YES'
	}
}