🖥Frontend/Vue.js
Vue.js 파비콘, 아이콘, 폰트, 반응형 태그 설정 / 컴포넌트 구현하기
목차
반응형
Vue.js 파비콘, 아이콘, 폰트, 반응형 태그 설정 / 컴포넌트 구현하기
vue.js todo app
index.html에 Meta viewport를 추가한다.
<meta name="viewport" content="width=device-width, initial-scale=1">반응형 웹으로 설정하기 위한 메타 태그이다.
파비콘 생성 방법
https://www.favicon-generator.org/
위 링크 사이트에서 이미지 추가후 favicion 16 * 16 체크한 뒤 생성
Font Awesome, Google Font 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-todo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
Todo 컴포넌트 구현
TodoHeader.vue
<template>
<!-- HTML -->
<header> <!-- 컴포넌트의 정체성을 나타내는 header 태그 -->
<h1>TODO it!</h1>
</header>
</template>
<!-- scoped는 이 해당 컴포넌트에서만 적용되게 하는 스타일 속성이다. 다른 css에는 영향을 주지 않는다는 것.-->
<!-- 싱글 파일 컴포넌트 -->
<style scoped>
/* css */
h1 {
color: #2F3B52;
font-weight: 900;
margin: 2.5rem 0 1.5rem;
}
</style>
App.vue 앱.뷰에서 전체 스타일
<style lang="scss">
body {
text-align: center;
background-color: #F6F6F6;
}
input {
border-style: groove;
width: 200px;
}
button {
border-style: groove;
}
.shadow {
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>
Input 박스에 입력된 값이 newTodoItem에 즉각적으로 변동된다.
Angular와 React의 장점을 결합한게 Vue.js이다.
투웨이 바인딩이 따라온 상황이다.
화면에서의 데이터 변경과 Vue 안에서 인스턴스 변경이 동일하게 동기화가 된다.
TodoInput 컴포넌트의 할 일 저장 기능 구현
TodoInput.vue
<template>
<div>
<!-- v-model이란, input에 입력된 텍스트 값을 동적으로 바로바로 vue 인스턴스에 매핑을 하는 것. -->
<!-- newTodoItem은 input 박스에 새롭게 입력된 데이터 연동에 사용-->
<input type="text" v-model="newTodoItem">
<button v-on:click="addTodo">add</button>
</div>
</template>
<script>
export default {
name: "TodoInput",
data: function () {
return {
newTodoItem: ""
}
},
methods: {
addTodo: function (){
console.log(this.newTodoItem);
// 저장하는 로직
localStorage.setItem(this.newTodoItem, this.newTodoItem);
// this.newTodoItem = '';
}
}
}
</script>
<style scoped>
</style>
로컬 스토리지 setItem() API 공식 가이드
https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
크롬 개발자도구 Application탭에서 보면 key, Value 동일한 텍스트 값으로 추가되는 것 확인
반응형
'🖥Frontend > Vue.js' 카테고리의 다른 글
| Vue2 - 더 이상 믹스인을 사용하면 안됩니다. (0) | 2022.07.19 |
|---|---|
| Vue.js 3.6 렌더링 / 3.7 이벤트 핸들링 (0) | 2021.07.26 |
| vue.js 프로젝트 소개 및 컴포넌트 설계 방법 (0) | 2021.07.26 |
| 1. Vue.js - book - 기초 (0) | 2021.07.23 |
| Vue.js (0) | 2021.07.22 |
댓글