학원 수업도 끝났고 남는 시간에 한 번 만들어봐야겠다 생각만 하던 조합으로
프로젝트를 만들어 봐야겠다
[실전 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
}
}
})
'개발자로 업그레이드 되자 > vue.js' 카테고리의 다른 글
| 만들며 공부하는 Vue.js + SpringBoot + JPA(2) (0) | 2022.02.25 |
|---|---|
| 1. Vue CLI 설치 (0) | 2021.12.31 |