캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의를 정리했습니다.
매일 20분 야금야금 Vue.js 중급 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
input 태그에 텍스트를 입력하면, 입력한 값을 로컬 스토리지에 저장한다.
입력한대로 newTodoItem에 값이 들어간다. (뷰의 반응성 확인)
뷰 인스턴스에 newTodoItem 을 선언하고,
<script>
export default {
data: function(){
return {
newTodoItem: ""
}
}
}
</script>
input태그에 v-model로 바인딩한다.
<template>
<div>
<input type="text" v-model="newTodoItem">
</div>
</template>
버튼에 클릭이벤트를 만들어서 addTodo()메서드를 실행 시키도록 한다
<input type="text" v-model="newTodoItem">
<button v-on:click="addTodo">add</button>
key, value 형태로 저장할 수 있는데, 둘 다 입력값으로 저장하자.
localStorage
브라우저 탭이나 창 하나에서만 유지되는 작은 저장소.
탭을 닫으면 localStorage도 지워진다.
브라우저 내에 localStorage 는 페이지 프로토콜 별로 구분한다.
참고 localStorage MDN Docu
methods: {
addTodo: function(){
// 저장하는 로직 (key valeu를 통일하게 )
localStorage.setItem(this.newTodoItem, this.newTodoItem);
this.newTodoItem = '';
}
}
프로토콜마다 구분되므로 HTTP 에서 저장한 데이터와 HTTPS에서 저장한 데이터는 따로 구분되어 저장된다.
상단의 '중지'버튼을 누르면 저장소가 초기화된다.
<template>
<div>
<input type="text" v-model="newTodoItem">
<button v-on:click="addTodo">add</button>
</div>
</template>
<script>
export default {
data: function(){
return {
newTodoItem: ""
}
},
methods: {
addTodo: function(){
// 저장하는 로직 (key valeu를 통일하게 )
localStorage.setItem(this.newTodoItem, this.newTodoItem);
this.newTodoItem = '';
}
}
}
</script>
<style>
</style>
addTodo 메서드에는 저장 기능과 input 태그 초기화 기능이 있다.
input을 초기화 하는 코드는 clearInput 메서드로 따로 분리하자.
methods: {
addTodo: function(){
localStorage.setItem(this.newTodoItem, this.newTodoItem);
this.clearInput();
},
clearInput: function(){
this.newTodoItem = '';
}
}
style scoped 태그 쪽에 코딩하여 스타일링하자.
1) 아이콘은 'Font awesome'에서 검색하자.
회원 가입하고 이메일 인증 후, 마이 페이지에 나와있는 CDN을 index.html에 복붙하자.
참고: CDN(Contents Delivary Network)은 정적 리소스에 다운받을 정보의 주소와 종류를 넣은것이다.
[CDN을 추가하는 index.html 파일 경로 유의하기]
프로젝트명/public/index.html
2) font awesome에서 'plus' 검색
3) 아이콘의 html 복사해서 필요한 곳에서 사용
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem">
<!-- <button v-on:click="addTodo">add</button> -->
<span class="addContainer" v-on:click="addTodo">
<i class="fas fa-plus"></i>
</span>
</div>
</template>
<script>
export default {
data: function(){
return {
newTodoItem: ""
}
},
methods: {
addTodo: function(){
localStorage.setItem(this.newTodoItem, this.newTodoItem);
this.clearInput();
},
clearInput: function(){
this.newTodoItem = '';
}
}
}
</script>
<style scoped>
input:focus {
outline: none;
}
.inputBox {
background: white;
height: 50px;
line-height: 50px;
border-radius: 5px;
}
.inputBox input {
border-style: none;
font-size: 0.9rem;
}
.addContainer {
float: right;
background: linear-gradient(to right, #6478fb, #8763fb);
display: block;
width: 3rem;
border-radius: 0 5px 5px 0;
}
.addBtn {
color: white;
vertical-align: middle;
}
</style>
다음 시간에는 localStorage에 저장한 할 일들을 '목록에 표시'하는 기능을 구현한다.