만들며 공부하는 Vue.js + SpringBoot + JPA(1)

학원 수업도 끝났고 남는 시간에 한 번 만들어봐야겠다 생각만 하던 조합으로

프로젝트를 만들어 봐야겠다

[실전 SPA 개발 Vue.js with 타입스크립트 + 스프링 부트]

--전자책이라 엄청 신경써서 만드신건지 페이지분량이 어마무시하다..

+ 인프런 김영한 강사님의 스프링 / JPA강의를 참고하며 진행한다. 

 

1. Vue 생성

Vue() 생성자를 사용해 생성된 객체를 Vue 인스턴스라고 한다. DOM 요소에 마운트 해 Vue 기능을 사용한다

<div id="app">
	{{message}}
</div>


new Vue({
	el : '#app',   //요소
    
    data: {
    	message: 'Hello Vue!'
    }, //데이터
    
    computed: {
    	//computed 는 data 속성의 데이터에서 파생된 값을 공개하여 data 속성과 마찬가지로
        //템플릿에서 사용할 수 있게 한다. 함수형태지만 ()를 붙히지 않고 data값처럼 사용한다
    },
    methods : {
    	//methods 는 이벤트 처리 콜백함수 정의나 데이터 가공 함수 정의로 사용한다
        //computed는 캐시기능을 지원하고 methods는 매번 호출시 새로 실행을 보장한다
    },
    watch :{
		//watch는 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
        //비동기 처리에 적합하다
    },
    filters: {
    	//필터는  | 왼쪽 하나의 인자를 받아 함수 형태로 정의한다
        //ex totalprice | numberFormat 으로 totalprice를 받아 화폐단위로 변환 등
    }
)}

//el없이
new Vue({
    data: {
    	message: 'Hello Vue!'
    }
)}.$mount('#app');

 

2. Vue의 인스턴스 라이프 사이클(생성부터 소멸까지)

beforeCreate -> data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않다

created -> data와 methods 접근 가능

beforeMount -> el 속성에 지전항 화면 요소에 인스턴스 부착 전 호출 단계

mounted -> 인스턴스 부착 후 호출 단계

beforeUpdate -> 관찰하고 있는 데이터가 변경되면 가상 DOM으로 화면을 다시 그리기 전에 호출되는 단계

updated -> 데이터가 변경되고 나서 가상 DOM으로 다시 화면을 그리고나면 실행되는 단계

beforeDestroy -> 인스턴스 접근은 가능하므로 삭제하기 좋은 단계

destroyed -> 모든 속성 제거 후 인스턴스 파괴

 

3. Vue 템플릿 문법

템플릿은 Vue 인스턴스의 데이터와 뷰의 관계를 선언적으로 정의하는 역할

템플릿 문법으로 Mustache ( {{ }} ) / v-bind ( : ) 존재

 

4. 디렉티브 = Vue.js의 독자 정의 속성

v-if	지정한 뷰 데이터 값의 참 거짓 여부에 따라 HTML을 표시한다
v-for	뷰 데이터 개수만큼 HTML 반복 출력
v-show	데이터 진위 여부에 따라 display:none으로 만든다
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용한다
v-model	폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동시화한다 (input, select , textaea 에 사용)

<tr>
	<td>비밀번호</td>
    <td><input type="password" v-bind:value="userPw"/></td>
</tr>
<tr>
	<td>소개</td>
    <td><textarea rows="5" v-bind:value="introduction"></textarea></td>
</tr>
<tr>
	<td>개발자여부</td>
    <td><span v-if="developer">개발자</span></td>
    <td><span v-else>개발자아님</span></td>
</tr>
<tr>
	<td>외국인여부</td>
    <td><span v-show="foreigner==='yes'">외국인</span></td>
</tr>
<tr>
	<td>사용자아이디</td>
    <td>
    	<input type="text" v-on:input="userId=$event.target.value" v-bind:value="userId">
    	//+ ex) v-on:change="~"
    </td>
</tr>

new Vue({
	el : "#app",
    
    data : {
		userId: "alex",
        userPw: "1234",
        introduction: "hello",
        developer : false,
        foreigner : "no",
        hobbyList : ["Sports" , "Music" , "Movie"],
        gender:"male",
        nationality : "01"
    },
    computed : {
    	getNationality: function(){
        	if(this.nationality ==="01"){
            	return "Korea";
            }else if(this.nationality ==="02"){
            	return "Germany";
            }else{
            	return "None";
            }
        }
    },
    methods :{
    	//데이터 값 
        onSubmit(){
        	const{ .....변수명} = this
        }
    }
})