애플리케이션 제작 팁
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Jua&display=swap" rel="stylesheet">
<title>Vue.js Todo</title>
</head>
컴포넌트 등록
- 최상위 컴포넌트인 App.vue에 지역 컴포넌트 등록
components: {
'컴포넌트 이름': 컴포넌트 내용
ex)
'TodoHeader: TodoHeader,
'TodoInput': Todo Input
}
등록한 컴포넌트 화면에 출력
<template>
<div id="app">
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
입력받은 텍스트 로컬 스토지에 저장
<template>
<div>
<input type="text" v-model="newTodoItem">
<button v-on:click="addTodo">추가</button>
</div>
</template>
<script>
export default{
data(){
return {
newTodoItem: ''
}
},
methods: {
addTodo(){
localStorage.setItem(this.newTodoItem, this.newTodoItem);
}
}
</script>
로컬스토리지 데이터를 뷰 데이터에 저장
<script>
export default{
data(){
return {
todoItems: []
}
},
created() {
if(localStorage.length > 0) {
for(var i = 0; i < localStorage.length; i++){
this.todoItems.push(localStorage.key(i));
}
}
뷰데이터의 아이템 개수만큼 화면에 표시
<template>
<section>
<ul>
<li v-for="todoItem in todoItems">{{ todoItem}} </li>
</ul>
</section>
</template>
선택한 것을 뷰에서 인식하도록 만들기
<template>
<section>
<ul>
<li v-for="(todoItem, index) in todoItems"> :key="todoItem"{{ todoItem}} </li>
</ul>
</section>
</template>
클릭한 내용 삭제
<span class="removeBtn" type="button" @click="removeTodo(todoItem, index)">
methods: {
removeTodo(todoItem, index) {
localStorage.removeItem(todoItem);
this.todoItems.splice(index, 1);
localStorage.clear();
props 활용
<script>
export default{
data(){
return {
todoItems: []
}
},
<template>
<TodoList v-bind:propsdata="todoItems"></TodoList>
</template>
<li v-for="(todoItem, index) in propsdata>
export default{
props ['propsdata'],
}
이벤트활용
<template>
<TodoInput v-on:addTodo="addTodo"></TodoList>
</template>
export default{
methods: {
addTodo(todoItem) {
localStorage.setItem(todoItem, todoItem);
this.todoItems.push(todoItem);
},
addTodo() {
if(this.newTodoItem !== "") {
var value = this.newTodoItem
this.$emit('addTodo', value);
}
}
VueX
- 애플리케이션의 상태관리를 돕는 라이브러리
- 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리하여 크기가 큰 애플리케이션의 데이터 관리를 효율적으로 한다.
웹팩(WebPack)
- 서로 연관이 있는 모듈간의 관계를 해석하여 정적인 자워능로 변화해주는 모듈번들러 →애플리케이션 동작과 관련된 여러개의파일(HTML, CSS, JS, 이미지등) 간의 연관관계를 파악하여 1개의 자바 스크립트 파일안에 다 넣어버리고 해당 자바스크립트 파일만 로딩해도 웹앱이 돌아가게 도와준다.